64 lines
1.6 KiB
Vue
64 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { useDark } from '@vueuse/core'
|
|
import { DatePicker } from 'v-calendar'
|
|
import 'v-calendar/style.css'
|
|
|
|
const isDark = useDark()
|
|
</script>
|
|
|
|
<template>
|
|
<DatePicker :is-dark="isDark" borderless trim-weeks expanded />
|
|
</template>
|
|
|
|
<style>
|
|
:root {
|
|
--vc-font-family: "Inter", sans-serif;
|
|
--vc-rounded-full: var(--radius);
|
|
--vc-font-bold: 500;
|
|
--vc-font-semibold: 600;
|
|
--vc-text-lg: 14px;
|
|
}
|
|
|
|
.vc-light,
|
|
.vc-dark {
|
|
--vc-bg: var(--background);
|
|
--vc-border: var(--border);
|
|
--vc-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.2);
|
|
--vc-weekday-color: var(--muted);
|
|
--vc-popover-content-color: var(--muted);
|
|
--vc-popover-content-bg: var(--background);
|
|
--vc-popover-content-border: var(--border);
|
|
|
|
&.vc-attr,
|
|
& .vc-attr {
|
|
--vc-content-color: var(--primary);
|
|
--vc-highlight-outline-bg: var(--primary);
|
|
--vc-highlight-outline-border: var(--primary);
|
|
--vc-highlight-outline-content-color: var(--primary-foreground);
|
|
--vc-highlight-light-bg: var(
|
|
--vc-accent-200
|
|
); /* Highlighted color between two dates */
|
|
--vc-highlight-light-content-color: var(--secondary-foreground);
|
|
--vc-highlight-solid-bg: var(--primary);
|
|
--vc-highlight-solid-content-color: var(--primary-foreground);
|
|
--vc-dot-bg: var(--primary);
|
|
--vc-bar-bg: var(--primary);
|
|
}
|
|
}
|
|
|
|
.vc-blue {
|
|
--vc-accent-200: var(--secondary);
|
|
--vc-accent-400: var(--primary);
|
|
--vc-accent-500: var(--primary);
|
|
--vc-accent-600: var(--primary);
|
|
}
|
|
|
|
.dark {
|
|
.vc-blue {
|
|
--vc-accent-200: var(--secondary);
|
|
--vc-accent-400: var(--primary);
|
|
--vc-accent-500: var(--secondary);
|
|
}
|
|
}
|
|
</style>
|