very basic color pickers for custom theme

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"

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;
+    }
+}

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 = (<div class="mx_GeneralUserSettingsTab_customColors">
+                <span className="mx_SettingsTab_subheading">{_t("Custom theme colors")}</span>
+                <CustomThemeColorField name="accent-color" label={_t("Accent color")} />
+                <CustomThemeColorField name="background-color" label={_t("Background color")} />
+                <CustomThemeColorField name="base-color" label={_t("Base color")} />
+                <CustomThemeColorField name="panel-color" label={_t("Panel color")} />
+                <CustomThemeColorField name="panel-contrast-color" label={_t("Panel Contrast color")} />
+                <CustomThemeColorField name="body-text-color" label={_t("Body Text color")} />
+                <CustomThemeColorField name="body-contrast-color" label={_t("Body contrast color")} />
+                <CustomThemeColorField name="primary-color" label={_t("Primary color")} />
+                <CustomThemeColorField name="warning-color" label={_t("Warning color")} />
+            </div>);
+        }
         return (
             <div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_themeSection">
                 <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
@@ -280,6 +297,7 @@ export default class GeneralUserSettingsTab extends React.Component {
                     })}
                 </Field>
                 <SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} />
+                { customSection }
             </div>
         );
     }
@@ -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 (<button ref={ref => this._buttonRef = ref} onClick={this._onClick}>{this.props.label}</button>);
+    }
+}

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",

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"