Profectus-Demo/src/data/themes.ts

125 lines
3.5 KiB
TypeScript
Raw Normal View History

2022-03-09 01:40:51 +00:00
export interface ThemeVars {
2022-01-14 04:25:47 +00:00
"--foreground": string;
"--background": string;
"--feature-foreground": string;
"--tooltip-background": string;
"--raised-background": string;
"--points": string;
"--locked": string;
"--highlighted": string;
"--bought": string;
"--danger": string;
"--link": string;
"--outline": string;
"--accent1": string;
"--accent2": string;
"--accent3": string;
"--border-radius": string;
"--modal-border": string;
"--feature-margin": string;
}
export interface Theme {
variables: ThemeVars;
floatingTabs: boolean;
mergeAdjacent: boolean;
2022-04-23 19:48:25 +00:00
showPin: boolean;
2022-01-14 04:25:47 +00:00
}
declare module "@vue/runtime-dom" {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface CSSProperties extends Partial<ThemeVars> {}
}
const defaultTheme: Theme = {
variables: {
2021-09-04 21:51:41 +00:00
"--foreground": "#dfdfdf",
"--background": "#0f0f0f",
"--feature-foreground": "#0f0f0f",
2021-09-04 21:51:41 +00:00
"--tooltip-background": "rgba(0, 0, 0, 0.75)",
"--raised-background": "#0f0f0f",
"--points": "#ffffff",
"--locked": "#bf8f8f",
2021-09-04 21:51:41 +00:00
"--highlighted": "#333",
"--bought": "#77bf5f",
"--danger": "rgb(220, 53, 69)",
2021-09-04 21:51:41 +00:00
"--link": "#02f2f2",
"--outline": "#dfdfdf",
2021-09-05 03:02:13 +00:00
"--accent1": "#627a82",
"--accent2": "#658262",
"--accent3": "#7c6282",
2021-09-04 21:51:41 +00:00
"--border-radius": "15px",
"--modal-border": "solid 2px var(--color)",
"--feature-margin": "0px"
},
floatingTabs: true,
2022-04-23 19:48:25 +00:00
mergeAdjacent: true,
showPin: true
};
export enum Themes {
Classic = "classic",
Paper = "paper",
2021-08-26 23:15:05 +00:00
Nordic = "nordic",
Aqua = "aqua"
}
export default {
classic: defaultTheme,
paper: {
...defaultTheme,
variables: {
...defaultTheme.variables,
"--background": "#2a323d",
2021-09-04 21:51:41 +00:00
"--feature-foreground": "#000",
"--raised-background": "#333c4a",
"--locked": "#3a3e45",
"--bought": "#5C8A58",
2021-09-04 21:51:41 +00:00
"--outline": "#333c4a",
"--border-radius": "4px",
"--modal-border": "",
"--feature-margin": "5px"
},
floatingTabs: false
} as Theme,
2021-08-26 23:15:05 +00:00
// Based on https://www.nordtheme.com
nordic: {
...defaultTheme,
variables: {
...defaultTheme.variables,
2021-09-04 21:51:41 +00:00
"--foreground": "#D8DEE9",
2021-08-26 23:15:05 +00:00
"--background": "#2E3440",
2021-09-04 21:51:41 +00:00
"--feature-foreground": "#000",
"--raised-background": "#3B4252",
"--points": "#E5E9F0",
"--locked": "#4c566a",
"--highlighted": "#434c5e",
2021-08-26 23:15:05 +00:00
"--bought": "#8FBCBB",
2021-09-04 21:51:41 +00:00
"--danger": "#D08770",
2021-08-26 23:15:05 +00:00
"--link": "#88C0D0",
2021-09-04 21:51:41 +00:00
"--outline": "#3B4252",
2021-09-05 03:02:13 +00:00
"--accent1": "#B48EAD",
"--accent2": "#A3BE8C",
"--accent3": "#EBCB8B",
2021-08-26 23:15:05 +00:00
"--border-radius": "4px",
"--modal-border": "solid 2px #3B4252",
"--feature-margin": "5px"
},
floatingTabs: false
} as Theme,
aqua: {
...defaultTheme,
variables: {
...defaultTheme.variables,
2021-09-04 21:51:41 +00:00
"--foreground": "#bfdfff",
"--background": "#001f3f",
2021-09-04 21:51:41 +00:00
"--tooltip-background": "rgba(0, 15, 31, 0.75)",
"--raised-background": "#001f3f",
"--points": "#dfefff",
"--locked": "#c4a7b3",
2021-09-04 21:51:41 +00:00
"--outline": "#bfdfff"
}
} as Theme
} as Record<Themes, Theme>;