imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
This commit is contained in:
Andy Balaam 2021-10-27 14:31:54 +01:00 • committed by GitHub
parent 8170697bbf
commit abbc39cdec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 123 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/theme.ts
View file

@ -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");