Skip to content

feat: Add comprehensive theme customization system#51

Draft
patrikpordi wants to merge 2 commits intomainfrom
feature/theme-system-improvements
Draft

feat: Add comprehensive theme customization system#51
patrikpordi wants to merge 2 commits intomainfrom
feature/theme-system-improvements

Conversation

@patrikpordi
Copy link
Contributor

  • Add theme.config.js for centralized theme configuration
  • Add theme.template.js with detailed documentation
  • Create preset themes (default, dark, blue)
  • Add THEMING.md guide with examples

Theme Features:

  • Branding: Configurable name, logo, and favicon
  • Colors: Full color palette with semantic naming (text/background vs black/white)
  • Layout: All spacing and sizing parameters now configurable
  • External links: Support for custom sidebar links with icons
  • Typography: Custom fonts support

Improvements:

  • Fixed hardcoded white colors in UI components
  • Dynamic browser title and favicon from theme config
  • External links (Flight Review + custom) with Font Awesome icons
  • All layout parameters (sidebar width, padding, transitions) now functional
  • Improved dark mode support

Modified Components:

  • App.vue: Dynamic theming system, favicon/title, custom links
  • ConnectionsPage.vue: Theme variable for toggle slider
  • ServicesPage.vue: Theme variable for slider background
  • HostnameManager.vue: Theme variable for modal background

- Add theme.config.js for centralized theme configuration
- Add theme.template.js with detailed documentation
- Create preset themes (default, dark, blue)
- Add THEMING.md guide with examples

Theme Features:
- Branding: Configurable name, logo, and favicon
- Colors: Full color palette with semantic naming (text/background vs black/white)
- Layout: All spacing and sizing parameters now configurable
- External links: Support for custom sidebar links with icons
- Typography: Custom fonts support

Improvements:
- Fixed hardcoded white colors in UI components
- Dynamic browser title and favicon from theme config
- External links (Flight Review + custom) with Font Awesome icons
- All layout parameters (sidebar width, padding, transitions) now functional
- Improved dark mode support

Modified Components:
- App.vue: Dynamic theming system, favicon/title, custom links
- ConnectionsPage.vue: Theme variable for toggle slider
- ServicesPage.vue: Theme variable for slider background
- HostnameManager.vue: Theme variable for modal background
- Restored theme.config.js to match original ARK-OS appearance
- Fixed white color in default.theme.js (was incorrectly rgba(219, 73, 73, 1))
- Updated to use semantic property names (text/background vs black/white)
- Ensures PR doesn't change default appearance while maintaining full customization capability
@dakejahl dakejahl marked this pull request as draft February 24, 2026 01:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant