It's easy to create a theme, you just have to create a new folder. To start using your theme,modify the
theme setting in your site's
theme: ./src # or from a npm package # call `saber-theme-simple`: theme: simple
A theme should have following folder structure:
. ├── saber-browser.js # optional ├── saber-node.js # optional └── layouts # required
Theme layouts are populated under
$theme/layouts directory and this directory is required, layouts in
$projectRoot/layouts will still work and take higher priority.
If you are using a theme from npm and wish to modify it to better suit your needs, you might want to eject it. This will copy over its source code to
./theme, allowing you to edit it.
The above command will use the files from
node_modules, but if you want the source code from the repository instead, add the
--git flag. This will clone the theme's Git repository as a submodule, which adds the benefits of easier upgradability, contribution to the upstream code and better version control management.
We showcase high-quality official and community themes on this page, you can follow this guide to get your theme included:
First you need to fork Saber and clone it to your local machine:
git clone email@example.com:YOUR_USERNAME/saber.git
Then add a preview image to
website/pages/theme/previews folder, there're some requirements that the image should meet:
- Using PNG format.
- Using npm package name as the filename, e.g.
- The size should be
2048x1536. Tip: you can use Chrome devtools to resize and screenshot the web page.
- Under 80KB, you can compress it using TinyPNG.
website/pages/theme/_themes.yml and add your theme, here's an example:
- name: Minima npm: saber-theme-minima demo: https://minima.saber.land repo: https://github.com/saberland/saber-theme-minima tags: - Blog - Clean - Minimal