mirror/Cleanuparr
1
0
Fork 0
mirror of https://github.com/Cleanuparr/Cleanuparr.git synced 2026-06-12 07:45:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

theme

Browse Source
This commit is contained in:
Flaminel
2025-05-23 20:18:04 +03:00
parent 2a55ad456c
commit aa3ec6c49c
2 changed files with 147 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
code/UI/src/app/core/services/theme.service.ts
View File

@@ -5,57 +5,60 @@ import { Injectable } from '@angular/core';
})
export class ThemeService {
private readonly THEME_KEY = 'app-theme';
private currentTheme: 'light' | 'dark' = 'light';
private currentTheme: 'dark' = 'dark'; // Always dark mode
constructor() {
this.initializeTheme();
}
initializeTheme(): void {
// Check if there's a saved theme preference
const savedTheme = localStorage.getItem(this.THEME_KEY);
if (savedTheme === 'dark' || savedTheme === 'light') {
this.currentTheme = savedTheme;
} else {
// Check system preference if no saved preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
this.currentTheme = prefersDark ? 'dark' : 'light';
}
// Apply the theme
this.applyTheme(this.currentTheme);
// Always use dark theme with purple accent
this.applyDarkPurpleTheme();
// Save the theme preference
localStorage.setItem(this.THEME_KEY, this.currentTheme);
}
switchTheme(theme: 'light' | 'dark'): void {
this.currentTheme = theme;
this.applyTheme(theme);
localStorage.setItem(this.THEME_KEY, theme);
}
private applyTheme(theme: 'light' | 'dark'): void {
/**
* Apply the dark purple theme to the document
* This is now the only theme for the application
*/
private applyDarkPurpleTheme(): void {
const documentElement = document.documentElement;
if (theme === 'dark') {
documentElement.classList.add('dark');
documentElement.style.colorScheme = 'dark';
} else {
documentElement.classList.remove('dark');
documentElement.style.colorScheme = 'light';
}
// Set dark mode
documentElement.classList.add('dark');
documentElement.style.colorScheme = 'dark';
// Update PrimeNG theme
// Apply custom CSS variables for purple accent
documentElement.style.setProperty('--primary-color', '#7E57C2');
documentElement.style.setProperty('--primary-color-text', '#ffffff');
documentElement.style.setProperty('--primary-dark', '#5E35B1');
documentElement.style.setProperty('--primary-light', '#B39DDB');
// Additional dark theme variables
documentElement.style.setProperty('--surface-ground', '#121212');
documentElement.style.setProperty('--surface-section', '#1E1E1E');
documentElement.style.setProperty('--surface-card', '#262626');
documentElement.style.setProperty('--surface-overlay', '#2A2A2A');
documentElement.style.setProperty('--surface-border', '#383838');
documentElement.style.setProperty('--text-color', '#F5F5F5');
documentElement.style.setProperty('--text-color-secondary', '#BDBDBD');
documentElement.style.setProperty('--text-color-disabled', '#757575');
// Update PrimeNG theme to dark
const linkElement = document.getElementById('app-theme') as HTMLLinkElement;
if (linkElement) {
linkElement.href = `lara-${theme}.css`;
linkElement.href = 'lara-dark.css';
}
}
getCurrentTheme(): 'light' | 'dark' {
// Public API methods kept for compatibility
getCurrentTheme(): 'dark' {
return this.currentTheme;
}
isDarkMode(): boolean {
return this.currentTheme === 'dark';
return true; // Always dark mode
}
}