Moricolor (also MoriColor) is a free Typecho blog theme centered on the visual mood of a forest cabin, transforming a standard Typecho blog into a calm and natural reading space with quick-preview cards, color scheme options, and optional social feed integration.
What is Moricolor?
Moricolor is a blog theme for Typecho, the lightweight PHP blogging platform. It takes standard Typecho content — posts, pages, comments, categories, and tags — and renders it with a minimalist, nature-inspired layout. The homepage shows a list of articles with quick-preview functionality, and the theme is fully responsive. Moricolor was authored by Trii Hsia, and the GitHub repository (txperl/Moricolor-for-Typecho) has gathered 352 stars. An official Hexo port, MoriColor for Hexo, is maintained by Anapopo.
Key Features
Moricolor bundles a wide set of reader- and owner-focused features, controlled from a single config file and per-post HTML comments.
- Quick article preview — clicking the date on the homepage opens a preview of the post inline, so visitors can skim an article without navigating away.
- Global configuration via config.php — toggle the bottom tool widgets, set quick previews per page, choose a background image, adjust font weight, and control comment display.
- Bottom tool widgets — independently switchable widgets for hitokoto one-sentence quotes, categories, tags, pages, and search.
- Five color presets — built-in palettes named Mori, H, Q, L, and F change the site's colors; Mori (green forest tone) is the default.
- MoriGarden social sync (beta) — optional tool that pulls public timelines and watching lists from Twitter, Bangumi, and Bilibili and displays them at the bottom of the homepage.
- Material Design icons included — the theme bundles the Material Design Iconic Font in the fonts/md directory.
- Prism.js code highlighting — add a language-xxx class to code blocks (e.g. language-php) to get syntax highlighting; additional languages can be downloaded from the Prism.js website.
- Per-post cover images and custom summaries — use the inline comment
<!-- img_quick:img_url; -->in a post to set a header cover image (recommended width at least 980px) and<!-- des_quick:your_words; -->to override the quick-preview excerpt. - Article table of contents — the TextBar mode provides a directory navigation that supports only h3 and h4 levels and is hidden on mobile devices.
Who is it for?
Moricolor is suitable for Typecho bloggers who prefer a quiet, nature-inspired aesthetic rather than a default or generic look. Anime and social-media fans can enable MoriGarden to display their Bangumi watching list or Bilibili history directly on the blog. Developers looking for a clearly structured theme will appreciate the single-file global configuration and the availability of an official Hexo conversion. Blog owners who want to customize the atmosphere can set a background image and choose between normal, lighter, or bolder font weights to match their style.
What can you do with Moricolor?
- Visitors — skim posts quickly from the homepage without loading a new page, then dive into the full article when needed.
- Writers — add a cover image and a custom excerpt to each article through simple HTML comments in the editor.
- Social feed fans — pull your Twitter timeline, Bangumi watching list, or Bilibili watching list into the page footer through the MoriGarden feature.
- Designers — switch between five color presets, set a full-page background image, and fine-tune font weight to create a unique visual identity.
How does Moricolor work?
After installing the theme in your Typecho themes directory, edit config.php to enable or disable the widgets and options you want. For per-post customization, insert the <!-- img_quick:img_url; --> comment in the article editor to define a cover image and <!-- des_quick:your_words; --> to change the preview text. If you enable MoriGarden, you must adjust its own configuration file, ./MoriGarden/config.php, before it will work correctly.
Pros and cons
- Free and open source — the code may be freely modified and used, although commercial use is explicitly prohibited.
- Strong integrations — includes social feed sync, a quote API widget, and code highlighting out of the box.
- Limitation: the article table of contents only supports h3 and h4 levels, and it is hidden entirely on mobile devices.
- Limitation: the theme references several local resources, which can slow down page loading unless you move them to a CDN.
- Limitation: MoriGarden is in beta and ships with the author's personal API token, so heavy or abusive usage may cause it to break.
Pricing
Moricolor is free to download, use, and modify. The only restriction in the license is that commercial use is not allowed.
FAQ
Is Moricolor free?
Yes, the theme is free. The source code can be freely modified and used as long as the usage is not commercial.
Does Moricolor work with Hexo?
There is an official port called MoriColor for Hexo, maintained by Anapopo, which brings the same design to the Hexo static site generator.
How do I add a cover image to a post?
Insert the HTML comment <!-- img_quick:img_url; --> at the top of the article, replacing img_url with the image link. A width of at least 980px is recommended for the best visual result.
Which code languages are highlighted by default?
The bundled Prism.js supports only a subset of languages. To add more, download the languages you need from the Prism.js website and include them in the theme.
What is MoriGarden?
MoriGarden is an experimental feature that aggregates public timelines from Twitter, Bangumi, and Bilibili into the blog footer. It is enabled through config.php and has its own configuration file in the MoriGarden directory.
