OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-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:
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
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
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)
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`
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
overridden. If every single colour is being changed (as per `_dark.scss`)
then you might as well keep them all.
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
@ -23,3 +23,58 @@ To define a theme for Riot:
In future, the assets for a theme will probably be gathered together into a
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"
}
}
]
}
```