mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
3c2f5d12ed
* chore: add next theme and initial setup * chore: add dark mode colors to layouts * chore: user general setting page theming * chore: dashboard theming * chore: project page theming * chore: workspace setting page theming * chore: my issue page theming * chore: cmdk theming * chore: change hardcode bg and text color to theme * chore: change color name according to the design * style: fix card in the dashboard * style: fix merge conflict design issues * style: add light high contrast and dark high contrast * style: fix cmd k menu color and selection * feat: change theme from cmdk menu * chore: add multiple theme field to custom theme * chore: removed custom theming * fix: build error --------- Co-authored-by: Saheb Giri <iamsahebgiri@gmail.com>
36 lines
967 B
TypeScript
36 lines
967 B
TypeScript
export const hexToRgb = (hex: string) => {
|
|
hex = hex.toLowerCase();
|
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
return result
|
|
? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)].join(",")
|
|
: null;
|
|
};
|
|
|
|
export const applyTheme = (palette: string, isDarkPalette: boolean) => {
|
|
const values: string[] = [];
|
|
palette.split(",").map((color: string) => {
|
|
const cssVarColor = hexToRgb(color);
|
|
if (cssVarColor) values.push(cssVarColor);
|
|
});
|
|
|
|
const cssVars = [
|
|
"--color-bg-base",
|
|
"--color-bg-surface-1",
|
|
"--color-bg-surface-2",
|
|
"--color-border",
|
|
"--color-bg-sidebar",
|
|
"--color-accent",
|
|
"--color-text-base",
|
|
"--color-text-secondary",
|
|
"color-scheme",
|
|
];
|
|
|
|
values.push(isDarkPalette ? "dark" : "light");
|
|
|
|
cssVars.forEach((cssVar, i) =>
|
|
document
|
|
.querySelector<HTMLElement>("[data-theme='custom']")
|
|
?.style.setProperty(cssVar, values[i])
|
|
);
|
|
};
|