-
Notifications
You must be signed in to change notification settings - Fork 59
CSS Themes
Watcher has the ability to accommodate user created CSS themes. You can create a custom theme by adding a folder to the watcher/static/css/ directory. The name of the folder will be added to the theme drop-down list. Please ensure that the theme folder name is unique and descriptive.
Watcher uses a simple CSS theme file that is based on a modified bootstrap CSS. Theme files are easily generated using a simple LESS variables document which is then compiled into the bootstrap-based core of the Watcher stylesheets.
Creating a Watcher theme is easy. Watcher uses Bootstrap 4, which is in turn built using SASS. Compiling Bootstrap will result in a bootstrap.css file which can be used as-is, though it may be somewhat boring.
I've included variable sheets along with Watcher's default themes. These sheets contain a handful of variables that make theme creation a little easier to jump into. Make a copy of a theme's scss and copy it to the Bootstrap scss folder you downloaded earlier. Edit bootstrap.scss and add the line @import "YOURTHEMENAME"; at the top.
Modify any styles you see fit and compile the SCSS into CSS. Copy the resulting file to your themes directory and you will be able to select it in Watcher.
Don't forget to submit your theme via Pull Request or post on Reddit to share with everyone!
The applied theme's CSS file contains 99% of Watcher's layout and style. Each page has its own separate CSS for neccesary exceptions to standard styles and integration of non-bootstrap-based elements. The page-specific stylesheets should not be modified and all styles for a custom theme can be appended to the bottom of the theme's individual file.
Watcher is designed this way so that the main theme file can load from the browser's cache while only several kb of specific styles are loaded separately for each page.
Generally speaking, updates to the application will not overwrite user-created custom CSS themes (e.g. themes with folder names that are not included in the Watcher repository). However, there is a chance that a new theme will be added that has the same name as your custom theme and will overwrite existing files.
Feature development is ongoing, and it is likely that new CSS classes or pages will be added. When the theme_base is updated the Watcher developers will, at their discretion, recompile custom themes or leave them for the creator to modify as needed.
Development reserves the right to unintentionally break any custom theme through changes to the theme base or markup. Theme maintenance is the sole responsibility of its creator.
Themes currently integrated in the Watcher repository will be supported on an on-going, semi-voluntary basis. User-created themes not included in the Watcher repo cannot be explicitly supported by the development team. Use at your own risk.
Themes may be submitted to the development team by initiating a Pull request or posting on www.reddit.com/r/watcher. Pull requests MUST include the theme files and nothing else. Theme files will be reviewed for quality and uniformity before acceptance. This process will take an arbitrary amount of time due to other more pressing issues that may be present.