Refactor the existing styling system to use CSS variables (--color-primary, --bg-surface, --text-muted, etc.) to improve flexibility, performance, and maintainability of themes across the File Manager application.
Goals:
• Support dynamic theme switching (e.g., light/dark modes) without recompiling CSS.
• Define variables for colors, spacing, font sizes, and shadows in a centralized :root theme file.
• Ensure variables can be overridden per theme or via user/system preferences.
• Replace hardcoded values and Tailwind config overrides where applicable.
Suggestions:
• Use a global theme.css or themes/ directory with modular files (e.g., light.css, dark.css).
• Provide fallback values for variables to ensure compatibility across browsers.
• Test theme switching performance and color contrast accessibility (WCAG AA+).
Refactor the existing styling system to use CSS variables (--color-primary, --bg-surface, --text-muted, etc.) to improve flexibility, performance, and maintainability of themes across the File Manager application.
Goals:
• Support dynamic theme switching (e.g., light/dark modes) without recompiling CSS.
• Define variables for colors, spacing, font sizes, and shadows in a centralized :root theme file.
• Ensure variables can be overridden per theme or via user/system preferences.
• Replace hardcoded values and Tailwind config overrides where applicable.
Suggestions:
• Use a global theme.css or themes/ directory with modular files (e.g., light.css, dark.css).
• Provide fallback values for variables to ensure compatibility across browsers.
• Test theme switching performance and color contrast accessibility (WCAG AA+).