feat: add dark mode for OcDatePicker

packages/design-system/src/components/OcDatepicker/OcDatepicker.spec.ts

@@ -5,23 +5,31 @@ import { nextTick } from 'vue'
 
 describe('OcDatePicker', () => {
   it('renders', () => {
-    const wrapper = getWrapper({ label: 'Datepicker label' })
+    const wrapper = getWrapper({ label: 'Datepicker label', isDark: false })
     expect(wrapper.html()).toMatchSnapshot()
   })
   it('sets the initial date correctly', async () => {
-    const wrapper = getWrapper({ label: 'Datepicker label', currentDate: DateTime.now() })
+    const wrapper = getWrapper({
+      label: 'Datepicker label',
+      currentDate: DateTime.now(),
+      isDark: false
+    })
     await nextTick()
     const inputEl = wrapper.find('.oc-text-input').element as HTMLInputElement
     expect(inputEl.value).toEqual(DateTime.now().toISODate())
   })
   it('sets the minimum date correctly', async () => {
-    const wrapper = getWrapper({ label: 'Datepicker label', minDate: DateTime.now() })
+    const wrapper = getWrapper({
+      label: 'Datepicker label',
+      minDate: DateTime.now(),
+      isDark: false
+    })
     await nextTick()
     const inputEl = wrapper.find('.oc-text-input')
     expect(inputEl.attributes('min')).toEqual(DateTime.now().toISODate())
   })
   it('emits event on date change', async () => {
-    const wrapper = getWrapper({ label: 'Datepicker label' })
+    const wrapper = getWrapper({ label: 'Datepicker label', isDark: false })
     const inputEl = wrapper.find('.oc-text-input')
     await inputEl.setValue(DateTime.now().toISODate())
     expect(wrapper.emitted('dateChanged')).toBeTruthy()

packages/design-system/src/components/OcDatepicker/OcDatepicker.vue

@@ -10,6 +10,7 @@
     :clear-button-enabled="isClearable"
     :clear-button-accessible-label="$gettext('Clear date')"
     class="oc-date-picker"
+    :class="{ 'oc-date-picker-dark': isDark }"
   />
 </template>
 
@@ -35,6 +36,11 @@ export interface Props {
    * @docs Minimum date that can be selected. Dates before this date will be disabled.
    */
   minDate?: DateTime
+  /**
+   * @docs Dark theme for the date picker.
+   * Dark theme is only available for Chromium-like browsers and Safari, Firefox is not supported.
+   */
+  isDark?: boolean
 }
 
 export interface Emits {
@@ -44,7 +50,7 @@ export interface Emits {
   (e: 'dateChanged', data: { date: DateTime | null; error: boolean }): void
 }
 
-const { label, currentDate, isClearable = true, minDate } = defineProps<Props>()
+const { label, currentDate, isClearable = true, minDate, isDark = false } = defineProps<Props>()
 
 const emit = defineEmits<Emits>()
 
@@ -101,5 +107,13 @@ watch(
   .oc-date-picker input::-webkit-calendar-picker-indicator {
     @apply cursor-pointer;
   }
+
+  .oc-date-picker-dark input {
+    color-scheme: dark;
+  }
+
+  .oc-date-picker-dark input::-webkit-calendar-picker-indicator {
+    filter: invert(0);
+  }
 }
 </style>

packages/web-pkg/src/components/CreateLinkModal.vue

@@ -50,6 +50,7 @@
       class="mt-2"
       :min-date="DateTime.now()"
       :label="$gettext('Expiry date')"
+      :is-dark="currentTheme.isDark"
       @date-changed="onExpiryDateChanged"
     />
   </div>
@@ -121,13 +122,15 @@ import {
   useLinkTypes,
   Modal,
   useSharesStore,
-  useClientService
+  useClientService,
+  useThemeStore
 } from '../composables'
 import { LinkShare, SpaceResource } from '@opencloud-eu/web-client'
 import { Resource } from '@opencloud-eu/web-client'
 import { OcButton } from '@opencloud-eu/design-system/components'
 import { SharingLinkType } from '@opencloud-eu/web-client/graph/generated'
 import LinkRoleDropdown from './LinkRoleDropdown.vue'
+import { storeToRefs } from 'pinia'
 
 type RoleRef = ComponentPublicInstance<typeof OcButton>
 
@@ -163,6 +166,9 @@ export default defineComponent({
       isPasswordEnforcedForLinkType
     } = useLinkTypes()
     const { addLink } = useSharesStore()
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
+
     const isAdvancedMode = ref(false)
     const isInvalidExpiryDate = ref(false)
 
@@ -329,6 +335,7 @@ export default defineComponent({
       onExpiryDateChanged,
       confirmButtonDisabled,
       DateTime,
+      currentTheme,
 
       // unit tests
       onConfirm

packages/web-pkg/src/components/Filters/DateFilter.vue

@@ -95,13 +95,15 @@
               :label="$gettext('From')"
               :is-clearable="true"
               :current-date="fromDate"
+              :is-dark="currentTheme.isDark"
               @date-changed="(value) => setDateRangeDate(value, 'from')"
             />
             <oc-datepicker
               :label="$gettext('To')"
               :is-clearable="true"
               :current-date="toDate"
               :min-date="fromDate ? fromDate : undefined"
+              :is-dark="currentTheme.isDark"
               @date-changed="(value) => setDateRangeDate(value, 'to')"
             />
           </div>
@@ -119,12 +121,13 @@
 <script lang="ts">
 import { PropType, computed, defineComponent, onMounted, ref, unref } from 'vue'
 import omit from 'lodash-es/omit'
-import { useRoute, useRouteQuery, useRouter } from '../../composables'
+import { useRoute, useRouteQuery, useRouter, useThemeStore } from '../../composables'
 import { formatDateFromDateTime } from '../../helpers'
 import { queryItemAsString } from '../../composables/appDefaults'
 import { DateTime } from 'luxon'
 import { useGettext } from 'vue3-gettext'
 import { OcFilterChip } from '@opencloud-eu/design-system/components'
+import { storeToRefs } from 'pinia'
 
 type Item = Record<string, string>
 
@@ -159,6 +162,8 @@ export default defineComponent({
     const router = useRouter()
     const { current: currentLanguage } = useGettext()
     const currentRoute = useRoute()
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
     const selectedItem = ref<Item>()
     const displayedItems = ref(props.items)
     const fromDate = ref<DateTime>()
@@ -320,6 +325,7 @@ export default defineComponent({
       dateRangeApplied,
       setDateRangeDate,
       dateRangeClicked,
+      currentTheme,
 
       // for unit tests
       queryParam

packages/web-pkg/src/components/Modals/DatePickerModal.vue

@@ -5,6 +5,7 @@
     :min-date="minDate"
     :current-date="currentDate"
     :is-clearable="isClearable"
+    :is-dark="currentTheme.isDark"
     required-mark
     @date-changed="onDateChanged"
   />
@@ -27,7 +28,8 @@
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue'
 import { DateTime } from 'luxon'
-import { Modal } from '../../composables/piniaStores'
+import { Modal, useThemeStore } from '../../composables/piniaStores'
+import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'DatePickerModal',
@@ -39,6 +41,9 @@ export default defineComponent({
   },
   emits: ['confirm', 'cancel'],
   setup() {
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
+
     const dateTime = ref<DateTime>()
     const confirmDisabled = ref(true)
     const onDateChanged = ({ date, error }: { date: DateTime; error: boolean }) => {
@@ -49,6 +54,7 @@ export default defineComponent({
     return {
       confirmDisabled,
       onDateChanged,
+      currentTheme,
       dateTime
     }
   }

packages/web-runtime/src/components/Modals/AppTokenModal.vue

@@ -8,6 +8,7 @@
     />
     <oc-datepicker
       :label="$gettext('Expiration date')"
+      :is-dark="currentTheme.isDark"
       class="mt-2"
       type="date"
       :min-date="minDate"
@@ -76,17 +77,25 @@
 <script setup lang="ts">
 import { computed, ref, unref, watch } from 'vue'
 import { DateTime } from 'luxon'
-import { formatDateFromDateTime, Modal, useClientService } from '@opencloud-eu/web-pkg'
+import {
+  formatDateFromDateTime,
+  Modal,
+  useClientService,
+  useThemeStore
+} from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { useClipboard } from '@vueuse/core'
 import { AppToken } from '../../helpers/appTokens'
+import { storeToRefs } from 'pinia'
 
 defineProps<{ modal: Modal }>()
 defineEmits(['confirm', 'cancel'])
 
 const { $gettext, current: currentLanguage } = useGettext()
 const { httpAuthenticated: client } = useClientService()
 const { copy, copied } = useClipboard({ legacy: true, copiedDuring: 1500 })
+const themeStore = useThemeStore()
+const { currentTheme } = storeToRefs(themeStore)
 
 const tokenLabel = ref<string>('')
 const tokenLabelErrorMessage = ref<string>('')

packages/web-runtime/tests/unit/components/Modals/AppTokenModal.spec.ts

@@ -12,7 +12,8 @@ import { DateTime } from 'luxon'
 import { VueWrapper } from '@vue/test-utils'
 
 const copyMock = vi.fn()
-vi.mock('@vueuse/core', () => ({
+vi.mock('@vueuse/core', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
   useClipboard: vi.fn(() => ({ copy: copyMock, copied: false }))
 }))