From cad3858a3f0f456ffd578b19fb0404dd156f5e6b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 26 Sep 2019 12:07:45 +0200 Subject: [PATCH 01/18] initial custom theme using a reduced set of CSS variables to change the colors at runtime --- res/themes/light-custom/css/_custom.scss | 85 +++++++++++++++++++ res/themes/light-custom/css/light-custom.scss | 5 ++ 2 files changed, 90 insertions(+) create mode 100644 res/themes/light-custom/css/_custom.scss create mode 100644 res/themes/light-custom/css/light-custom.scss diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss new file mode 100644 index 0000000000..8f4c5ebb1c --- /dev/null +++ b/res/themes/light-custom/css/_custom.scss @@ -0,0 +1,85 @@ +// accent color +$accent-color: var(--accent-color); +$button-bg-color: var(--accent-color); +$button-link-fg-color: var(--accent-color); +$button-primary-bg-color: var(--accent-color); +$input-valid-border-color: var(--accent-color); +$reaction-row-button-selected-border-color: var(--accent-color); +$roomsublist-chevron-color: var(--accent-color); +$tab-label-active-bg-color: var(--accent-color); +$togglesw-on-color: var(--accent-color); +$username-variant3-color: var(--accent-color); +$accent-color-50pct: var(--accent-color)"7F"; // uses #rrggbbaa notation, alpha at .5 +// background color +$authpage-body-bg-color: var(--background-color); +$avatar-bg-color: var(--background-color); +$button-secondary-bg-color: var(--background-color); +$field-focused-label-bg-color: var(--background-color); +$lightbox-border-color: var(--background-color); +$menu-bg-color: var(--background-color); +$message-action-bar-bg-color: var(--background-color); +$primary-bg-color: var(--background-color); +$roomtile-focused-bg-color: var(--background-color); +$roomtile-selected-bg-color: var(--background-color); +$tab-label-active-icon-bg-color: var(--background-color); +$togglesw-ball-color: var(--background-color); +$droptarget-bg-color: var(--background-color)"7F"; // uses #rrggbbaa notation, alpha at .5 +$authpage-modal-bg-color: var(--background-color)"CF"; // uses #rrggbbaa notation, alpha at .59 +// base color +$interactive-tooltip-bg-color: var(--base-color); +$tagpanel-bg-color: var(--base-color); +$tooltip-timeline-bg-color: var(--base-color); +// panel color +$event-selected-color: var(--panel-color); +$header-panel-bg-color: var(--panel-color); +$reaction-row-button-bg-color: var(--panel-color); +$panel-gradient: var(--panel-color)"00", var(--panel-color)"FF"; +// these were #f2f5f8 instead of #f3f8fd, but close enough +$dark-panel-bg-color: var(--panel-color); +$input-lighter-bg-color: var(--panel-color); +$plinth-bg-color: var(--panel-color); +$roomsublist-background: var(--panel-color); +$secondary-accent-color: var(--panel-color); +$selected-color: var(--panel-color); +$widget-menu-bar-bg-color: var(--panel-color); +// panel contrast color +$input-darker-bg-color: var(--panel-contrast-color); +$panel-divider-color: var(--panel-contrast-color);// originally #dee1f3, not #e3e8f0, but close enough +// body text color +$message-action-bar-fg-color: var(--body-text-color); +$primary-fg-color: var(--body-text-color); +$settings-profile-overlay-placeholder-fg-color: var(--body-text-color); +$dialog-backdrop-color: var(--body-text-color)"82"; // uses #rrggbbaa notation, alpha at .38 +// body contrast color +$authpage-secondary-color: var(--body-contrast-color); +$memberstatus-placeholder-color: var(--body-contrast-color); +$notice-secondary-color: var(--body-contrast-color); +$pinned-color: var(--body-contrast-color); +$roomsublist-label-fg-color: var(--body-contrast-color); +$roomtile-name-color: var(--body-contrast-color); +$settings-subsection-fg-color: var(--body-contrast-color); +// primary color +$accent-color-alt: var(--primary-color); +$input-focused-border-color: var(--primary-color); +// warning color +$button-danger-bg-color: var(--warning-color); +$event-highlight-fg-color: var(--warning-color); +$input-invalid-border-color: var(--warning-color); +$mention-user-pill-bg-color: var(--warning-color); +$notice-primary-color: var(--warning-color); +$pinned-unread-color: var(--warning-color); +$warning-color: var(--warning-color); +$button-danger-disabled-bg-color: var(--warning-color)"7C"; + +// defaults +body { + --accent-color: #03b381; + --background-color: #ffffff; + --base-color: #27303a; + --panel-color: #f3f8fd; + --panel-contrast-color: #e3e8f0; + --body-text-color: #2e2f32; + --body-contrast-color: #61708b; + --primary-color: #368bd6; + --warning-color: #ff4b55; +} diff --git a/res/themes/light-custom/css/light-custom.scss b/res/themes/light-custom/css/light-custom.scss new file mode 100644 index 0000000000..278ca5f0b1 --- /dev/null +++ b/res/themes/light-custom/css/light-custom.scss @@ -0,0 +1,5 @@ +@import "../../light/css/_paths.scss"; +@import "../../light/css/_fonts.scss"; +@import "../../light/css/_light.scss"; +@import "_custom.scss"; +@import "../../../../res/css/_components.scss"; From a4b905ef38e8eeca40cc47117ee0a4bf3f8a5c12 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 26 Sep 2019 12:08:42 +0200 Subject: [PATCH 02/18] debug: add custom theme to theme list --- src/i18n/strings/en_EN.json | 1 + src/themes.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 49302fece1..5a05373dff 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -263,6 +263,7 @@ "%(widgetName)s widget removed by %(senderName)s": "%(widgetName)s widget removed by %(senderName)s", "Light theme": "Light theme", "Dark theme": "Dark theme", + "Custom theme (light)": "Custom theme (light)", "%(displayName)s is typing …": "%(displayName)s is typing …", "%(names)s and %(count)s others are typing …|other": "%(names)s and %(count)s others are typing …", "%(names)s and %(count)s others are typing …|one": "%(names)s and one other is typing …", diff --git a/src/themes.js b/src/themes.js index 1896333844..2529a04d89 100644 --- a/src/themes.js +++ b/src/themes.js @@ -21,4 +21,5 @@ export const DEFAULT_THEME = "light"; export const THEMES = { "light": _td("Light theme"), "dark": _td("Dark theme"), + "light-custom": _td("Custom theme (light)"), }; From f9d5d807e328052cecd9bdebe9995141e0e53499 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 26 Sep 2019 16:11:55 +0200 Subject: [PATCH 03/18] make active tab icon color always same as text --- res/themes/light-custom/css/_custom.scss | 1 - res/themes/light/css/_light.scss | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 8f4c5ebb1c..02ce63ce1d 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -21,7 +21,6 @@ $message-action-bar-bg-color: var(--background-color); $primary-bg-color: var(--background-color); $roomtile-focused-bg-color: var(--background-color); $roomtile-selected-bg-color: var(--background-color); -$tab-label-active-icon-bg-color: var(--background-color); $togglesw-ball-color: var(--background-color); $droptarget-bg-color: var(--background-color)"7F"; // uses #rrggbbaa notation, alpha at .5 $authpage-modal-bg-color: var(--background-color)"CF"; // uses #rrggbbaa notation, alpha at .59 diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index db26c99155..224e6a95d8 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -234,7 +234,7 @@ $tab-label-active-fg-color: #ffffff; $tab-label-bg-color: transparent; $tab-label-active-bg-color: $accent-color; $tab-label-icon-bg-color: #454545; -$tab-label-active-icon-bg-color: #ffffff; +$tab-label-active-icon-bg-color: $tab-label-active-fg-color; // Buttons $button-primary-fg-color: #ffffff; From b9d0de1b7d7d7b88193d0aeaf50c3bf91758fab3 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 26 Sep 2019 16:14:39 +0200 Subject: [PATCH 04/18] create 0% and 50% opaque vars as #rgba trick doesn't work --- res/themes/light-custom/css/_custom.scss | 24 ++++--------- res/themes/light-custom/css/light-custom.scss | 34 +++++++++++++++++++ 2 files changed, 40 insertions(+), 18 deletions(-) diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 02ce63ce1d..38cc33b3c9 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -9,8 +9,8 @@ $roomsublist-chevron-color: var(--accent-color); $tab-label-active-bg-color: var(--accent-color); $togglesw-on-color: var(--accent-color); $username-variant3-color: var(--accent-color); -$accent-color-50pct: var(--accent-color)"7F"; // uses #rrggbbaa notation, alpha at .5 // background color +$accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5 $authpage-body-bg-color: var(--background-color); $avatar-bg-color: var(--background-color); $button-secondary-bg-color: var(--background-color); @@ -22,9 +22,9 @@ $primary-bg-color: var(--background-color); $roomtile-focused-bg-color: var(--background-color); $roomtile-selected-bg-color: var(--background-color); $togglesw-ball-color: var(--background-color); -$droptarget-bg-color: var(--background-color)"7F"; // uses #rrggbbaa notation, alpha at .5 -$authpage-modal-bg-color: var(--background-color)"CF"; // uses #rrggbbaa notation, alpha at .59 // base color +$droptarget-bg-color: var(--background-color-50pct); //still needs alpha at .5 +$authpage-modal-bg-color: var(--background-color-50pct); //still needs alpha at .59 $interactive-tooltip-bg-color: var(--base-color); $tagpanel-bg-color: var(--base-color); $tooltip-timeline-bg-color: var(--base-color); @@ -32,7 +32,7 @@ $tooltip-timeline-bg-color: var(--base-color); $event-selected-color: var(--panel-color); $header-panel-bg-color: var(--panel-color); $reaction-row-button-bg-color: var(--panel-color); -$panel-gradient: var(--panel-color)"00", var(--panel-color)"FF"; +$panel-gradient: var(--panel-color-0pct), var(--panel-color); // these were #f2f5f8 instead of #f3f8fd, but close enough $dark-panel-bg-color: var(--panel-color); $input-lighter-bg-color: var(--panel-color); @@ -48,8 +48,8 @@ $panel-divider-color: var(--panel-contrast-color);// originally #dee1f3, not #e3 $message-action-bar-fg-color: var(--body-text-color); $primary-fg-color: var(--body-text-color); $settings-profile-overlay-placeholder-fg-color: var(--body-text-color); -$dialog-backdrop-color: var(--body-text-color)"82"; // uses #rrggbbaa notation, alpha at .38 // body contrast color +$dialog-backdrop-color: var(--body-text-color-50pct); //still needs alpha at .38 $authpage-secondary-color: var(--body-contrast-color); $memberstatus-placeholder-color: var(--body-contrast-color); $notice-secondary-color: var(--body-contrast-color); @@ -68,17 +68,5 @@ $mention-user-pill-bg-color: var(--warning-color); $notice-primary-color: var(--warning-color); $pinned-unread-color: var(--warning-color); $warning-color: var(--warning-color); -$button-danger-disabled-bg-color: var(--warning-color)"7C"; -// defaults -body { - --accent-color: #03b381; - --background-color: #ffffff; - --base-color: #27303a; - --panel-color: #f3f8fd; - --panel-contrast-color: #e3e8f0; - --body-text-color: #2e2f32; - --body-contrast-color: #61708b; - --primary-color: #368bd6; - --warning-color: #ff4b55; -} +$button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5 diff --git a/res/themes/light-custom/css/light-custom.scss b/res/themes/light-custom/css/light-custom.scss index 278ca5f0b1..a75db83305 100644 --- a/res/themes/light-custom/css/light-custom.scss +++ b/res/themes/light-custom/css/light-custom.scss @@ -3,3 +3,37 @@ @import "../../light/css/_light.scss"; @import "_custom.scss"; @import "../../../../res/css/_components.scss"; + +// defaults +body { + // fully opaque + --accent-color: #03b381; + --background-color: #ffffff; + --base-color: #27303a; + --panel-color: #f3f8fd; + --panel-contrast-color: #e3e8f0; + --body-text-color: #2e2f32; + --body-contrast-color: #61708b; + --primary-color: #368bd6; + --warning-color: #ff4b55; + // 0% opaque + --accent-color-0pct: #03b38100; + --background-color-0pct: #ffffff00; + --base-color-0pct: #27303a00; + --panel-color-0pct: #f3f8fd00; + --panel-contrast-color-0pct: #e3e8f000; + --body-text-color-0pct: #2e2f3200; + --body-contrast-color-0pct: #61708b00; + --primary-color-0pct: #368bd600; + --warning-color-0pct: #ff4b5500; + // 50% opaque + --accent-color-50pct: #03b3817f; + --background-color-50pct: #ffffff7f; + --base-color-50pct: #27303a7f; + --panel-color-50pct: #f3f8fd7f; + --panel-contrast-color-50pct: #e3e8f07f; + --body-text-color-50pct: #2e2f327f; + --body-contrast-color-50pct: #61708b7f; + --primary-color-50pct: #368bd67f; + --warning-color-50pct: #ff4b557f; +} From 64b44acf2bd1bc429265854220a9f82f0d2a5db2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 26 Sep 2019 16:15:45 +0200 Subject: [PATCH 05/18] better comment headers --- res/themes/light-custom/css/_custom.scss | 27 ++++++++++++++++-------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 38cc33b3c9..48ffcc13ce 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -1,4 +1,5 @@ -// accent color +// +// PALETTE COLOR: accent color $accent-color: var(--accent-color); $button-bg-color: var(--accent-color); $button-link-fg-color: var(--accent-color); @@ -9,8 +10,9 @@ $roomsublist-chevron-color: var(--accent-color); $tab-label-active-bg-color: var(--accent-color); $togglesw-on-color: var(--accent-color); $username-variant3-color: var(--accent-color); -// background color $accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5 +// +// PALETTE COLOR: background color $authpage-body-bg-color: var(--background-color); $avatar-bg-color: var(--background-color); $button-secondary-bg-color: var(--background-color); @@ -22,13 +24,15 @@ $primary-bg-color: var(--background-color); $roomtile-focused-bg-color: var(--background-color); $roomtile-selected-bg-color: var(--background-color); $togglesw-ball-color: var(--background-color); -// base color $droptarget-bg-color: var(--background-color-50pct); //still needs alpha at .5 $authpage-modal-bg-color: var(--background-color-50pct); //still needs alpha at .59 +// +// PALETTE COLOR: base color $interactive-tooltip-bg-color: var(--base-color); $tagpanel-bg-color: var(--base-color); $tooltip-timeline-bg-color: var(--base-color); -// panel color +// +// PALETTE COLOR: panel color $event-selected-color: var(--panel-color); $header-panel-bg-color: var(--panel-color); $reaction-row-button-bg-color: var(--panel-color); @@ -41,15 +45,18 @@ $roomsublist-background: var(--panel-color); $secondary-accent-color: var(--panel-color); $selected-color: var(--panel-color); $widget-menu-bar-bg-color: var(--panel-color); -// panel contrast color +// +// PALETTE COLOR: panel contrast color $input-darker-bg-color: var(--panel-contrast-color); $panel-divider-color: var(--panel-contrast-color);// originally #dee1f3, not #e3e8f0, but close enough -// body text color +// +// PALETTE COLOR: body text color $message-action-bar-fg-color: var(--body-text-color); $primary-fg-color: var(--body-text-color); $settings-profile-overlay-placeholder-fg-color: var(--body-text-color); -// body contrast color $dialog-backdrop-color: var(--body-text-color-50pct); //still needs alpha at .38 +// +// PALETTE COLOR: body contrast color $authpage-secondary-color: var(--body-contrast-color); $memberstatus-placeholder-color: var(--body-contrast-color); $notice-secondary-color: var(--body-contrast-color); @@ -57,10 +64,12 @@ $pinned-color: var(--body-contrast-color); $roomsublist-label-fg-color: var(--body-contrast-color); $roomtile-name-color: var(--body-contrast-color); $settings-subsection-fg-color: var(--body-contrast-color); -// primary color +// +// PALETTE COLOR: primary color $accent-color-alt: var(--primary-color); $input-focused-border-color: var(--primary-color); -// warning color +// +// PALETTE COLOR: warning color $button-danger-bg-color: var(--warning-color); $event-highlight-fg-color: var(--warning-color); $input-invalid-border-color: var(--warning-color); From 01909f81c41ead9bdc3462bd443c60e4b07d6b1b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 26 Sep 2019 16:16:05 +0200 Subject: [PATCH 06/18] also theme values close to custom palette variables these values are not exactly the same as the palette values, so we're essentially flattening the color palette used in the theme, but this is needed when assigning custom colors for it to look good. --- res/themes/light-custom/css/_custom.scss | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 48ffcc13ce..1531afc7bb 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -49,12 +49,26 @@ $widget-menu-bar-bg-color: var(--panel-color); // PALETTE COLOR: panel contrast color $input-darker-bg-color: var(--panel-contrast-color); $panel-divider-color: var(--panel-contrast-color);// originally #dee1f3, not #e3e8f0, but close enough +$primary-hairline-color: var(--panel-contrast-color);// originally #e5e5e5, not #e3e8f0, but close enough // // PALETTE COLOR: body text color $message-action-bar-fg-color: var(--body-text-color); $primary-fg-color: var(--body-text-color); $settings-profile-overlay-placeholder-fg-color: var(--body-text-color); $dialog-backdrop-color: var(--body-text-color-50pct); //still needs alpha at .38 +$roomtopic-color: var(--body-text-color-50pct); //still needs alpha at .5 +$tab-label-fg-color: var(--body-text-color); +$tab-label-icon-bg-color: var(--body-text-color); //was #454545 +// was #212121 +$roomtile-notified-color: var(--body-text-color); +$roomtile-selected-color: var(--body-text-color); +$topleftmenu-color: var(--body-text-color); +// was #45474a +$dialog-title-fg-color: var(--body-text-color); +$roomheader-color: var(--body-text-color); +$tab-label-fg-color: var(--body-text-color); +// was #4e5054 +$authpage-lang-color: var(--body-text-color); // // PALETTE COLOR: body contrast color $authpage-secondary-color: var(--body-contrast-color); @@ -64,6 +78,15 @@ $pinned-color: var(--body-contrast-color); $roomsublist-label-fg-color: var(--body-contrast-color); $roomtile-name-color: var(--body-contrast-color); $settings-subsection-fg-color: var(--body-contrast-color); +$roomheader-addroom-bg-color: var(--body-contrast-color); +// was #747474 +$light-fg-color: var(--body-contrast-color); +// was #777777 +$blockquote-fg-color: var(--body-contrast-color); +// was #888888 +$greyed-fg-color: var(--body-contrast-color); +$info-plinth-fg-color: var(--body-contrast-color); +$preview-widget-fg-color: var(--body-contrast-color); // // PALETTE COLOR: primary color $accent-color-alt: var(--primary-color); @@ -77,5 +100,4 @@ $mention-user-pill-bg-color: var(--warning-color); $notice-primary-color: var(--warning-color); $pinned-unread-color: var(--warning-color); $warning-color: var(--warning-color); - $button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5 From cca41c184c348ee9fdfe6d925eeb31f22c99ae5a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 26 Sep 2019 17:35:06 +0200 Subject: [PATCH 07/18] very basic color pickers for custom theme --- package.json | 1 + .../tabs/user/_GeneralUserSettingsTab.scss | 6 +++ .../tabs/user/GeneralUserSettingsTab.js | 51 +++++++++++++++++++ src/i18n/strings/en_EN.json | 10 ++++ yarn.lock | 12 +++++ 5 files changed, 80 insertions(+) diff --git a/package.json b/package.json index 958b782ac3..e4f0543463 100644 --- a/package.json +++ b/package.json @@ -106,6 +106,7 @@ "slate-react": "^0.18.10", "text-encoding-utf-8": "^1.0.1", "url": "^0.11.0", + "vanilla-picker": "^2.10.0", "velocity-animate": "^1.5.2", "whatwg-fetch": "^1.1.1", "zxcvbn": "^4.4.2" diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss index 62d230e752..ba62288725 100644 --- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss @@ -34,3 +34,9 @@ limitations under the License. .mx_GeneralUserSettingsTab_warningIcon { vertical-align: middle; } + +.mx_GeneralUserSettingsTab_themeSection .mx_GeneralUserSettingsTab_customColors { + button { + display: block; + } +} diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js index b9c566b22a..5ac4e84e54 100644 --- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js @@ -39,6 +39,8 @@ import IdentityAuthClient from "../../../../../IdentityAuthClient"; import {abbreviateUrl} from "../../../../../utils/UrlUtils"; import { getThreepidsWithBindStatus } from '../../../../../boundThreepids'; +import Picker from 'vanilla-picker'; + export default class GeneralUserSettingsTab extends React.Component { static propTypes = { closeSettingsFn: PropTypes.func.isRequired, @@ -270,6 +272,21 @@ export default class GeneralUserSettingsTab extends React.Component { _renderThemeSection() { const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag"); + let customSection; + if (this.state.theme === "light-custom") { + customSection = (
+ {_t("Custom theme colors")} + + + + + + + + + +
); + } return (
{_t("Theme")} @@ -280,6 +297,7 @@ export default class GeneralUserSettingsTab extends React.Component { })} + { customSection }
); } @@ -379,3 +397,36 @@ export default class GeneralUserSettingsTab extends React.Component { ); } } + +class CustomThemeColorField extends React.Component { + componentDidMount() { + setTimeout(() => { + this.value = window.getComputedStyle(document.body).getPropertyValue(`--${this.props.name}`); + this._buttonRef.style.background = this.value; + }, 3000); + } + + _onClick = (event) => { + const button = event.target; + if (button.tagName !== "BUTTON") { + console.log("target is", button); + return; + } + console.log("clicked color " + this.props.name); + const picker = new Picker({parent: button, alpha: false, color: this.value}); + picker.onChange = color => this._onColorChanged(color); + } + + _onColorChanged(color) { + const hex = color.hex.substr(0, 7); + document.body.style.setProperty(`--${this.props.name}`, hex); + document.body.style.setProperty(`--${this.props.name}-0pct`, hex + "00"); + document.body.style.setProperty(`--${this.props.name}-50pct`, hex + "7F"); + this._buttonRef.style.background = hex; + this.value = hex; + } + + render() { + return (); + } +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 5a05373dff..dc15276dc9 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -599,6 +599,16 @@ "Account": "Account", "Set a new account password...": "Set a new account password...", "Language and region": "Language and region", + "Custom theme colors": "Custom theme colors", + "Accent color": "Accent color", + "Background color": "Background color", + "Base color": "Base color", + "Panel color": "Panel color", + "Panel Contrast color": "Panel Contrast color", + "Body Text color": "Body Text color", + "Body contrast color": "Body contrast color", + "Primary color": "Primary color", + "Warning color": "Warning color", "Theme": "Theme", "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.": "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.", "Account management": "Account management", diff --git a/yarn.lock b/yarn.lock index ac1adf1d20..78b32ad03b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -211,6 +211,11 @@ resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5" integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ== +"@sphinxxxx/color-conversion@^2.2.2": + version "2.2.2" + resolved "https://registry.yarnpkg.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz#03ecc29279e3c0c832f6185a5bfa3497858ac8ca" + integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw== + "@types/events@*": version "3.0.0" resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" @@ -8098,6 +8103,13 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" +vanilla-picker@^2.10.0: + version "2.10.0" + resolved "https://registry.yarnpkg.com/vanilla-picker/-/vanilla-picker-2.10.0.tgz#36676631b9346daa6b93aa4f80c541f113e38c50" + integrity sha512-s1K+oa/JrT5blJFbLLw1O+PMncJM1qCF8DVXKNPaTVxXgTteSCjSr4rvf8TpcqEcQQ+S4RV/nvPBZanrlJE82w== + dependencies: + "@sphinxxxx/color-conversion" "^2.2.2" + velocity-animate@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/velocity-animate/-/velocity-animate-1.5.2.tgz#5a351d75fca2a92756f5c3867548b873f6c32105" From 8dc94af1bab72ecad7b2ef77fa35fce751c49475 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 30 Sep 2019 16:54:32 +0200 Subject: [PATCH 08/18] use native color picker instead of library --- package.json | 1 - .../tabs/user/GeneralUserSettingsTab.js | 38 +++++++++---------- yarn.lock | 12 ------ 3 files changed, 18 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index e4f0543463..958b782ac3 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,6 @@ "slate-react": "^0.18.10", "text-encoding-utf-8": "^1.0.1", "url": "^0.11.0", - "vanilla-picker": "^2.10.0", "velocity-animate": "^1.5.2", "whatwg-fetch": "^1.1.1", "zxcvbn": "^4.4.2" diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js index 5ac4e84e54..6d54df0b31 100644 --- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js @@ -39,8 +39,6 @@ import IdentityAuthClient from "../../../../../IdentityAuthClient"; import {abbreviateUrl} from "../../../../../utils/UrlUtils"; import { getThreepidsWithBindStatus } from '../../../../../boundThreepids'; -import Picker from 'vanilla-picker'; - export default class GeneralUserSettingsTab extends React.Component { static propTypes = { closeSettingsFn: PropTypes.func.isRequired, @@ -399,34 +397,34 @@ export default class GeneralUserSettingsTab extends React.Component { } class CustomThemeColorField extends React.Component { + constructor(props) { + super(props); + this.state = {color: ""}; + } + componentDidMount() { setTimeout(() => { - this.value = window.getComputedStyle(document.body).getPropertyValue(`--${this.props.name}`); - this._buttonRef.style.background = this.value; + const value = window.getComputedStyle(document.body).getPropertyValue(`--${this.props.name}`).trim(); + this.setState({color: value}); }, 3000); } - _onClick = (event) => { - const button = event.target; - if (button.tagName !== "BUTTON") { - console.log("target is", button); - return; - } - console.log("clicked color " + this.props.name); - const picker = new Picker({parent: button, alpha: false, color: this.value}); - picker.onChange = color => this._onColorChanged(color); - } - - _onColorChanged(color) { - const hex = color.hex.substr(0, 7); + _onColorChanged = (event) => { + const hex = event.target.value; document.body.style.setProperty(`--${this.props.name}`, hex); document.body.style.setProperty(`--${this.props.name}-0pct`, hex + "00"); document.body.style.setProperty(`--${this.props.name}-50pct`, hex + "7F"); - this._buttonRef.style.background = hex; - this.value = hex; + this.setState({color: hex}); } render() { - return (); + const id = `color-picker-${this.props.name}`; + return (
+ + +
); } } diff --git a/yarn.lock b/yarn.lock index 78b32ad03b..ac1adf1d20 100644 --- a/yarn.lock +++ b/yarn.lock @@ -211,11 +211,6 @@ resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5" integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ== -"@sphinxxxx/color-conversion@^2.2.2": - version "2.2.2" - resolved "https://registry.yarnpkg.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz#03ecc29279e3c0c832f6185a5bfa3497858ac8ca" - integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw== - "@types/events@*": version "3.0.0" resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" @@ -8103,13 +8098,6 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" -vanilla-picker@^2.10.0: - version "2.10.0" - resolved "https://registry.yarnpkg.com/vanilla-picker/-/vanilla-picker-2.10.0.tgz#36676631b9346daa6b93aa4f80c541f113e38c50" - integrity sha512-s1K+oa/JrT5blJFbLLw1O+PMncJM1qCF8DVXKNPaTVxXgTteSCjSr4rvf8TpcqEcQQ+S4RV/nvPBZanrlJE82w== - dependencies: - "@sphinxxxx/color-conversion" "^2.2.2" - velocity-animate@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/velocity-animate/-/velocity-animate-1.5.2.tgz#5a351d75fca2a92756f5c3867548b873f6c32105" From 79d4434c9f7c654aa89cdc5fe1211942244e5c9e Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 1 Oct 2019 15:20:11 +0200 Subject: [PATCH 09/18] remove custom color pickers --- .../tabs/user/GeneralUserSettingsTab.js | 49 ------------------- 1 file changed, 49 deletions(-) diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js index 6d54df0b31..b9c566b22a 100644 --- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js @@ -270,21 +270,6 @@ export default class GeneralUserSettingsTab extends React.Component { _renderThemeSection() { const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag"); - let customSection; - if (this.state.theme === "light-custom") { - customSection = (
- {_t("Custom theme colors")} - - - - - - - - - -
); - } return (
{_t("Theme")} @@ -295,7 +280,6 @@ export default class GeneralUserSettingsTab extends React.Component { })} - { customSection }
); } @@ -395,36 +379,3 @@ export default class GeneralUserSettingsTab extends React.Component { ); } } - -class CustomThemeColorField extends React.Component { - constructor(props) { - super(props); - this.state = {color: ""}; - } - - componentDidMount() { - setTimeout(() => { - const value = window.getComputedStyle(document.body).getPropertyValue(`--${this.props.name}`).trim(); - this.setState({color: value}); - }, 3000); - } - - _onColorChanged = (event) => { - const hex = event.target.value; - document.body.style.setProperty(`--${this.props.name}`, hex); - document.body.style.setProperty(`--${this.props.name}-0pct`, hex + "00"); - document.body.style.setProperty(`--${this.props.name}-50pct`, hex + "7F"); - this.setState({color: hex}); - } - - render() { - const id = `color-picker-${this.props.name}`; - return (
- - -
); - } -} From 558f8daeeb05e25de950affbfc11de153bf1a214 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 1 Oct 2019 15:21:22 +0200 Subject: [PATCH 10/18] support custom themes from setting also move theme setting code from MatrixChat to own file. --- src/components/structures/MatrixChat.js | 79 +--------- .../tabs/user/GeneralUserSettingsTab.js | 6 +- src/settings/Settings.js | 4 + src/settings/controllers/ThemeController.js | 5 +- src/theme.js | 139 ++++++++++++++++++ src/themes.js | 25 ---- 6 files changed, 151 insertions(+), 107 deletions(-) create mode 100644 src/theme.js delete mode 100644 src/themes.js diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index a185664038..9392a14ad4 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -56,6 +56,7 @@ import { ValidatedServerConfig } from "../../utils/AutoDiscoveryUtils"; import AutoDiscoveryUtils from "../../utils/AutoDiscoveryUtils"; import DMRoomMap from '../../utils/DMRoomMap'; import { countRoomsWithNotif } from '../../RoomNotifs'; +import { setTheme } from "../../theme"; // Disable warnings for now: we use deprecated bluebird functions // and need to migrate, but they spam the console with warnings. @@ -658,7 +659,7 @@ export default createReactClass({ break; } case 'set_theme': - this._onSetTheme(payload.value); + setTheme(payload.value); break; case 'on_logging_in': // We are now logging in, so set the state to reflect that @@ -1102,82 +1103,6 @@ export default createReactClass({ }); }, - /** - * Called whenever someone changes the theme - * - * @param {string} theme new theme - */ - _onSetTheme: function(theme) { - if (!theme) { - theme = SettingsStore.getValue("theme"); - } - - // look for the stylesheet elements. - // styleElements is a map from style name to HTMLLinkElement. - const styleElements = Object.create(null); - let a; - for (let i = 0; (a = document.getElementsByTagName("link")[i]); i++) { - const href = a.getAttribute("href"); - // shouldn't we be using the 'title' tag rather than the href? - const match = href.match(/^bundles\/.*\/theme-(.*)\.css$/); - if (match) { - styleElements[match[1]] = a; - } - } - - if (!(theme in styleElements)) { - throw new Error("Unknown theme " + theme); - } - - // disable all of them first, then enable the one we want. Chrome only - // bothers to do an update on a true->false transition, so this ensures - // that we get exactly one update, at the right time. - // - // ^ This comment was true when we used to use alternative stylesheets - // for the CSS. Nowadays we just set them all as disabled in index.html - // and enable them as needed. It might be cleaner to disable them all - // at the same time to prevent loading two themes simultaneously and - // having them interact badly... but this causes a flash of unstyled app - // which is even uglier. So we don't. - - styleElements[theme].disabled = false; - - const switchTheme = function() { - // we re-enable our theme here just in case we raced with another - // theme set request as per https://github.com/vector-im/riot-web/issues/5601. - // We could alternatively lock or similar to stop the race, but - // this is probably good enough for now. - styleElements[theme].disabled = false; - Object.values(styleElements).forEach((a) => { - if (a == styleElements[theme]) return; - a.disabled = true; - }); - Tinter.setTheme(theme); - }; - - // turns out that Firefox preloads the CSS for link elements with - // the disabled attribute, but Chrome doesn't. - - let cssLoaded = false; - - styleElements[theme].onload = () => { - switchTheme(); - }; - - for (let i = 0; i < document.styleSheets.length; i++) { - const ss = document.styleSheets[i]; - if (ss && ss.href === styleElements[theme].href) { - cssLoaded = true; - break; - } - } - - if (cssLoaded) { - styleElements[theme].onload = undefined; - switchTheme(); - } - }, - /** * Starts a chat with the welcome user, if the user doesn't already have one * @returns {string} The room ID of the new room, or null if no room was created diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js index b9c566b22a..64aafe6046 100644 --- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js @@ -27,7 +27,7 @@ import LanguageDropdown from "../../../elements/LanguageDropdown"; import AccessibleButton from "../../../elements/AccessibleButton"; import DeactivateAccountDialog from "../../../dialogs/DeactivateAccountDialog"; import PropTypes from "prop-types"; -import {THEMES} from "../../../../../themes"; +import {enumerateThemes} from "../../../../../theme"; import PlatformPeg from "../../../../../PlatformPeg"; import MatrixClientPeg from "../../../../../MatrixClientPeg"; import sdk from "../../../../.."; @@ -275,8 +275,8 @@ export default class GeneralUserSettingsTab extends React.Component { {_t("Theme")} - {Object.entries(THEMES).map(([theme, text]) => { - return ; + {Object.entries(enumerateThemes()).map(([theme, text]) => { + return ; })} diff --git a/src/settings/Settings.js b/src/settings/Settings.js index e0ff16c538..c82b7a0c71 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -245,6 +245,10 @@ export const SETTINGS = { default: "light", controller: new ThemeController(), }, + "custom_themes": { + supportedLevels: LEVELS_ACCOUNT_SETTINGS, + default: [], + }, "webRtcAllowPeerToPeer": { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG, displayName: _td('Allow Peer-to-Peer for 1:1 calls'), diff --git a/src/settings/controllers/ThemeController.js b/src/settings/controllers/ThemeController.js index da20521873..a15b4e78cd 100644 --- a/src/settings/controllers/ThemeController.js +++ b/src/settings/controllers/ThemeController.js @@ -16,12 +16,13 @@ limitations under the License. */ import SettingController from "./SettingController"; -import {DEFAULT_THEME, THEMES} from "../../themes"; +import {DEFAULT_THEME, enumerateThemes} from "../../theme"; export default class ThemeController extends SettingController { getValueOverride(level, roomId, calculatedValue, calculatedAtLevel) { + const themes = enumerateThemes(); // Override in case some no longer supported theme is stored here - if (!THEMES[calculatedValue]) { + if (!themes[calculatedValue]) { return DEFAULT_THEME; } diff --git a/src/theme.js b/src/theme.js new file mode 100644 index 0000000000..c2baca67da --- /dev/null +++ b/src/theme.js @@ -0,0 +1,139 @@ +/* +Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import {_t} from "./languageHandler"; + +export const DEFAULT_THEME = "light"; +import Tinter from "./Tinter"; +import SettingsStore from "./settings/SettingsStore"; + +export function enumerateThemes() { + const BUILTIN_THEMES = { + "light": _t("Light theme"), + "dark": _t("Dark theme"), + }; + const customThemes = SettingsStore.getValue("custom_themes"); + const customThemeNames = {}; + for (const {name} of customThemes) { + customThemeNames[`custom-${name}`] = name; + } + console.log("customThemeNames", customThemeNames); + return Object.assign({}, customThemeNames, BUILTIN_THEMES); +} + +function setCustomThemeVars(themeName) { + // set css variables + const customThemes = SettingsStore.getValue("custom_themes"); + if (!customThemes) { + throw new Error(`No custom themes set, can't set custom theme "${themeName}"`); + } + const customTheme = customThemes.find(t => t.name === themeName); + if (!customTheme) { + const knownNames = customThemes.map(t => t.name).join(", "); + throw new Error(`Can't find custom theme "${themeName}", only know ${knownNames}`); + } + const {style} = document.body; + if (customTheme.colors) { + for (const [name, hexColor] of Object.entries(customTheme.colors)) { + style.setProperty(`--${name}`, hexColor); + // uses #rrggbbaa to define the color with alpha values at 0% and 50% + style.setProperty(`--${name}-0pct`, hexColor + "00"); + style.setProperty(`--${name}-50pct`, hexColor + "7F"); + } + } +} + +/** + * Called whenever someone changes the theme + * + * @param {string} theme new theme + */ +export function setTheme(theme) { + if (!theme) { + theme = SettingsStore.getValue("theme"); + } + let stylesheetName = theme; + if (theme.startsWith("custom-")) { + stylesheetName = "light-custom"; + const themeName = theme.substr(7); + setCustomThemeVars(themeName); + } + + // look for the stylesheet elements. + // styleElements is a map from style name to HTMLLinkElement. + const styleElements = Object.create(null); + let a; + for (let i = 0; (a = document.getElementsByTagName("link")[i]); i++) { + const href = a.getAttribute("href"); + // shouldn't we be using the 'title' tag rather than the href? + const match = href.match(/^bundles\/.*\/theme-(.*)\.css$/); + if (match) { + styleElements[match[1]] = a; + } + } + + if (!(stylesheetName in styleElements)) { + throw new Error("Unknown theme " + stylesheetName); + } + + // disable all of them first, then enable the one we want. Chrome only + // bothers to do an update on a true->false transition, so this ensures + // that we get exactly one update, at the right time. + // + // ^ This comment was true when we used to use alternative stylesheets + // for the CSS. Nowadays we just set them all as disabled in index.html + // and enable them as needed. It might be cleaner to disable them all + // at the same time to prevent loading two themes simultaneously and + // having them interact badly... but this causes a flash of unstyled app + // which is even uglier. So we don't. + + styleElements[stylesheetName].disabled = false; + + const switchTheme = function() { + // we re-enable our theme here just in case we raced with another + // theme set request as per https://github.com/vector-im/riot-web/issues/5601. + // We could alternatively lock or similar to stop the race, but + // this is probably good enough for now. + styleElements[stylesheetName].disabled = false; + Object.values(styleElements).forEach((a) => { + if (a == styleElements[stylesheetName]) return; + a.disabled = true; + }); + Tinter.setTheme(theme); + }; + + // turns out that Firefox preloads the CSS for link elements with + // the disabled attribute, but Chrome doesn't. + + let cssLoaded = false; + + styleElements[stylesheetName].onload = () => { + switchTheme(); + }; + + for (let i = 0; i < document.styleSheets.length; i++) { + const ss = document.styleSheets[i]; + if (ss && ss.href === styleElements[stylesheetName].href) { + cssLoaded = true; + break; + } + } + + if (cssLoaded) { + styleElements[stylesheetName].onload = undefined; + switchTheme(); + } +} diff --git a/src/themes.js b/src/themes.js deleted file mode 100644 index 2529a04d89..0000000000 --- a/src/themes.js +++ /dev/null @@ -1,25 +0,0 @@ -/* -Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import {_td} from "./languageHandler"; - -export const DEFAULT_THEME = "light"; - -export const THEMES = { - "light": _td("Light theme"), - "dark": _td("Dark theme"), - "light-custom": _td("Custom theme (light)"), -}; From c1edd6d0b52bc7aa0ef6992cb2ef77ecea4852e0 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 1 Oct 2019 15:31:43 +0200 Subject: [PATCH 11/18] apply new pallete with 13 colors --- res/themes/light-custom/css/_custom.scss | 140 +++++++++--------- res/themes/light-custom/css/light-custom.scss | 34 ----- 2 files changed, 73 insertions(+), 101 deletions(-) diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 1531afc7bb..5af7caa43e 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -1,5 +1,5 @@ // -// PALETTE COLOR: accent color +// --accent-color $accent-color: var(--accent-color); $button-bg-color: var(--accent-color); $button-link-fg-color: var(--accent-color); @@ -12,87 +12,93 @@ $togglesw-on-color: var(--accent-color); $username-variant3-color: var(--accent-color); $accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5 // -// PALETTE COLOR: background color -$authpage-body-bg-color: var(--background-color); -$avatar-bg-color: var(--background-color); -$button-secondary-bg-color: var(--background-color); -$field-focused-label-bg-color: var(--background-color); -$lightbox-border-color: var(--background-color); -$menu-bg-color: var(--background-color); -$message-action-bar-bg-color: var(--background-color); -$primary-bg-color: var(--background-color); -$roomtile-focused-bg-color: var(--background-color); -$roomtile-selected-bg-color: var(--background-color); -$togglesw-ball-color: var(--background-color); -$droptarget-bg-color: var(--background-color-50pct); //still needs alpha at .5 -$authpage-modal-bg-color: var(--background-color-50pct); //still needs alpha at .59 +// --timeline-background-color +$authpage-body-bg-color: var(--timeline-background-color); +$button-secondary-bg-color: var(--timeline-background-color); +$field-focused-label-bg-color: var(--timeline-background-color); +$lightbox-border-color: var(--timeline-background-color); +$menu-bg-color: var(--timeline-background-color); +$avatar-bg-color: var(--timeline-background-color); +$message-action-bar-bg-color: var(--timeline-background-color); +$primary-bg-color: var(--timeline-background-color); +$roomtile-focused-bg-color: var(--timeline-background-color); +$togglesw-ball-color: var(--timeline-background-color); +$droptarget-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .5 +$authpage-modal-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .59 // -// PALETTE COLOR: base color -$interactive-tooltip-bg-color: var(--base-color); -$tagpanel-bg-color: var(--base-color); -$tooltip-timeline-bg-color: var(--base-color); +// --roomlist-highlights-color +$roomtile-selected-bg-color: var(--roomlist-highlights-color); // -// PALETTE COLOR: panel color -$event-selected-color: var(--panel-color); -$header-panel-bg-color: var(--panel-color); -$reaction-row-button-bg-color: var(--panel-color); -$panel-gradient: var(--panel-color-0pct), var(--panel-color); +// --sidebar-color +$interactive-tooltip-bg-color: var(--sidebar-color); +$tagpanel-bg-color: var(--sidebar-color); +$tooltip-timeline-bg-color: var(--sidebar-color); +$dialog-backdrop-color: var(--sidebar-color-50pct); +// +// --roomlist-background-color +$event-selected-color: var(--roomlist-background-color); +$header-panel-bg-color: var(--roomlist-background-color); +$reaction-row-button-bg-color: var(--roomlist-background-color); +$panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color); // these were #f2f5f8 instead of #f3f8fd, but close enough -$dark-panel-bg-color: var(--panel-color); -$input-lighter-bg-color: var(--panel-color); -$plinth-bg-color: var(--panel-color); -$roomsublist-background: var(--panel-color); -$secondary-accent-color: var(--panel-color); -$selected-color: var(--panel-color); -$widget-menu-bar-bg-color: var(--panel-color); +$dark-panel-bg-color: var(--roomlist-background-color); +$input-lighter-bg-color: var(--roomlist-background-color); +$plinth-bg-color: var(--roomlist-background-color); +$roomsublist-background: var(--roomlist-background-color); +$secondary-accent-color: var(--roomlist-background-color); +$selected-color: var(--roomlist-background-color); +$widget-menu-bar-bg-color: var(--roomlist-background-color); // -// PALETTE COLOR: panel contrast color -$input-darker-bg-color: var(--panel-contrast-color); -$panel-divider-color: var(--panel-contrast-color);// originally #dee1f3, not #e3e8f0, but close enough -$primary-hairline-color: var(--panel-contrast-color);// originally #e5e5e5, not #e3e8f0, but close enough -// -// PALETTE COLOR: body text color -$message-action-bar-fg-color: var(--body-text-color); -$primary-fg-color: var(--body-text-color); -$settings-profile-overlay-placeholder-fg-color: var(--body-text-color); -$dialog-backdrop-color: var(--body-text-color-50pct); //still needs alpha at .38 -$roomtopic-color: var(--body-text-color-50pct); //still needs alpha at .5 -$tab-label-fg-color: var(--body-text-color); -$tab-label-icon-bg-color: var(--body-text-color); //was #454545 +// --timeline-text-color +$message-action-bar-fg-color: var(--timeline-text-color); +$primary-fg-color: var(--timeline-text-color); +$settings-profile-overlay-placeholder-fg-color: var(--timeline-text-color); +$roomtopic-color: var(--timeline-text-color-50pct); +$tab-label-fg-color: var(--timeline-text-color); +$tab-label-icon-bg-color: var(--timeline-text-color); //was #454545 // was #212121 -$roomtile-notified-color: var(--body-text-color); -$roomtile-selected-color: var(--body-text-color); -$topleftmenu-color: var(--body-text-color); +$topleftmenu-color: var(--timeline-text-color); // was #45474a -$dialog-title-fg-color: var(--body-text-color); -$roomheader-color: var(--body-text-color); -$tab-label-fg-color: var(--body-text-color); +$dialog-title-fg-color: var(--timeline-text-color); +$tab-label-fg-color: var(--timeline-text-color); // was #4e5054 -$authpage-lang-color: var(--body-text-color); +$authpage-lang-color: var(--timeline-text-color); +$roomheader-color: var(--timeline-text-color); // -// PALETTE COLOR: body contrast color -$authpage-secondary-color: var(--body-contrast-color); -$memberstatus-placeholder-color: var(--body-contrast-color); -$notice-secondary-color: var(--body-contrast-color); -$pinned-color: var(--body-contrast-color); -$roomsublist-label-fg-color: var(--body-contrast-color); -$roomtile-name-color: var(--body-contrast-color); -$settings-subsection-fg-color: var(--body-contrast-color); -$roomheader-addroom-bg-color: var(--body-contrast-color); +// --roomlist-text-color +$roomtile-notified-color: var(--roomlist-text-color); +$roomtile-selected-color: var(--roomlist-text-color); +// +// --roomlist-text-secondary-color +$roomsublist-label-fg-color: var(--roomlist-text-secondary-color); +$roomtile-name-color: var(--roomlist-text-secondary-color); +// +// --roomlist-separator-color +$input-darker-bg-color: var(--roomlist-separator-color); +$panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, but close enough +$primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough +// +// --timeline-text-secondary-color +$authpage-secondary-color: var(--timeline-text-secondary-color); +$memberstatus-placeholder-color: var(--timeline-text-secondary-color); +$notice-secondary-color: var(--timeline-text-secondary-color); +$pinned-color: var(--timeline-text-secondary-color); +$settings-subsection-fg-color: var(--timeline-text-secondary-color); +$roomheader-addroom-bg-color: var(--timeline-text-secondary-color); // was #747474 -$light-fg-color: var(--body-contrast-color); +$light-fg-color: var(--timeline-text-secondary-color); // was #777777 -$blockquote-fg-color: var(--body-contrast-color); +$blockquote-fg-color: var(--timeline-text-secondary-color); // was #888888 -$greyed-fg-color: var(--body-contrast-color); -$info-plinth-fg-color: var(--body-contrast-color); -$preview-widget-fg-color: var(--body-contrast-color); +$greyed-fg-color: var(--timeline-text-secondary-color); +$info-plinth-fg-color: var(--timeline-text-secondary-color); +$preview-widget-fg-color: var(--timeline-text-secondary-color); // -// PALETTE COLOR: primary color +// --primary-color $accent-color-alt: var(--primary-color); $input-focused-border-color: var(--primary-color); // -// PALETTE COLOR: warning color +// --warning-color $button-danger-bg-color: var(--warning-color); $event-highlight-fg-color: var(--warning-color); $input-invalid-border-color: var(--warning-color); diff --git a/res/themes/light-custom/css/light-custom.scss b/res/themes/light-custom/css/light-custom.scss index a75db83305..278ca5f0b1 100644 --- a/res/themes/light-custom/css/light-custom.scss +++ b/res/themes/light-custom/css/light-custom.scss @@ -3,37 +3,3 @@ @import "../../light/css/_light.scss"; @import "_custom.scss"; @import "../../../../res/css/_components.scss"; - -// defaults -body { - // fully opaque - --accent-color: #03b381; - --background-color: #ffffff; - --base-color: #27303a; - --panel-color: #f3f8fd; - --panel-contrast-color: #e3e8f0; - --body-text-color: #2e2f32; - --body-contrast-color: #61708b; - --primary-color: #368bd6; - --warning-color: #ff4b55; - // 0% opaque - --accent-color-0pct: #03b38100; - --background-color-0pct: #ffffff00; - --base-color-0pct: #27303a00; - --panel-color-0pct: #f3f8fd00; - --panel-contrast-color-0pct: #e3e8f000; - --body-text-color-0pct: #2e2f3200; - --body-contrast-color-0pct: #61708b00; - --primary-color-0pct: #368bd600; - --warning-color-0pct: #ff4b5500; - // 50% opaque - --accent-color-50pct: #03b3817f; - --background-color-50pct: #ffffff7f; - --base-color-50pct: #27303a7f; - --panel-color-50pct: #f3f8fd7f; - --panel-contrast-color-50pct: #e3e8f07f; - --body-text-color-50pct: #2e2f327f; - --body-contrast-color-50pct: #61708b7f; - --primary-color-50pct: #368bd67f; - --warning-color-50pct: #ff4b557f; -} From 15b7a5af31071d7b690ad20d23c9ce2c0bebf7b1 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 1 Oct 2019 16:58:14 +0200 Subject: [PATCH 12/18] fix contrast issue when badges with and without highlighted state have a very different brightness (as they might do in dark mode), hardcoding the fg color of a badge independent of it's highlighted state to $accent-fg-color doesn't work well, so add an extra SASS variable we can reassign to something more specific in the custom theme --- res/css/structures/_RoomSubList.scss | 3 ++- res/css/views/rooms/_RoomTile.scss | 3 ++- res/themes/light-custom/css/_custom.scss | 1 + res/themes/light/css/_light.scss | 1 + 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 3b03fe0a2f..fc61395bf9 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -70,10 +70,10 @@ limitations under the License. .mx_RoomSubList_badge { flex: 0 0 auto; border-radius: 8px; - color: $accent-fg-color; font-weight: 600; font-size: 12px; padding: 0 5px; + color: $roomtile-badge-fg-color; background-color: $roomtile-name-color; cursor: pointer; } @@ -104,6 +104,7 @@ limitations under the License. } .mx_RoomSubList_badgeHighlight { + color: $accent-fg-color; background-color: $warning-color; } diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 25330973b6..2acddc233c 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -110,7 +110,7 @@ limitations under the License. flex: 0 1 content; border-radius: 0.8em; padding: 0 0.4em; - color: $accent-fg-color; + color: $roomtile-badge-fg-color; font-weight: 600; font-size: 12px; } @@ -156,6 +156,7 @@ limitations under the License. .mx_RoomTile_highlight .mx_RoomTile_badge, .mx_RoomTile_badge.mx_RoomTile_badgeRed { + color: $accent-fg-color; background-color: $warning-color; } diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 5af7caa43e..54f721828f 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -48,6 +48,7 @@ $roomsublist-background: var(--roomlist-background-color); $secondary-accent-color: var(--roomlist-background-color); $selected-color: var(--roomlist-background-color); $widget-menu-bar-bg-color: var(--roomlist-background-color); +$roomtile-badge-fg-color: var(--roomlist-background-color); // // --timeline-text-color $message-action-bar-fg-color: var(--timeline-text-color); diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 224e6a95d8..b412261d10 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -167,6 +167,7 @@ $header-divider-color: #91A1C0; // ******************** $roomtile-name-color: #61708b; +$roomtile-badge-fg-color: $accent-fg-color; $roomtile-selected-color: #212121; $roomtile-notified-color: #212121; $roomtile-selected-bg-color: #fff; From fc6a68cd1daba06d5211d079f66dffaf1542eee7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 1 Oct 2019 17:00:29 +0200 Subject: [PATCH 13/18] add support for dark theme --- res/themes/dark-custom/css/dark-custom.scss | 6 ++++ src/theme.js | 31 +++++++++++---------- 2 files changed, 23 insertions(+), 14 deletions(-) create mode 100644 res/themes/dark-custom/css/dark-custom.scss diff --git a/res/themes/dark-custom/css/dark-custom.scss b/res/themes/dark-custom/css/dark-custom.scss new file mode 100644 index 0000000000..aff647ce26 --- /dev/null +++ b/res/themes/dark-custom/css/dark-custom.scss @@ -0,0 +1,6 @@ +@import "../../light/css/_paths.scss"; +@import "../../light/css/_fonts.scss"; +@import "../../light/css/_light.scss"; +@import "../../dark/css/_dark.scss"; +@import "../../light-custom/css/_custom.scss"; +@import "../../../../res/css/_components.scss"; diff --git a/src/theme.js b/src/theme.js index c2baca67da..549cf7bcb9 100644 --- a/src/theme.js +++ b/src/theme.js @@ -30,11 +30,22 @@ export function enumerateThemes() { for (const {name} of customThemes) { customThemeNames[`custom-${name}`] = name; } - console.log("customThemeNames", customThemeNames); return Object.assign({}, customThemeNames, BUILTIN_THEMES); } -function setCustomThemeVars(themeName) { +function setCustomThemeVars(customTheme) { + const {style} = document.body; + if (customTheme.colors) { + for (const [name, hexColor] of Object.entries(customTheme.colors)) { + style.setProperty(`--${name}`, hexColor); + // uses #rrggbbaa to define the color with alpha values at 0% and 50% + style.setProperty(`--${name}-0pct`, hexColor + "00"); + style.setProperty(`--${name}-50pct`, hexColor + "7F"); + } + } +} + +function getCustomTheme(themeName) { // set css variables const customThemes = SettingsStore.getValue("custom_themes"); if (!customThemes) { @@ -45,15 +56,7 @@ function setCustomThemeVars(themeName) { const knownNames = customThemes.map(t => t.name).join(", "); throw new Error(`Can't find custom theme "${themeName}", only know ${knownNames}`); } - const {style} = document.body; - if (customTheme.colors) { - for (const [name, hexColor] of Object.entries(customTheme.colors)) { - style.setProperty(`--${name}`, hexColor); - // uses #rrggbbaa to define the color with alpha values at 0% and 50% - style.setProperty(`--${name}-0pct`, hexColor + "00"); - style.setProperty(`--${name}-50pct`, hexColor + "7F"); - } - } + return customTheme; } /** @@ -67,9 +70,9 @@ export function setTheme(theme) { } let stylesheetName = theme; if (theme.startsWith("custom-")) { - stylesheetName = "light-custom"; - const themeName = theme.substr(7); - setCustomThemeVars(themeName); + const customTheme = getCustomTheme(theme.substr(7)); + stylesheetName = customTheme.is_dark ? "dark-custom" : "light-custom"; + setCustomThemeVars(customTheme); } // look for the stylesheet elements. From 026733304e46be7e7dc29e5fb83cdd4729fe9c2f Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 1 Oct 2019 17:00:41 +0200 Subject: [PATCH 14/18] add doc for where default settings go in config file now we're here --- docs/settings.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/settings.md b/docs/settings.md index 1ba8981f84..1dab5d2c88 100644 --- a/docs/settings.md +++ b/docs/settings.md @@ -15,7 +15,7 @@ order of prioirty, are: * `room-account` - The current user's account, but only when in a specific room * `account` - The current user's account * `room` - A specific room (setting for all members of the room) -* `config` - Values are defined by `config.json` +* `config` - Values are defined by the `settingDefaults` key in `config.json` * `default` - The hardcoded default for the settings Individual settings may control which levels are appropriate for them as part of the defaults. This is often to ensure From 8d767a712f147a18974645641183a411df2d6944 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 1 Oct 2019 17:31:20 +0200 Subject: [PATCH 15/18] remove obsolete strings --- src/i18n/strings/en_EN.json | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index dc15276dc9..49302fece1 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -263,7 +263,6 @@ "%(widgetName)s widget removed by %(senderName)s": "%(widgetName)s widget removed by %(senderName)s", "Light theme": "Light theme", "Dark theme": "Dark theme", - "Custom theme (light)": "Custom theme (light)", "%(displayName)s is typing …": "%(displayName)s is typing …", "%(names)s and %(count)s others are typing …|other": "%(names)s and %(count)s others are typing …", "%(names)s and %(count)s others are typing …|one": "%(names)s and one other is typing …", @@ -599,16 +598,6 @@ "Account": "Account", "Set a new account password...": "Set a new account password...", "Language and region": "Language and region", - "Custom theme colors": "Custom theme colors", - "Accent color": "Accent color", - "Background color": "Background color", - "Base color": "Base color", - "Panel color": "Panel color", - "Panel Contrast color": "Panel Contrast color", - "Body Text color": "Body Text color", - "Body contrast color": "Body contrast color", - "Primary color": "Primary color", - "Warning color": "Warning color", "Theme": "Theme", "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.": "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.", "Account management": "Account management", From 9e60e4b6698d0000b717503df6d5d182dfc2feb2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 2 Oct 2019 09:00:24 +0000 Subject: [PATCH 16/18] Update docs/settings.md Co-Authored-By: Travis Ralston --- docs/settings.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/settings.md b/docs/settings.md index 1dab5d2c88..9b780c27c9 100644 --- a/docs/settings.md +++ b/docs/settings.md @@ -15,7 +15,7 @@ order of prioirty, are: * `room-account` - The current user's account, but only when in a specific room * `account` - The current user's account * `room` - A specific room (setting for all members of the room) -* `config` - Values are defined by the `settingDefaults` key in `config.json` +* `config` - Values are defined by the `settingDefaults` key (usually) in `config.json` * `default` - The hardcoded default for the settings Individual settings may control which levels are appropriate for them as part of the defaults. This is often to ensure From fbc3f68fd2eabdeb936137d736ea75a0fbfefa38 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 2 Oct 2019 11:05:46 +0200 Subject: [PATCH 17/18] remove old style --- .../views/settings/tabs/user/_GeneralUserSettingsTab.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss index ba62288725..62d230e752 100644 --- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss @@ -34,9 +34,3 @@ limitations under the License. .mx_GeneralUserSettingsTab_warningIcon { vertical-align: middle; } - -.mx_GeneralUserSettingsTab_themeSection .mx_GeneralUserSettingsTab_customColors { - button { - display: block; - } -} From 27ca73bf6390315b698c0a39133666e2f79fdd34 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 2 Oct 2019 11:05:57 +0200 Subject: [PATCH 18/18] add copyright headers --- res/themes/light-custom/css/_custom.scss | 16 ++++++++++++++++ src/theme.js | 1 + 2 files changed, 17 insertions(+) diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 54f721828f..e4a08277f9 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -1,3 +1,19 @@ +/* +Copyright 2019 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + // // --accent-color $accent-color: var(--accent-color); diff --git a/src/theme.js b/src/theme.js index 549cf7bcb9..d479170792 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,5 +1,6 @@ /* Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> +Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.