From 013e059ffc22c8ec3aa4b16d6c4834f6686a5d16 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 20 Nov 2019 15:40:44 +0000 Subject: [PATCH 1/4] Add doc for custom themes Mostly just c+ped from Bruno's PR: https://github.com/matrix-org/matrix-react-sdk/pull/3503 --- docs/theming.md | 50 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/docs/theming.md b/docs/theming.md index c6373e52..f5e7148f 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -23,3 +23,53 @@ 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, + +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" + } + } + ] + } +``` From dc3cc37784a85d55e4b4f2a2dfb55f0ae0754a0f Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 20 Nov 2019 16:35:10 +0000 Subject: [PATCH 2/4] backticks to prevent infinitalic --- docs/theming.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/theming.md b/docs/theming.md index f5e7148f..71e963b8 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -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 From 21781adb9ee73fa01fb0acc3838e3ee3d6b00b03 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 20 Nov 2019 18:27:25 +0100 Subject: [PATCH 3/4] explain the internal name of custom themes --- docs/theming.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/theming.md b/docs/theming.md index 71e963b8..422d6032 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -26,7 +26,10 @@ single directory tree. Custom Themes ============= -Themes derived from the built in themes may also be defined in settings, + +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: From 9ed4a07b28fe82c2c7f225864340a33e6c7765b6 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 20 Nov 2019 17:39:58 +0000 Subject: [PATCH 4/4] linewrap --- docs/theming.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/theming.md b/docs/theming.md index 422d6032..19967067 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -29,7 +29,9 @@ 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"`. +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: