We've encountered a limitation in our current design token CSS implementation that affects the dynamic switching between light and dark themes. Specifically, our setup allows for theme changes using data-theme="dark" to adjust CSS variable values for dark mode, but there's no equivalent mechanism for light mode. This means that changing the mode of a parent element and its children to light mode dynamically (using something like data-theme="light") does not work as expected, since the default light mode styles are defined at the root level without a corresponding data attribute selector.
Technical Details
Our current CSS for theme management defines variables at the root level for the default (light) theme and overrides these for the dark theme using [data-theme="dark"].
This approach does not support dynamically switching back to light mode on specific sections of the application if dark mode is enabled globally or vice versa.
Acceptance Criteria
Implement a consistent and flexible theme-switching mechanism that allows for both light and dark modes to be toggled at any level of the application (globally or on specific components/sections).
Ensure that when data-theme="light" is specified, the light theme is applied correctly, overriding any parent or global dark theme settings.
Update the CSS so that both light and dark mode variables are explicitly defined and can be toggled with data-theme attributes.
Test the updated theme-switching mechanism to ensure it works seamlessly across the application without causing visual regressions or unexpected behavior.
Proposed Solution
Refactor the CSS variable definitions to include a [data-theme="light"] selector that explicitly sets the variables for light mode, similar to how dark mode is currently handled.
Ensure that the root variable definitions serve as fallbacks and are overridden by [data-theme="light"] and [data-theme="dark"] as needed.
Document the updated approach to theme switching in the project's style guide or README to ensure all team members are aware of how to implement theme-specific styles moving forward.
Additional Notes
This change is crucial for supporting dynamic theme changes within our application, enhancing the user experience by allowing for more granular control over appearance settings. It's important to thoroughly test the implementation to ensure compatibility and consistency across all components and sections of the application.
Description
We've encountered a limitation in our current design token CSS implementation that affects the dynamic switching between light and dark themes. Specifically, our setup allows for theme changes using
data-theme="dark"to adjust CSS variable values for dark mode, but there's no equivalent mechanism for light mode. This means that changing the mode of a parent element and its children to light mode dynamically (using something likedata-theme="light") does not work as expected, since the default light mode styles are defined at the root level without a corresponding data attribute selector.Technical Details
[data-theme="dark"].Acceptance Criteria
data-theme="light"is specified, the light theme is applied correctly, overriding any parent or global dark theme settings.data-themeattributes.Proposed Solution
[data-theme="light"]selector that explicitly sets the variables for light mode, similar to how dark mode is currently handled.[data-theme="light"]and[data-theme="dark"]as needed.Additional Notes
This change is crucial for supporting dynamic theme changes within our application, enhancing the user experience by allowing for more granular control over appearance settings. It's important to thoroughly test the implementation to ensure compatibility and consistency across all components and sections of the application.