forked from React-Group/interstellar_ai
theme comments
This commit is contained in:
parent
621daf6669
commit
def7c3abd7
1 changed files with 7 additions and 3 deletions
|
@ -1,3 +1,4 @@
|
||||||
|
//#region IOMARKET
|
||||||
export const applyIOMarketTheme = () => {
|
export const applyIOMarketTheme = () => {
|
||||||
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e');
|
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e');
|
||||||
document.documentElement.style.setProperty('--header-text-color', '#ffffff');
|
document.documentElement.style.setProperty('--header-text-color', '#ffffff');
|
||||||
|
@ -35,7 +36,7 @@ export const applyIOMarketTheme = () => {
|
||||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
|
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
|
||||||
document.documentElement.style.setProperty('--font-size', '16px');
|
document.documentElement.style.setProperty('--font-size', '16px');
|
||||||
};
|
};
|
||||||
|
//#region WHITE
|
||||||
export const applyWhiteTheme = () => {
|
export const applyWhiteTheme = () => {
|
||||||
document.documentElement.style.setProperty('--header-background-color', '#f0f0f0'); // Lighter header background
|
document.documentElement.style.setProperty('--header-background-color', '#f0f0f0'); // Lighter header background
|
||||||
document.documentElement.style.setProperty('--header-text-color', '#333'); // Dark text for contrast
|
document.documentElement.style.setProperty('--header-text-color', '#333'); // Dark text for contrast
|
||||||
|
@ -73,7 +74,7 @@ export const applyWhiteTheme = () => {
|
||||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Same font family
|
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Same font family
|
||||||
document.documentElement.style.setProperty('--font-size', '16px'); // Same font size
|
document.documentElement.style.setProperty('--font-size', '16px'); // Same font size
|
||||||
};
|
};
|
||||||
|
//#region BLACK
|
||||||
export const applyBlackTheme = () => {
|
export const applyBlackTheme = () => {
|
||||||
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
|
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
|
||||||
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // White text for header
|
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // White text for header
|
||||||
|
@ -112,7 +113,7 @@ export const applyBlackTheme = () => {
|
||||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||||
|
|
||||||
};
|
};
|
||||||
|
//#region CUSTOM
|
||||||
export const applyCustomTheme = () => {
|
export const applyCustomTheme = () => {
|
||||||
if (typeof localStorage !== 'undefined') {
|
if (typeof localStorage !== 'undefined') {
|
||||||
const themeVariables = {
|
const themeVariables = {
|
||||||
|
@ -191,6 +192,8 @@ export const applyCustomTheme = () => {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//#region BASIC-CUSTOM
|
||||||
|
|
||||||
// TypeScript types for color parameters
|
// TypeScript types for color parameters
|
||||||
type Color = string;
|
type Color = string;
|
||||||
|
|
||||||
|
@ -277,6 +280,7 @@ const lightenColor = (color: Color, percent: number): Color => {
|
||||||
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
|
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//#region APPLY-THEME
|
||||||
// This is the new function that calls the appropriate theme application
|
// This is the new function that calls the appropriate theme application
|
||||||
export const applyTheme = (theme: string, primary: string, secondary: string, accent: string, background: string, text: string) => {
|
export const applyTheme = (theme: string, primary: string, secondary: string, accent: string, background: string, text: string) => {
|
||||||
switch (theme) {
|
switch (theme) {
|
||||||
|
|
Loading…
Reference in a new issue