diff --git a/SPEC.md b/SPEC.md index d53ad5a..d2d9813 100644 --- a/SPEC.md +++ b/SPEC.md @@ -43,12 +43,12 @@ Footer and content images have `2x` versions, make sure to use them for Retina d ### Theming -Two themes: light and dark. Theme implementation is JS/CSS only. +One theme with light and dark variations. Theme implementation is JS/CSS only. - When site is loaded, system theme should be checked if possible. - Website should watch for system theme changes and update site's theme. - Website theme should be control with switcher, so both CSS should be always connected - Adds `body__theme__light` or `body__theme__dark` class to body. -- Theme CSS variblaes should be attached to `body__theme__light` and `body__theme__dark`, not `:root`: +- Theme CSS variblaes should be attached to `body__theme__light` and `body__theme__dark`: - light: - `background-color`: `#ffc000` - `text-color`: `#40414e` @@ -57,6 +57,7 @@ Two themes: light and dark. Theme implementation is JS/CSS only. - `background-color`: `#40414e` - `text-color`: `#ffc000` - `border-color`: `#ffc000` +- Do not use `:root` for theme CSS vars - Create such CSS vars in `theme-light.css` and `theme-dark.css` and reuse them in the project - Do not write any other CSS inside theme-light and theme-dark! - `background-color` should be background of whole website. Add in `main.css`: @@ -203,7 +204,7 @@ Do not generate hack itself, only the layout. - use `` to connect all styles files, there are 4 css files, connect all of them! - do not use `disabled` on any css - connect both themes - - use `` to connect JS, there are 3 JS files, connect all of them + - use `` to connect JS, there are 3 JS files, connect all of them - `#remark42` should not be inside `baseof.html`, it is only inside `single.html - themes/devsparks/layouts/_default/list.html - Contains Hacks titile if it is index @@ -221,7 +222,7 @@ Do not generate hack itself, only the layout. - contains only colors and other changes for light theme, do not contain any common styles - themes/devsparks/static/css/theme-dark.css - contains only colors and other changes for dark theme, do not contain any common styles -- themes/devsparks/static/js/theme-switcher.js (should contain JS for theme-switcher in the header) +- themes/devsparks/static/js/theme.js (should contain JS for theme switcher + system theme monitoring in the header) - themes/devsparks/static/js/footer-image.js - themes/devsparks/static/js/remark42.js: - Should contain the following snippet: