| 1 | ## Dependencies |
| 2 | |
| 3 | Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment installed before proceeding: https://revealjs.com/installation/#full-setup |
| 4 | |
| 5 | ## Creating a Theme |
| 6 | |
| 7 | To create your own theme, start by duplicating a `.scss` file in [css/theme](css/theme). It will be automatically compiled from Sass to CSS when you run `npm run build:styles` (see [vite.config.styles.ts](../../vite.config.styles.ts)). |
| 8 | |
| 9 | Each theme file follows the same structure: |
| 10 | |
| 11 | 1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)** |
| 12 | Shared utility functions. |
| 13 | |
| 14 | 2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)** |
| 15 | Declares a set of custom CSS variables that the template file (step 4) expects. Each of these variables can be overridden to customize the theme. |
| 16 | |
| 17 | 3. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** |
| 18 | The template theme file which will generate final CSS output based on the currently defined variables. |
| 19 | |
| 20 | 4. **Optionally add custom fonts and/or additional styles** |
| 21 |