Feature/469 intro dark mode #477
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Added CpsThemeService for managing light/dark theme switching with persistence in localStorage. - Introduced dark theme color palette in _colors-dark.scss. - Updated various components (cps-progress-linear, cps-tab-group, cps-confirmation, cps-dialog) to use new color variables for better consistency and theming. - Enhanced styles for scrollbar customization. - Added unit tests for CpsThemeService to ensure functionality.
TerranceKhumalo-absa
requested review from
korel-san and
lukasmatta
as code owners
Coverage report for library
Test suite run success419 tests passing in 21 suites. Report generated by 🧪jest coverage report action from 4f7c57b |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new theme toggle feature and standardizes color usage throughout the application to improve consistency and support theming. It adds a
ThemeToggleComponentto the top toolbar, updates SCSS variables and component styles to use new CSS custom properties, and ensures that all UI elements respond to theme changes. Additionally, new icons are added to support the theme toggle button.Resolves #469
Theme and Color Standardization
ThemeToggleComponent(theme-toggle.component.ts) and integrated it into the top toolbar (app.component.html,app.component.scss,app.module.ts) to allow users to switch between light and dark modes. [1] [2] [3] [4] [5]--cps-accent-primary,--cps-text-primary) for backgrounds, borders, and text, enabling consistent theming. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19]Icon Support
sunandmoonicons to the icon set to visually represent theme switching in the toggle button. [1] [2]Component and UI Enhancements
Minor Updates
These changes collectively enhance the application's visual consistency, accessibility, and user experience by supporting dynamic theming and standardized color usage.
Release notes: