feat: add dark mode for OcDatePicker#1235
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds dark mode support to the OcDatePicker component, enabling the date picker to adapt its appearance based on the current theme. The implementation uses the color-scheme: dark CSS property to activate browser-native dark styling for date inputs.
- Added
isDarkprop to OcDatePicker component - Integrated theme store across components using OcDatePicker
- Added CSS styling for dark mode date picker appearance
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/design-system/src/components/OcDatepicker/OcDatepicker.vue | Added isDark prop and dark mode CSS styling |
| packages/web-runtime/src/components/Modals/AppTokenModal.vue | Added theme store integration and isDark prop binding |
| packages/web-pkg/src/components/Modals/DatePickerModal.vue | Added theme store integration and isDark prop binding |
| packages/web-pkg/src/components/Filters/DateFilter.vue | Added theme store integration and isDark prop binding |
| packages/web-pkg/src/components/CreateLinkModal.vue | Added theme store integration and isDark prop binding |
| packages/design-system/src/components/OcDatepicker/OcDatepicker.spec.ts | Updated tests to include required isDark prop |
| packages/design-system/docs/components/OcDatepicker/handler.vue | Added isDark prop to documentation example |
| packages/design-system/docs/components/OcDatepicker/default.vue | Added isDark prop to documentation example |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
packages/design-system/src/components/OcDatepicker/OcDatepicker.vue
Outdated
Show resolved
Hide resolved
packages/design-system/src/components/OcDatepicker/OcDatepicker.vue
Outdated
Show resolved
Hide resolved
| } | ||
|
|
||
| .oc-date-picker-dark input::-webkit-calendar-picker-indicator { | ||
| filter: invert(0); |
There was a problem hiding this comment.
The filter: invert(0) rule appears to be a no-op since it doesn't change the appearance. Consider removing this rule or clarifying its purpose with a comment if it's intentionally preventing other filter applications.
| filter: invert(0); |
|
@JammingBen should I move the css to the tailwind component, even if there are no matching utility classes to apply ? |
AlexAndBear
force-pushed
the
issues/1224
branch
from
a2e8635 to
35a4f31
Compare
I'd say yes, or at least to the already existing style block to avoid having 2 style blocks. |
👍 adjusted |
Description
Enables the dark mode for the date picker. Note this works with Chrome-Like browsers and Safari but not with Firefox
Related Issue
How Has This Been Tested?
Types of changes