mirror of https://github.com/lissy93/dashy
📝 Adds docs for the UI theme configurator
This commit is contained in:
Alicia Sykes
parent
fa8062739c
commit
b23b7e1d0a
11
README.md
11
README.md
|
|
@ -96,6 +96,7 @@ Dashy supports 1-Click deployments on several popular cloud platforms. To spin u
|
|||
- [<img src="https://i.ibb.co/d2P1WZ7/heroku.png" width="18"/> Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/Lissy93/dashy)
|
||||
- [<img src="https://i.ibb.co/Ld2FZzb/vercel.png" width="18"/> Deploy to Vercel](https://vercel.com/new/project?template=https://github.com/lissy93/dashy)
|
||||
- [<img src="https://i.ibb.co/xCHtzgh/render.png" width="18"/> Deploy to Render](https://render.com/deploy?repo=https://github.com/lissy93/dashy/tree/deploy_render)
|
||||
- [<img src="https://i.ibb.co/J7MGymY/googlecloud.png" width="18"/> Deploy to GCP](https://deploy.cloud.run/?git_repo=https://github.com/lissy93/dashy.git)
|
||||
- [<img src="https://i.ibb.co/HVWVYF7/docker.png" width="18"/> Deploy to PWD](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml)
|
||||
|
||||
#### Basic Commands
|
||||
|
|
@ -149,9 +150,15 @@ You may find these [example config](https://gist.github.com/Lissy93/000f712a5ce9
|
|||
</a>
|
||||
</p>
|
||||
|
||||
The app comes with a number of built-in themes, but it's also easy to write you're own. All colors, and most other CSS properties make use of CSS variables, which makes customizing the look and feel of Dashy very easy.
|
||||
Dashy comes with a number of built-in themes, but it's also easy to make you're own. All colors, and most other CSS properties are specified using CSS variables, which are [documented here](./docs/theming.md#css-variables). This make modifying styles and customizing the look and feel of Dashy very easy.
|
||||
|
||||
You can also apply custom CSS overrides directly through the UI (Under Config menu --> Custom CSS), or specify it in your config file under `appConfig.customCss`. If you have a lot of custom styles, you can pass in the path to a stylesheet, in `appConfig.externalStyleSheet`.
|
||||
You can select a theme, and customize it's colors directly through the UI. But it's also possible tp pass in external stylesheets and styles either in the config file (under `appConfig.externalStyleSheet`), or by mounting it to `/app/src/styles/user-defined-themes.scss` with Docker.
|
||||
|
||||
<p align="center">
|
||||
<a href="https://i.ibb.co/cLDXj1R/dashy-theme-configurator.gif">
|
||||
<img alt="Example Themes" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/theme-config-demo.gif" width="400" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
**[⬆️ Back to Top](#dashy)**
|
||||
|
||||
|
|
|
|||
|
|
@ -33,6 +33,32 @@ Finally, from the UI use the theme dropdown menu to select your new theme, and y
|
|||
|
||||
You can also set `appConfig.theme` to pre-select a default theme, which will be applied immediately after deployment.
|
||||
|
||||
### Modifying Theme Colors
|
||||
|
||||
Themes can be modified either through the UI, using the color picker menu (to the right of the theme dropdown), or directly in the config file, under `appConfig.customColors`. Here you can specify the value for any of the [available CSS variables](#css-variables).
|
||||
|
||||
<p align="center">
|
||||
<a href="https://i.ibb.co/cLDXj1R/dashy-theme-configurator.gif">
|
||||
<img alt="Example Themes" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/theme-config-demo.gif" width="400" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
By default, any color modifications made to the current theme through the UI will only be applied locally. If you need these settings to be set globally, then click the 'Export' button, to get the color codes and variable names, which can then be backed up, or saved in your config file.
|
||||
|
||||
Custom colors are saved relative the the base theme selected. So if you switch themes after setting custom colors, then you're settings will no longer be applied. You're changes are not lost though, and switching back to the original theme will see your styles reapplied.
|
||||
|
||||
If these values are specified in your `conf.yml` file, then it will look something like the below example. Note that in YAML, values or keys which contain special characters, must be wrapped in quotes.
|
||||
|
||||
```yaml
|
||||
appConfig:
|
||||
customColors:
|
||||
oblivion:
|
||||
primary: '#75efff'
|
||||
background: '#2a3647'
|
||||
dracula:
|
||||
primary: '#8be9fd'
|
||||
```
|
||||
|
||||
### Adding your own Theme
|
||||
|
||||
User-defined styles and custom themes should be defined in `./src/styles/user-defined-themes.scss`. If you're using Docker, you can pass your own stylesheet in using the `--volume` flag. E.g. `v ./my-themes.scss:/app/src/styles/user-defined-themes.scss`. Don't forget to pass your theme name into `appConfig.cssThemes` so that it shows up on the theme-switcher dropdown.
|
||||
|
|
@ -83,7 +109,7 @@ CSS variables are simple to use. You define them like: `--background: #fff;` and
|
|||
You can determine the variable used by any given element, and visualize changes using the browser developer tools (Usually opened with `F12`, or Options --> More --> Developer Tools). Under the elements tab, click the Element Selector icon (usually top-left corner), you will then be able to select any DOM element on the page by hovering and clicking it. In the CSS panel you will see all styles assigned to that given element, including CSS variables. Click a variable to see it's parent value, and for color attributes, click the color square to modify the color. For more information, see this [getting started guide](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools), and these articles on [selecting elements](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element) and [inspecting and modifying colors](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors).
|
||||
|
||||
#### Top-Level Variables
|
||||
These are all that are required to create a theme. All other variables inherit their values from these variables.
|
||||
These are all that are required to create a theme. All other variables inherit their values from these variables, and can optionally be overridden.
|
||||
|
||||
- `--primary` - Application primary color. Used for title, text, accents, and other features
|
||||
- `--background` - Application background color
|
||||
|
|
|
|||
Loading…
Reference in New Issue