Typemill   ›   Plugins and Themes   ›   Themes

Themes

This demo installation includes three themes, all designed for informational websites like documentation, knowledge bases, and similar purposes. Explore all available themes in the theme directory.

Switch and Configure Themes

You can manage and configure themes in the "Theme" section of the system settings. You can switch themes and customize all settings in the demo instance, but keep in mind that all changes will reset every 30 minutes.

Screenshot of the theme settings in Typemill

Readymades

The Cyanine and Guide themes offer "readymades" at the top of their settings, allowing you to quickly apply preconfigured setups. Simply select a readymade, save the settings, and preview the changes in the frontend. You can also create and save your own readymades for future use.

Screenshot of the readymades from the guide theme

Custom CSS

All themes provide a field for custom CSS. To customize a theme with custom css, you need at least some knowledge of HTML and CSS.

Develop Your Own Theme

Typemill’s adherence to best practices and technologies makes it straightforward to create custom themes or adapt existing ones from other CMS platforms.

  • Technologies: Themes are built using Twig for templating and YAML for configurations. Additional technologies are optional.
  • Getting Started: Use the dev theme as a starting point or modify an existing theme to suit your needs.

A Note About the Tech Stack

Typemill uses Vue.js and Tailwind CSS for its interface. However, themes in Typemill follow a different and more lightweight tech stack. If you develop your own themes, you are free to choose your preferred tools.

Here is the default setup used in most Typemill themes:

  • Twig Templates: Twig is used for theme templates. It is a widely-used template language in many PHP applications.
  • Tachyons CSS: A lightweight utility-first CSS library, similar to Tailwind CSS. It does not require preprocessing — simply include the CSS file, and all classes are available. This works well with the HTML plugin. With this combination you can create frontend elements without writing additional CSS. Tailwind CSS can also be used if preferred.
  • Vanilla JavaScript: Most themes use plain JavaScript for frontend functionality or no JavaScript at all. Libraries like Vue.js or React are primarily designed for complex interfaces and are not necessary for simple frontend websites. However, you can use any JavaScript framework you like.