Feature/469 intro dark alternative#480
Conversation
…stency across components
TerranceKhumalo-absa
requested review from
korel-san and
lukasmatta
as code owners
Coverage report for library
Test suite run success424 tests passing in 21 suites. Report generated by 🧪jest coverage report action from 7ca87c8 |
There was a problem hiding this comment.
Pull request overview
This pull request introduces comprehensive dark mode support and theme customization to the CPS UI Kit. It adds a CpsThemeService for managing theme state using Angular signals, creates a ThemeToggleComponent for user-facing theme controls, and systematically updates component styles to use new CSS custom properties. The PR also includes new sun and moon icons to support the theme toggle UI.
Changes:
- Added
CpsThemeServicewith signal-based state management for theme, color scheme, radius, and base variants - Created
ThemeToggleComponentwith a dropdown menu for comprehensive appearance customization - Introduced dark theme color palette in
_colors-dark.scsswith WCAG AA compliant colors - Migrated component styles from hardcoded colors to semantic CSS custom properties (e.g.,
--cps-accent-primary,--cps-text-primary) - Added sun and moon icons to the icon set
Reviewed changes
Copilot reviewed 29 out of 31 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
projects/cps-ui-kit/src/lib/services/cps-theme/cps-theme.service.ts |
New service for theme management with localStorage persistence and system preference detection |
projects/cps-ui-kit/src/lib/services/cps-theme/cps-theme.service.spec.ts |
Unit tests for theme service |
projects/cps-ui-kit/styles/_colors.scss |
Extended with semantic design tokens and theme variants |
projects/cps-ui-kit/styles/_colors-dark.scss |
New dark theme color palette |
projects/cps-ui-kit/styles/styles.scss |
Added custom scrollbar styles and global theming |
projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.scss |
Migrated to semantic color tokens and added theme support |
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.scss |
Updated to use new color variables |
projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.scss |
Updated styling for theme compatibility |
projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.scss |
Updated to use accent colors |
projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts |
Added sun and moon to icon names |
projects/cps-ui-kit/assets/icons.svg |
Added sun and moon icon SVG definitions |
projects/composition/src/app/components/theme-toggle/theme-toggle.component.ts |
New component for theme customization UI |
projects/composition/src/app/components/theme-toggle/theme-toggle.component.html |
Theme toggle template with appearance menu |
projects/composition/src/app/components/theme-toggle/theme-toggle.component.scss |
Styles for theme toggle component |
projects/composition/src/app/app.component.html |
Integrated theme toggle into top toolbar |
projects/composition/src/app/app.component.scss |
Updated with new color variables |
projects/composition/src/app/app.module.ts |
Added ThemeToggleComponent to imports |
projects/cps-ui-kit/src/public-api.ts |
Exported CpsThemeService |
package-lock.json |
Dependency metadata updates |
projects/composition/src/app/components/theme-toggle/theme-toggle.component.html
Outdated
Show resolved
Hide resolved
projects/cps-ui-kit/src/lib/services/cps-theme/cps-theme.service.ts
Outdated
Show resolved
Hide resolved
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.scss
Outdated
Show resolved
Hide resolved
projects/composition/src/app/components/theme-toggle/theme-toggle.component.ts
Show resolved
Hide resolved
projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.scss
Outdated
Show resolved
Hide resolved
projects/composition/src/app/components/theme-toggle/theme-toggle.component.ts
Show resolved
Hide resolved
| } | ||
| } | ||
| ._active { | ||
| color: white; |
| <button | ||
| class="theme-toggle-btn" | ||
| (click)="toggleTheme()" | ||
| [attr.aria-label]=" | ||
| isDark() ? 'Switch to light mode' : 'Switch to dark mode' | ||
| " | ||
| type="button"> |
There was a problem hiding this comment.
@TerranceKhumalo-absa could we expose the toggle state with aria-pressed or role="switch" + aria-checked? Right now the icon button only has a label.
There was a problem hiding this comment.
@TerranceKhumalo-absa in projects/composition/src/app/app.component.spec.ts could we import ThemeToggleComponent in the test module? ng test logs app-theme-toggle is not a known element, which masks template errors.
There was a problem hiding this comment.
@TerranceKhumalo-absa in the header comment claims WCAG AA contrast compliance. would you add or link to contrast verification (pa11y/contrast matrix)?
There was a problem hiding this comment.
@TerranceKhumalo-absa I'm not sure was it intended or not, so I'll just gather the list suspicious props in files:
projects/composition/src/app/pages/menu-page/menu-page.component.scss:12 color: red;
projects/composition/src/app/pages/table-page/table-page.component.scss:4 color: red;
There was a problem hiding this comment.
@TerranceKhumalo-absa here the same, I was not sure was it intended or not, so I gathered the list of suspicious props in files:
projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.scss:51
projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.scss:75
projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.scss:61
projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.scss:16
projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.scss:177
projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.scss:178
projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.scss:120
projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.scss:74
projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.scss:76
projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.scss:36
projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.scss:76
projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.scss:94
projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.scss:145
projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.scss:148
projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.scss:185
projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss:67
projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss:164
projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss:403
projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss:416
projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss:555
projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss:653
projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.scss:12
projects/cps-ui-kit/src/lib/components/cps-textarea/cps-textarea.component.scss:64
projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss:143
projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss:526
projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss:538
projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss:602
projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss:793
projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss:806
projects/cps-ui-kit/styles/_colors-dark.scss:296
projects/cps-ui-kit/styles/_colors-dark.scss:318
projects/cps-ui-kit/styles/_colors-dark.scss:421
projects/cps-ui-kit/styles/_colors-dark.scss:422
projects/cps-ui-kit/styles/_colors-dark.scss:424
projects/cps-ui-kit/styles/_colors-dark.scss:433
projects/cps-ui-kit/styles/_colors-dark.scss:434
projects/cps-ui-kit/styles/_colors-dark.scss:436
projects/cps-ui-kit/styles/_colors-dark.scss:445
projects/cps-ui-kit/styles/_colors-dark.scss:446
projects/cps-ui-kit/styles/_colors-dark.scss:448
2 participants
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: