yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added high contrast

Browse Source
This commit is contained in:
Jesper Møller Jensen
2023-01-24 00:34:20 +01:00
parent 42477cc4ce
commit 99c3d559d8
1 changed files with 58 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/Umbraco.Web.UI.Client/src/core/theme/theme.service.ts
View File

@@ -16,13 +16,14 @@ export class UmbThemeService {
]);
public readonly themes = this.#themes.asObservable();
#theme = new BehaviorSubject('dark');
#theme = new BehaviorSubject('high-contrast');
public readonly theme = this.#theme.asObservable();
#styleElement: HTMLStyleElement;
constructor() {
this.addTheme({ name: 'dark', css: _darkTheme.cssText });
this.addTheme({ name: 'high-contrast', css: _hightContrastTheme.cssText });
this.#styleElement = document.createElement('style');
this.changeTheme(this.#theme.value);
@@ -95,3 +96,59 @@ const _darkTheme = css`
--uui-color-positive-contrast: #eeeeef;
}
`;
const _hightContrastTheme = css`
:root {
--uui-color-selected: var(--uui-palette-violet-blue, #3544b1);
--uui-color-selected-emphasis: var(--uui-palette-violet-blue-light, rgb(70, 86, 200));
--uui-color-selected-standalone: var(--uui-palette-violet-blue-dark, rgb(54, 65, 156));
--uui-color-selected-contrast: #fff;
--uui-color-current: var(--uui-palette-spanish-pink, #f5c1bc);
--uui-color-current-emphasis: var(--uui-palette-spanish-pink-light, rgb(248, 214, 211));
--uui-color-current-standalone: var(--uui-palette-spanish-pink-dark, rgb(232, 192, 189));
--uui-color-current-contrast: var(--uui-palette-space-cadet, #1b264f);
--uui-color-disabled: var(--uui-palette-sand, #f3f3f5);
--uui-color-disabled-standalone: var(--uui-palette-sand-dark, rgb(226, 226, 226));
--uui-color-disabled-contrast: var(--uui-palette-grey, #c4c4c4);
--uui-color-header-surface: var(--uui-palette-space-cadet, #1b264f);
--uui-color-header-contrast: #fff;
--uui-color-header-contrast-emphasis: #fff;
--uui-color-focus: var(--uui-palette-malibu, #3879ff);
--uui-color-surface: #fff;
--uui-color-surface-alt: #fff;
--uui-color-surface-emphasis: #dadada;
--uui-color-background: #fff;
--uui-color-text: var(--uui-palette-black, #060606);
--uui-color-text-alt: var(--uui-palette-dune-black, #2e2b29);
--uui-color-interactive: var(--uui-palette-space-cadet, #1b264f);
--uui-color-interactive-emphasis: var(--uui-palette-violet-blue, #3544b1);
--uui-color-border: #000000;
--uui-color-border-standalone: #000000;
--uui-color-border-emphasis: #000000;
--uui-color-divider: #000000;
--uui-color-divider-standalone: #000000;
--uui-color-divider-emphasis: #000000;
--uui-color-default: var(--uui-palette-space-cadet, #1b264f);
--uui-color-default-emphasis: var(--uui-palette-violet-blue, #3544b1);
--uui-color-default-standalone: var(--uui-palette-space-cadet-dark, rgb(28, 35, 59));
--uui-color-default-contrast: #fff;
--uui-color-warning: #ffd621;
--uui-color-warning-emphasis: #ffdc41;
--uui-color-warning-standalone: #ffdd43;
--uui-color-warning-contrast: #000;
--uui-color-danger: #c60239;
--uui-color-danger-emphasis: #da114a;
--uui-color-danger-standalone: #d0003b;
--uui-color-danger-contrast: white;
--uui-color-positive: #0d8844;
--uui-color-positive-emphasis: #159c52;
--uui-color-positive-standalone: #1cae5e;
--uui-color-positive-contrast: #fff;
--uui-shadow-depth-1: 0 0 0px 1px black;
--uui-shadow-depth-2: 0 0 0px 1px black;
--uui-shadow-depth-3: 0 0 0px 1px black;
--uui-shadow-depth-4: 0 0 0px 1px black;
--uui-shadow-depth-5: 0 0 0px 1px black;
}
`;