cedro
Version:
Javascript library to build user interfece based on widgets.
397 lines (294 loc) • 12.6 kB
text/typescript
import { ITheme, IThemeManager } from "../interfaces/themes.interface";
export class Theme implements ITheme {
name: string;
properties: Map<string, string>;
constructor(name: string) {
this.name = name;
this.properties = new Map<string, string>();
}
add(name: string, value: string): ITheme {
this.properties.set(name, value);
return this;
}
}
export const LightTheme = new Theme("light");
export const DarkTheme = new Theme("dark");
export const CedroDarkTheme = new Theme("cedro-dark");
export const CedroLightTheme = new Theme("cedro");
LightTheme.add("--palette-text-primary", "rgba(0, 0, 0, 0.87)")
.add("--palette-text-secondary", "rgba(0, 0, 0, 0.6)")
.add("--palette-text-disabled", "rgba(0, 0, 0, 0.38)")
.add("--palette-background-default", "#ffffff")
.add("--palette-background-paper", "#ffffff")
.add("--palette-background-light", "#f5f5f5")
.add("--palette-action-active", "rgba(0, 0, 0, 0.54)")
.add("--palette-action-disabled", "rgba(0, 0, 0, 0.26)")
.add("--palette-action-hover", "#f5f5f5")
.add("--palette-action-selected", "rgba(0, 0, 0, 0.08)")
.add("--palette-action-disabled-bg", "rgba(0, 0, 0, 0.12)")
.add("--palette-divider", "rgba(0, 0, 0, 0.12)")
.add("--palette-link", "#1d79ee")
.add("--palette-link-hover", "#3393f2")
/*PRIMARY*/
.add("--palette-primary-main", "#90caf9")
.add("--palette-primary-dark", "#42a5f5")
.add("--palette-primary-light", "#90caf9")
.add("--palette-primary-text-main", "#2a3b49")
.add("--palette-primary-text-dark", "#133048")
.add("--palette-primary-text-light", "#43474b")
/*SECONDARY*/
.add("--palette-secondary-main", "#ce93d8")
.add("--palette-secondary-dark", "#ab47bc")
.add("--palette-secondary-light", "#f3e5f5")
.add("--palette-secondary-text-main", "#3d2b40")
.add("--palette-secondary-text-dark", "#e6c8eb")
.add("--palette-secondary-text-light", "#484348")
/*ERROR*/
.add("--palette-error-main", "#f44336")
.add("--palette-error-dark", "#d32f2f")
.add("--palette-error-light", "#e57373")
.add("--palette-error-text-main", "#fbc7c3")
.add("--palette-error-text-dark", "#f1c1c1")
.add("--palette-error-text-light", "#432222")
/*WARNING*/
.add("--palette-warning-main", "#ffa726")
.add("--palette-warning-dark", "#ffb74d")
.add("--palette-warning-light", "#f57c00")
.add("--palette-warning-text-main", "#4b310b")
.add("--palette-warning-text-dark", "#4b3616")
.add("--palette-warning-text-light", "#482400")
/*INFO*/
.add("--palette-info-main", "#29b6f6")
.add("--palette-info-dark", "#4fc3f7")
.add("--palette-info-light", "#0288d1")
.add("--palette-info-text-main", "#0c3649")
.add("--palette-info-text-dark", "#173949")
.add("--palette-info-text-light", "#b3dbf1")
/*SUCCESS*/
.add("--palette-success-main", "#66bb6a")
.add("--palette-success-dark", "#81c784")
.add("--palette-success-light", "#388e3c")
.add("--palette-success-text-main", "#1e371f")
.add("--palette-success-text-dark", "#263b27")
.add("--palette-success-text-light", "#c3ddc5");
DarkTheme.add("--palette-text-primary", "#cdd0d3")
.add("--palette-text-secondary", "#9aa0a6")
.add("--palette-text-disabled", "rgba(255, 255, 255, 0.5)")
.add("--palette-background-default", "#121212")
.add("--palette-background-paper", "#121212")
.add("--palette-background-light", "rgba(255, 255, 255, 0.02)")
.add("--palette-action-active", "#ffffff")
.add("--palette-action-disabled", "rgba(255, 255, 255, 0.3)")
.add("--palette-action-hover", "#252525")
.add("--palette-action-selected", "rgba(255, 255, 255, 0.16)")
.add("--palette-action-disabled-bg", "rgba(255, 255, 255, 0.12)")
.add("--palette-divider", "rgba(255, 255, 255, 0.12)")
.add("--palette-link", "#90caf9")
.add("--palette-link-hover", "#e3f2fd")
/*PRIMARY*/
.add("--palette-primary-main", "#90caf9")
.add("--palette-primary-dark", "#42a5f5")
.add("--palette-primary-light", "#e3f2fd")
.add("--palette-primary-text-main", "#2a3b49")
.add("--palette-primary-text-dark", "#133048")
.add("--palette-primary-text-light", "#43474b")
/*SECONDARY*/
.add("--palette-secondary-main", "#ce93d8")
.add("--palette-secondary-dark", "#ab47bc")
.add("--palette-secondary-light", "#f3e5f5")
.add("--palette-secondary-text-main", "#3d2b40")
.add("--palette-secondary-text-dark", "#e6c8eb")
.add("--palette-secondary-text-light", "#484348")
/*ERROR*/
.add("--palette-error-main", "#f44336")
.add("--palette-error-dark", "#d32f2f")
.add("--palette-error-light", "#e57373")
.add("--palette-error-text-main", "#fbc7c3")
.add("--palette-error-text-dark", "#f1c1c1")
.add("--palette-error-text-light", "#432222")
/*WARNING*/
.add("--palette-warning-main", "#ffa726")
.add("--palette-warning-dark", "#ffb74d")
.add("--palette-warning-light", "#f57c00")
.add("--palette-warning-text-main", "#4b310b")
.add("--palette-warning-text-dark", "#4b3616")
.add("--palette-warning-text-light", "#482400")
/*INFO*/
.add("--palette-info-main", "#29b6f6")
.add("--palette-info-dark", "#4fc3f7")
.add("--palette-info-light", "#0288d1")
.add("--palette-info-text-main", "#0c3649")
.add("--palette-info-text-dark", "#173949")
.add("--palette-info-text-light", "#b3dbf1")
/*SUCCESS*/
.add("--palette-success-main", "#66bb6a")
.add("--palette-success-dark", "#81c784")
.add("--palette-success-light", "#388e3c")
.add("--palette-success-text-main", "#1e371f")
.add("--palette-success-text-dark", "#263b27")
.add("--palette-success-text-light", "#c3ddc5");
CedroDarkTheme.add("--palette-text-primary", "#d3d0c8")
.add("--palette-text-secondary", "#a6a29a")
.add("--palette-text-disabled", "rgba(80, 81, 82, 0.5)")
.add("--palette-background-default", "#655349")
.add("--palette-background-paper", "#56473e")
.add("--palette-background-light", "#6d5a4e")
.add("--palette-action-active", "#655447")
.add("--palette-action-disabled", "rgba(39, 32, 27, 0.3)")
.add("--palette-action-hover", "#56473e")
.add("--palette-action-selected", "rgba(255, 255, 255, 0.16)")
.add("--palette-action-disabled-bg", "rgba(255, 255, 255, 0.12)")
.add("--palette-divider", "rgba(255, 255, 255, 0.12)")
.add("--palette-link", "#ffa500")
.add("--palette-link-hover", "#c07e06")
/*PRIMARY*/
.add("--palette-primary-main", "#f9ca90")
.add("--palette-primary-dark", "#da9f56")
.add("--palette-primary-light", "#fcd09a")
.add("--palette-primary-text-main", "#2a3b49")
.add("--palette-primary-text-dark", "#133048")
.add("--palette-primary-text-light", "#43474b")
/*SECONDARY*/
.add("--palette-secondary-main", "#ce93d8")
.add("--palette-secondary-dark", "#ab47bc")
.add("--palette-secondary-light", "#f3e5f5")
.add("--palette-secondary-text-main", "#3d2b40")
.add("--palette-secondary-text-dark", "#e6c8eb")
.add("--palette-secondary-text-light", "#484348")
/*ERROR*/
.add("--palette-error-main", "#9e5656")
.add("--palette-error-dark", "#d32f2f")
.add("--palette-error-light", "#e57373")
.add("--palette-error-text-main", "#fbc7c3")
.add("--palette-error-text-dark", "#f1c1c1")
.add("--palette-error-text-light", "#432222")
/*WARNING*/
.add("--palette-warning-main", "#ffa726")
.add("--palette-warning-dark", "#ffb74d")
.add("--palette-warning-light", "#f57c00")
.add("--palette-warning-text-main", "#4b310b")
.add("--palette-warning-text-dark", "#4b3616")
.add("--palette-warning-text-light", "#482400")
/*INFO*/
.add("--palette-info-main", "#29b6f6")
.add("--palette-info-dark", "#4fc3f7")
.add("--palette-info-light", "#0288d1")
.add("--palette-info-text-main", "#0c3649")
.add("--palette-info-text-dark", "#173949")
.add("--palette-info-text-light", "#b3dbf1")
/*SUCCESS*/
.add("--palette-success-main", "#599062")
.add("--palette-success-dark", "#81c784")
.add("--palette-success-light", "#388e3c")
.add("--palette-success-text-main", "#1e371f")
.add("--palette-success-text-dark", "#263b27")
.add("--palette-success-text-light", "#c3ddc5");
CedroLightTheme.add("--palette-text-primary", "#4f3e2e")
.add("--palette-text-secondary", "rgba(0, 0, 0, 0.6)")
.add("--palette-text-disabled", "rgba(0, 0, 0, 0.38)")
.add("--palette-background-default", "#ffffff")
.add("--palette-background-paper", "#ffffff")
.add("--palette-background-light", "rgba(250, 243, 235, 0.5)")
.add("--palette-action-active", "rgba(0, 0, 0, 0.54)")
.add("--palette-action-disabled", "#ffe2ba")
.add("--palette-action-hover", "#f5f5f5")
.add("--palette-action-selected", "rgba(0, 0, 0, 0.08)")
.add("--palette-action-disabled-bg", "rgba(0, 0, 0, 0.12)")
.add("--palette-divider", "#ffe2ba")
.add("--palette-link", "#1d79ee")
.add("--palette-link-hover", "#3393f2")
/*PRIMARY*/
.add("--palette-primary-main", "#baf990")
.add("--palette-primary-dark", "#9bce79")
.add("--palette-primary-light", "#d1ffb2")
.add("--palette-primary-text-main", "#2a3b49")
.add("--palette-primary-text-dark", "#133048")
.add("--palette-primary-text-light", "#43474b")
/*SECONDARY*/
.add("--palette-secondary-main", "#ce93d8")
.add("--palette-secondary-dark", "#ab47bc")
.add("--palette-secondary-light", "#f3e5f5")
.add("--palette-secondary-text-main", "#3d2b40")
.add("--palette-secondary-text-dark", "#e6c8eb")
.add("--palette-secondary-text-light", "#484348")
/*ERROR*/
.add("--palette-error-main", "#f44336")
.add("--palette-error-dark", "#d32f2f")
.add("--palette-error-light", "#e57373")
.add("--palette-error-text-main", "#fbc7c3")
.add("--palette-error-text-dark", "#f1c1c1")
.add("--palette-error-text-light", "#432222")
/*WARNING*/
.add("--palette-warning-main", "#ffa726")
.add("--palette-warning-dark", "#ffb74d")
.add("--palette-warning-light", "#f57c00")
.add("--palette-warning-text-main", "#4b310b")
.add("--palette-warning-text-dark", "#4b3616")
.add("--palette-warning-text-light", "#482400")
/*INFO*/
.add("--palette-info-main", "#29b6f6")
.add("--palette-info-dark", "#4fc3f7")
.add("--palette-info-light", "#0288d1")
.add("--palette-info-text-main", "#0c3649")
.add("--palette-info-text-dark", "#173949")
.add("--palette-info-text-light", "#b3dbf1")
/*SUCCESS*/
.add("--palette-success-main", "#66bb6a")
.add("--palette-success-dark", "#81c784")
.add("--palette-success-light", "#388e3c")
.add("--palette-success-text-main", "#1e371f")
.add("--palette-success-text-dark", "#263b27")
.add("--palette-success-text-light", "#c3ddc5");
export class ThemeManager implements IThemeManager {
themes: ITheme[];
current: ITheme | null;
constructor() {
this.themes = [];
this.current = null;
}
public toggleTheme(): void {
if (this.current) {
if (this.current.name === "dark") {
this.setTheme("light");
return;
} else {
this.setTheme("dark");
return;
}
}
this.setTheme("light");
}
public load(): void {
const storageThemeName = localStorage.getItem("papertrade-theme");
if (storageThemeName) {
this.setTheme(storageThemeName);
return;
}
this.setTheme("light");
}
public add(theme: ITheme): void {
this.themes.push(theme);
}
public get(name: string): ITheme | null {
for (const theme of this.themes) {
if (theme.name === name) {
return theme;
}
}
return null;
}
public setTheme(name: string): void {
this.current = this.get(name);
if (!this.current) return;
var root = document.querySelector(":root") as HTMLElement;
for (const prop of this.current.properties) {
const [name, value] = prop;
root.style.setProperty(name, value);
}
localStorage.setItem("papertrade-theme", this.current.name);
}
public getTheme(): string {
if (this.current) return this.current.name;
return "light";
}
}