add dark-mode in calendar

This commit is contained in:
varshapun
2023-03-23 18:43:44 +05:30
parent cba602655d
commit ca56046e33

View File

@ -28,6 +28,7 @@
:attributes="attrs" :attributes="attrs"
:model-config="config" :model-config="config"
:masks="masks" :masks="masks"
:is-dark="isDarkModeOn"
:locale="global.locale" :locale="global.locale"
> >
<template <template
@ -72,7 +73,7 @@
<template v-if="showExtraOptions" #footer> <template v-if="showExtraOptions" #footer>
<div <div
class="bg-gray-100 grid grid-cols-3 gap-2 p-2 border-t rounded-b-lg" class="bg-gray-800 grid grid-cols-3 gap-2 p-2 border-t rounded-b-lg"
> >
<button type="button" class="extra-button" @click="moveToDate(sourceDate)"> <button type="button" class="extra-button" @click="moveToDate(sourceDate)">
{{ global.t('date_picker.same_day') }} {{ global.t('date_picker.same_day') }}
@ -146,7 +147,7 @@ const props = defineProps({
defaultInputClass: { defaultInputClass: {
type: String, type: String,
default: default:
'border-2 font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black', 'border-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
}, },
time24hr: { time24hr: {
type: Boolean, type: Boolean,
@ -171,7 +172,7 @@ const slots = useSlots()
const companyStore = useCompanyStore() const companyStore = useCompanyStore()
const { global } = window.i18n const { global } = window.i18n
const vCalendar = ref(null) const vCalendar = ref(null)
const isDarkModeOn = document.documentElement.classList.contains('dark')
const hasIconSlot = computed(() => { const hasIconSlot = computed(() => {
return !!slots.icon return !!slots.icon
}) })