refactor(theme): add theme component, remove duplicate color definitions (@fehmer)

[fehmer]

• move all colors to constants/themes
• remove now empty css files
• add Theme component to apply css variables and load additional css files if needed
• use effect for chart.updateColors
• use component for head elements favicon and metaThemeColor
• rework related code

[Miodec]

@copilot only serika dark, darling and dots are converted on this pr. convert the rest

[Copilot]

@Miodec I've opened a new pull request, #7371, to work on those changes. Once the pull request is ready, I'll request review from you.

[Copilot]

Pull request overview

This PR refactors theme handling by consolidating all color definitions from individual CSS files into a centralized TypeScript constants file. It removes now-empty CSS files, introduces a new Theme SolidJS component to dynamically apply CSS variables, and updates all related code to work with the new architecture.

Changes:

• Consolidated all theme color definitions into frontend/src/ts/constants/themes.ts
• Removed duplicate color CSS variable definitions from individual theme CSS files
• Created new Theme SolidJS component to dynamically apply CSS variables and load theme-specific CSS files
• Updated theme-related code throughout the application to use the new centralized theme colors

Reviewed changes

Copilot reviewed 215 out of 216 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
frontend/static/themes/*.css	Removed :root CSS variable blocks from all theme files (keeping only additional CSS rules)
frontend/src/ts/constants/themes.ts	Would need to verify this file contains all theme definitions
frontend/src/ts/signals/theme.ts	Updated to export Theme type and removed ThemeColors duplicate definition
frontend/src/ts/components/layout/Theme.tsx	New SolidJS component for managing theme CSS variables and loading theme-specific CSS
frontend/src/ts/elements/theme-colors.ts	Deleted file (functionality moved to signals)
frontend/src/ts/controllers/theme-controller.ts	Refactored to work with centralized theme definitions
frontend/src/ts/elements/settings/theme-picker.ts	Updated to use new theme color management approach
frontend/src/html/pages/settings.html	Updated color picker IDs to use data-key attributes
frontend/src/index.html	Removed hardcoded theme link
frontend/src/html/head.html	Added Theme component mount point
Multiple TS files	Updated imports and function calls to use new theme color getters

Comments suppressed due to low confidence (1)

frontend/src/html/pages/settings.html:1606

• Inconsistent ID naming. This input has id='--sub-color' but should be id='colorPickerSub' to match the naming pattern used by all other color picker inputs in the same settings panel.

                  id="--sub-color"

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

[github-actions]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

[Copilot]

Pull request overview

Copilot reviewed 228 out of 230 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

[github-actions]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		Obfuscated code: npm vite is 91.0% likely obfuscated Confidence: 0.91 Location: Package overview From: pnpm-lock.yaml → npm/vite@7.1.12 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/vite@7.1.12. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report