PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
Add doc for custom themes
This commit is contained in:
David Baker 2019-11-20 17:43:42 +00:00 committed by GitHub
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"
}
}
]
}
```