This documentation is meant for developers using GitHub to create file-based themes. This feature is only available to Enterprise clients with their own cluster on Vanilla Cloud.
The easiest way to get started is to start from another theme. Foundation is a good theme to use, as it is what our theming system is based on. Note that you can create a custom theme that has almost no code because the way Foundation works is anything you haven't specified uses a default value. Setting nothing at all gives you the "Foundation theme" as it inherits everything.
"Directory based theme" mean the theme is loaded from files on disk. As soon as you edit your theme through the dashboard UI, a copy is saved to the data base. In your config, if your theme is loaded from a directory based theme, you'll see the name of the theme as the value of $Configuration['Garden']['CurrentTheme']. Example: $Configuration['Garden']['CurrentTheme'] = 'theme-foundation';. After modifications in the theme editor, you will see a number that corresponds to an entry in the database. Example: $Configuration['Garden']['CurrentTheme'] = '19';.
Vanilla Local Setup
Creating a new file based theme
- Create a copy of
/addons/themes/theme-foundation in your repo. - Rename the folder and, most importantly, the values in
addon.json. You'll want to change the "key", "name", "description" and "authors" values to proper values. - On the file
package.json from you theme change the "name" to the same value you've set as the "key" in addon.json. - Symlink theme into
vanilla/themes.- Use a relative symlink, so that the directory can be mounted in Docker.
On the root of your vanilla installation run composer install and you should now see your theme show up in the /theme/theme-settings page. If you do not have access to this page, you need to enable the ThemingAPI plugin. This is a proprietary plugin, so for local development, you can apply your theme manually if it doesn't show in your dashboard. You will need to set 3 config values:
$Configuration['Garden']['Theme'] = 'my-custom-theme';
$Configuration['Garden']['MobileTheme'] = 'my-custom-theme';
$Configuration['Garden']['CurrentTheme'] = 'my-custom-theme';
After adding or removing a theme, or changing an addon's meta-information, clear the associated index in the in the /cache directory, or run:
vnla clear-caches
Styling your theme (React)
Newer, react components should never be targetted this way. Use the theme variables. The CSS classes are generated and are not guarenteed to stay consistent.
https://success.vanillaforums.com/kb/articles/155-local-setup-quickstart
https://success.vanillaforums.com/kb/articles/166-vanillas-frontend-build-system
https://success.vanillaforums.com/kb/articles/165-javascript-css-quickstart
https://typestyle.github.io/
