TinaTheme is a simple, lightweight Typecho blog theme, ported and deeply modified from Hugo-tania, that turns a Typecho website into a fast, customizable blog with dark mode, PJAX navigation, and code highlighting.
What is TinaTheme?
TinaTheme is a Typecho theme originally based on the Hugo-tania theme and heavily modified for the Typecho platform. It takes Typecho's posts, pages, and comments as input and outputs a responsive, theme-styled front-end site. The theme is developed by ouyangyanhuo, distributed as a theme package to be uploaded to the /usr/themes directory, and open-sourced under the GPL V3.0 license. It also serves as a showcase at its demo site https://tina.fmcf.cc.
Key Features
- Dark mode — A light/dark theme with an animated switcher that functions across PJAX page transitions, with a safe fallback to prevent transition errors.
- PJAX navigation — Enables smooth page transitions without full reloads; all scripts re-initialize after switching, fixing issues like MathJax errors.
- Highlight.js integration — Code blocks are highlighted with Highlight.js, working both on direct page entry and after PJAX navigation.
- MathJax rendering — Renders mathematical formulas; the changelog specifically fixed a
MathJax is not definederror after PJAX navigation. - Responsive layout — Uses HTML-native responsive design, so no external CSS framework is required.
- Ultra-lightweight — The theme is described as "超轻量" (ultra-lightweight), aiming for fast loading.
- Complete backend settings system — Typecho's admin panel exposes theme options for customization, described as a "完善的后台设置系统".
- Separate comments stylesheet — Comment layout is split into
assets/css/comments.cssand restructured with clearer class names for headers, bodies, and action areas.
Who is it for?
- Typecho bloggers who want a clean and fast theme with modern reading features like dark mode and PJAX.
- Hugo users switching to Typecho who like the Hugo-tania design and want a similar look without leaving Typecho.
- Open-source users and developers who want to study or modify a GPL V3.0-licensed theme, since the code is publicly available on GitHub and welcomes Issues and PRs.
What can you do with TinaTheme?
- Bloggers: Publish articles with syntax-highlighted code blocks and rendered math formulas directly in your Typecho posts.
- Site owners: Give readers a dark-mode toggle that persists across page navigation, improving night-time reading.
- Developers: Extend the theme using its backend settings system, or restyle comments, footer, and page templates by editing clear, refactored HTML and CSS files.
How does TinaTheme work?
To install, download the theme package and rename the folder to TinaTheme if you got it from GitHub or Gitee. Upload the folder to /usr/themes on your Typecho site, then go to the admin console, choose Appearance, and enable the theme.
FAQ
Is TinaTheme free?
Yes. The theme is open source under the GPL V3.0 license, which also means you can modify it for yourself, but any distribution of modified versions must also be GPL-licensed.
What license does TinaTheme use?
It uses the GNU GPL V3.0 license, as stated in its repository. You must comply with that license when doing secondary development.
Does TinaTheme require keeping a footer link?
Yes. You must keep the TinaTheme theme name and a link to it in the footer. You may remove the secondary author copyright line, but not the TinaTheme name and its link.
Does TinaTheme support dark mode and PJAX?
Yes. The theme natively supports dark mode, and its PJAX integration ensures code highlighting, math rendering, and the dark-mode button keep working after page switches.
Where can I find TinaTheme documentation?
The official documentation is at https://tina.fmcf.cc/Docs, and the demo site is https://tina.fmcf.cc.
