Add a high contrast theme (a variant of the light theme) (#7036)

* Enable choosing a high contrast variant of the Light theme

* Updates to high contrast theme to match design and show focus

* Adjust the outline-offset to match designs

* Don't draw an outline around the active tab

* Prevent cropping of outlines on buttons

* Use the correct colour for links

* Change light grey text to be darker in high contrast theme

* Use a darker text colour in admin panel

* Adjust background colours of back button and font slider

src/components/views/settings/ThemeChoicePanel.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import { _t } from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
-import { enumerateThemes } from "../../../theme";
+import { enumerateThemes, findHighContrastTheme, findNonHighContrastTheme, isHighContrastTheme } from "../../../theme";
 import ThemeWatcher from "../../../settings/watchers/ThemeWatcher";
 import AccessibleButton from "../elements/AccessibleButton";
 import dis from "../../../dispatcher/dispatcher";
@@ -159,7 +159,37 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
         this.setState({ customThemeUrl: e.target.value });
     };
 
-    public render() {
+    private renderHighContrastCheckbox(): React.ReactElement<HTMLDivElement> {
+        if (
+            !this.state.useSystemTheme && (
+                findHighContrastTheme(this.state.theme) ||
+                isHighContrastTheme(this.state.theme)
+            )
+        ) {
+            return <div>
+                <StyledCheckbox
+                    checked={isHighContrastTheme(this.state.theme)}
+                    onChange={(e) => this.highContrastThemeChanged(e.target.checked)}
+                >
+                    { _t( "Use high contrast" ) }
+                </StyledCheckbox>
+            </div>;
+        }
+    }
+
+    private highContrastThemeChanged(checked: boolean): void {
+        let newTheme: string;
+        if (checked) {
+            newTheme = findHighContrastTheme(this.state.theme);
+        } else {
+            newTheme = findNonHighContrastTheme(this.state.theme);
+        }
+        if (newTheme) {
+            this.onThemeChange(newTheme);
+        }
+    }
+
+    public render(): React.ReactElement<HTMLDivElement> {
         const themeWatcher = new ThemeWatcher();
         let systemThemeSection: JSX.Element;
         if (themeWatcher.isSystemThemeSupported()) {
@@ -210,7 +240,8 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
 
         // XXX: replace any type here
         const themes = Object.entries<any>(enumerateThemes())
-            .map(p => ({ id: p[0], name: p[1] })); // convert pairs to objects for code readability
+            .map(p => ({ id: p[0], name: p[1] })) // convert pairs to objects for code readability
+            .filter(p => !isHighContrastTheme(p.id));
         const builtInThemes = themes.filter(p => !p.id.startsWith("custom-"));
         const customThemes = themes.filter(p => !builtInThemes.includes(p))
             .sort((a, b) => compare(a.name, b.name));
@@ -229,12 +260,21 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
                             className: "mx_ThemeSelector_" + t.id,
                         }))}
                         onChange={this.onThemeChange}
-                        value={this.state.useSystemTheme ? undefined : this.state.theme}
+                        value={this.apparentSelectedThemeId()}
                         outlined
                     />
                 </div>
+                { this.renderHighContrastCheckbox() }
                 { customThemeForm }
             </div>
         );
     }
+
+    apparentSelectedThemeId() {
+        if (this.state.useSystemTheme) {
+            return undefined;
+        }
+        const nonHighContrast = findNonHighContrastTheme(this.state.theme);
+        return nonHighContrast ? nonHighContrast : this.state.theme;
+    }
 }

src/i18n/strings/en_EN.json

@@ -579,6 +579,7 @@
     "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
     "%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
     "Light": "Light",
+    "Light high contrast": "Light high contrast",
     "Dark": "Dark",
     "%(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 …",
@@ -1293,6 +1294,7 @@
     "Invalid theme schema.": "Invalid theme schema.",
     "Error downloading theme information.": "Error downloading theme information.",
     "Theme added!": "Theme added!",
+    "Use high contrast": "Use high contrast",
     "Custom theme URL": "Custom theme URL",
     "Add theme": "Add theme",
     "Theme": "Theme",

src/theme.ts

@@ -21,6 +21,9 @@ import SettingsStore from "./settings/SettingsStore";
 import ThemeWatcher from "./settings/watchers/ThemeWatcher";
 
 export const DEFAULT_THEME = "light";
+const HIGH_CONTRAST_THEMES = {
+    "light": "light-high-contrast",
+};
 
 interface IFontFaces {
     src: {
@@ -42,9 +45,37 @@ interface ICustomTheme {
     is_dark?: boolean; // eslint-disable-line camelcase
 }
 
+/**
+ * Given a non-high-contrast theme, find the corresponding high-contrast one
+ * if it exists, or return undefined if not.
+ */
+export function findHighContrastTheme(theme: string) {
+    return HIGH_CONTRAST_THEMES[theme];
+}
+
+/**
+ * Given a high-contrast theme, find the corresponding non-high-contrast one
+ * if it exists, or return undefined if not.
+ */
+export function findNonHighContrastTheme(hcTheme: string) {
+    for (const theme in HIGH_CONTRAST_THEMES) {
+        if (HIGH_CONTRAST_THEMES[theme] === hcTheme) {
+            return theme;
+        }
+    }
+}
+
+/**
+ * Decide whether the supplied theme is high contrast.
+ */
+export function isHighContrastTheme(theme: string) {
+    return Object.values(HIGH_CONTRAST_THEMES).includes(theme);
+}
+
 export function enumerateThemes(): {[key: string]: string} {
     const BUILTIN_THEMES = {
         "light": _t("Light"),
+        "light-high-contrast": _t("Light high contrast"),
         "dark": _t("Dark"),
     };
     const customThemes = SettingsStore.getValue("custom_themes");