OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #11444 from vector-im/dbkr/doc_custom_themes 

Add doc for custom themes
pull/11448/head
David Baker 2019-11-20 17:43:42 +00:00 committed by GitHub
parent 1b0b3e1a44 9ed4a07b28
commit 392de5a54f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 60 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
docs/theming.md
View File

@ -11,11 +11,11 @@ As of Jan 2017, skins are not fully supported; riot is the only available skin.
To define a theme for Riot: To define a theme for Riot:
1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`. 1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`.
2. Fork `src/skins/vector/css/themes/dark.scss` to be teal.scss 2. Fork `src/skins/vector/css/themes/dark.scss` to be `teal.scss`
3. Fork `src/skins/vector/css/themes/_base.scss` to be _teal.scss 3. Fork `src/skins/vector/css/themes/_base.scss` to be `_teal.scss`
4. Override variables in _teal.scss as desired. You may wish to delete ones 4. Override variables in `_teal.scss` as desired. You may wish to delete ones
which don't differ from _base.scss, to make it clear which are being which don't differ from `_base.scss`, to make it clear which are being
overridden. If every single colour is being changed (as per _dark.scss) overridden. If every single colour is being changed (as per `_dark.scss`)
then you might as well keep them all. then you might as well keep them all.
5. Add the theme to the list of entrypoints in webpack.config.js 5. Add the theme to the list of entrypoints in webpack.config.js
6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js 6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js
@ -23,3 +23,58 @@ To define a theme for Riot:
In future, the assets for a theme will probably be gathered together into a In future, the assets for a theme will probably be gathered together into a
single directory tree. single directory tree.
Custom Themes
=============
Themes derived from the built in themes may also be defined in settings.
To avoid name collisions, the internal name of a theme is
`custom-${theme.name}`. So if you want to set the custom theme below as the
default theme, you would use `default_theme: "custom-Electric Blue"`.
eg. in config.json:
```
"settingDefaults": {
"custom_themes": [
{
"name": "Electric Blue",
"is_dark": false,
"colors": {
"accent-color": "#3596fc",
"primary-color": "#368bd6",
"warning-color": "#ff4b55",
"sidebar-color": "#27303a",
"roomlist-background-color": "#f3f8fd",
"roomlist-text-color": "#2e2f32",
"roomlist-text-secondary-color": "#61708b",
"roomlist-highlights-color": "#ffffff",
"roomlist-separator-color": "#e3e8f0",
"timeline-background-color": "#ffffff",
"timeline-text-color": "#2e2f32",
"timeline-text-secondary-color": "#61708b",
"timeline-highlights-color": "#f3f8fd"
}
}, {
"name": "Deep Purple",
"is_dark": true,
"colors": {
"accent-color": "#6503b3",
"primary-color": "#368bd6",
"warning-color": "#b30356",
"sidebar-color": "#15171B",
"roomlist-background-color": "#22262E",
"roomlist-text-color": "#A1B2D1",
"roomlist-text-secondary-color": "#EDF3FF",
"roomlist-highlights-color": "#343A46",
"roomlist-separator-color": "#a1b2d1",
"timeline-background-color": "#181b21",
"timeline-text-color": "#EDF3FF",
"timeline-text-secondary-color": "#A1B2D1",
"timeline-highlights-color": "#22262E"
}
}
]
}
```