Skip to content

CSS Loader logo, based on paint-roller from Font Awesome
CSS Loader - Docs

🎨 Creating a Theme

Development for the CSS Loader is intended to be as simple as possible. That being said, we understand not everyone understands how to edit CSS files. If you have any suggestions for how we can make this guide easier to understand, please feel free to create an issue.

📋 Prerequisites

  • Some experience in CSS and JSON
  • Installed CSS Loader
  • (Optional) Installed a Chromium-based browser

📂 Template

There is a template repository you can use for creating your first theme. It contains all the files you need to get started and is pre-configured to work with the CSS Loader.

🪁 Getting Started

CSS Loader considers all folders in ~/homebrew/themes that have a theme.json or theme.css in the root of that subfolder themes. Usually, themes have the following structure:

└── themes
    └── My Epic Theme
        ├── theme.json
        └── shared.css

The theme.json contains information on how CSS Loader should inject the CSS you provide. For information on how to construct a theme.json and see everything it can do, see the Features page. A visualizer site is also available to help construct theme.json files.

To more easily edit and test CSS, you can use the CEF Debugger to make edits live on your deck.

For information on submitting a theme, see Submit To