Feature/469 intro dark alternative

[TerranceKhumalo-absa]

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 ThemeToggleComponent to 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

• Added 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]
• Updated SCSS variables and component styles across the app and UI kit to use new CSS custom properties (e.g., --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

• Added sun and moon icons to the icon set to visually represent theme switching in the toggle button. [1] [2]

Component and UI Enhancements

• Improved button, button-toggle, file-upload, and input components to use the new color variables and respond visually to theme changes and states (hover, active, disabled, error). [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

Minor Updates

• Adjusted tab and icon colors for improved visual clarity and consistency with the new theme. [1] [2] [3]

These changes collectively enhance the application's visual consistency, accessibility, and user experience by supporting dynamic theming and standardized color usage.

Release notes:

• Add dark mode support

[github-actions]

Coverage report for library

St.❔	Category	Percentage	Covered / Total
🔴	Statements	29.86%	1900/6363
🔴	Branches	23.5%	501/2132
🔴	Functions	25.27%	347/1373
🔴	Lines	30.75%	1799/5851

Test suite run success

424 tests passing in 21 suites.

Report generated by 🧪jest coverage report action from 7268edc

[Copilot]

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 CpsThemeService with signal-based state management for theme, color scheme, radius, and base variants
• Created ThemeToggleComponent with a dropdown menu for comprehensive appearance customization
• Introduced dark theme color palette in _colors-dark.scss with 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

[lukasmatta]

sidebar toggle icon is not visible in light mode (--cps-surface-body is very light and the icon is hard-coded white)

[lukasmatta]

Outline type buttons are hard to read in the dark mode, contrast ratio is only 1.38, is this planned to be fixed in a separate PR?