sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Fixed darkmode

Browse source
This commit is contained in:
sageTheDM 2024-10-02 09:14:07 +02:00
parent d1ccd53f2a
commit 3788411d3a
1 changed files with 57 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/components/settings/theme.ts
View file

@ -92,7 +92,7 @@ export const applyBlackTheme = () => {
document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background
document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background
document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container
document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background document.documentElement.style.setProperty('--doc-background-color', '#000000'); // Dark document background
document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color
document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color
document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color
@ -113,7 +113,7 @@ export const applyBlackTheme = () => {
}; };
export const applyCustomTheme = () => { export const applyCustomTheme = () => {
const themeVariables = { const themeVariables = {
backgroundColor: localStorage.getItem('backgroundColor'), backgroundColor: localStorage.getItem('backgroundColor'),
headerBackground: localStorage.getItem('headerBackground'), headerBackground: localStorage.getItem('headerBackground'),
@ -169,7 +169,7 @@ export const applyCustomTheme = () => {
document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
}; };
// 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) => { export const applyTheme = (theme: string) => {