Skip to content

Commit 03112fb

Browse files
mythzmythz
committed
dark mode support
1 parent 4231437 commit 03112fb

12 files changed

+23
-23
lines changed

‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="dark">
33
<head>
44
<meta charset="UTF-8">
55
<link rel="icon" href="/favicon.ico">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Vite App</title>
88
</head>
9-
<body>
9+
<body class="bg-white dark:bg-black dark:text-white">
1010
<div id="app"></div>
1111
<script type="module" src="/src/main.ts"></script>
1212
</body>

‎src/components/CheckboxInput.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
type="checkbox"
88
:checked="modelValue"
99
@input="$emit('update:modelValue', (($event as InputEvent).target as HTMLInputElement).checked)"
10-
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
10+
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800"
1111
v-bind="remaining">
1212
</div>
1313
<div class="ml-3 text-sm">
14-
<label :for="id" class="font-medium text-gray-700 select-none">{{ useLabel }}</label>
14+
<label :for="id" class="font-medium text-gray-700 dark:text-gray-300">{{ useLabel }}</label>
1515
<p v-if="errorField" class="mt-2 text-sm text-red-500" id="`${id}-error`">{{ errorField }}</p>
1616
<p v-else-if="help" class="mt-2 text-sm text-gray-500" id="`${id}-description`">{{ help }}</p>
1717
</div>

‎src/components/CloseButton.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="absolute top-0 right-0 pt-4 pr-4">
33
<button type="button" @click="$emit('close')"
4-
:class="[buttonClass,'rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']">
4+
:class="[buttonClass,'rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black']">
55
<span class="sr-only">Close</span>
66
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
77
aria-hidden="true">
@@ -15,7 +15,7 @@
1515
const props = withDefaults(defineProps<{
1616
buttonClass?: string
1717
}>(), {
18-
buttonClass: 'bg-white'
18+
buttonClass: 'bg-white dark:bg-black'
1919
})
2020
const emit = defineEmits<{
2121
(e:'close'): void

‎src/components/ErrorSummary.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<div v-if="errorSummary" :class="`bg-red-50 border-l-4 border-red-400 p-4 ${$props.class}`">
2+
<div v-if="errorSummary" :class="`bg-red-50 dark:bg-red-900 border-l-4 border-red-400 p-4 ${$props.class}`">
33
<div class="flex">
44
<div class="flex-shrink-0">
55
<svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
66
<path fill="currentColor" d="M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12S6.47 2 12 2m3.59 5L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z"/>
77
</svg>
88
</div>
99
<div class="ml-3">
10-
<p class="text-sm text-red-700">{{ errorSummary }}</p>
10+
<p class="text-sm text-red-700 dark:text-red-200">{{ errorSummary }}</p>
1111
</div>
1212
</div>
1313
</div>

‎src/components/ModalDialog.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66

77
<div class="fixed inset-0 z-10 overflow-y-auto">
88
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
9-
<div :class="['relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6', transition2]"
9+
<div :class="['relative transform overflow-hidden rounded-lg bg-white dark:bg-black px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6', transition2]"
1010
@mousedown.stop="">
1111
<div>
1212
<div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
1313
<button type="button" @click="close"
14-
class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
14+
class="bg-white dark:bg-black rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black">
1515
<span class="sr-only">Close</span>
1616
<!-- Heroicon name: outline/x -->
1717
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"

‎src/components/OutlineButton.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@ withDefaults(defineProps<{ type?: "submit" | "button" | "reset", href?: string }
1414
type: 'submit'
1515
})
1616
17-
const cls = "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
17+
const cls = "inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-base font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-black hover:bg-gray-50 hover:dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:ring-offset-black"
1818
</script>

‎src/components/PrimaryButton.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@ const props = withDefaults(defineProps<{ type?: "submit" | "button" | "reset", h
1414
type: 'submit',
1515
})
1616
17-
const cls = "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
17+
const cls = "inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black focus:ring-2 focus:ring-offset-2 text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
1818
.replace(/indigo/g, props.color ?? "indigo")
1919
</script>

‎src/components/SecondaryButton.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@
1212
<script setup lang="ts">
1313
defineProps<{ type?: "submit" | "button" | "reset", href?: string }>()
1414
15-
const cls = "bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
15+
const cls = "inline-flex justify-center rounded-md border border-gray-300 py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-black"
1616
</script>

‎src/components/SelectInput.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<label v-if="useLabel" :for="id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ useLabel }}</label>
3-
<select :id="id" :name="id" :class="['mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none border-gray-300 sm:text-sm rounded-md',
3+
<select :id="id" :name="id" :class="['mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none border-gray-300 sm:text-sm rounded-md dark:text-white dark:bg-gray-900 dark:border-gray-600',
44
!errorField ? 'text-gray-900 focus:ring-indigo-500 focus:border-indigo-500' : 'text-red-900 focus:ring-red-500 focus:border-red-500']"
55
:value="modelValue"
66
@input="$emit('update:modelValue', value($event.target))"

‎src/components/SlideOver.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,21 @@
55
<div @mousedown="close" class="absolute inset-0 overflow-hidden">
66
<div @mousedown.stop="" class="pointer-events-none fixed inset-y-0 right-0 flex pl-10">
77
<div :class="['pointer-events-auto w-screen xl:max-w-3xl md:max-w-xl max-w-lg',transition1]">
8-
<div class="flex h-full flex-col bg-white shadow-xl">
8+
<div class="flex h-full flex-col bg-white dark:bg-black shadow-xl">
99
<div class="flex min-h-0 flex-1 flex-col">
1010

1111
<div class="flex-1">
1212
<!-- Header -->
13-
<div class="bg-gray-50 px-4 py-6 sm:px-6">
13+
<div class="bg-gray-50 dark:bg-gray-900 px-4 py-6 sm:px-6">
1414
<div class="flex items-start justify-between space-x-3">
1515
<div class="space-y-1">
16-
<h2 v-if="title" class="text-lg font-medium text-gray-900" :id="id + '-title'">{{title}}</h2>
16+
<h2 v-if="title" class="text-lg font-medium text-gray-900 dark:text-gray-50" :id="id + '-title'">{{title}}</h2>
1717
<p class="text-sm text-gray-500">
1818
<slot name="subtitle"></slot>
1919
</p>
2020
</div>
2121
<div class="flex h-7 items-center">
22-
<CloseButton button-class="bg-gray-50" @close="close"/>
22+
<CloseButton button-class="bg-gray-50 dark:bg-gray-900" @close="close"/>
2323
</div>
2424
</div>
2525
</div>
@@ -31,7 +31,7 @@
3131
</div>
3232

3333
<!-- Action buttons -->
34-
<div class="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6">
34+
<div class="flex-shrink-0 border-t border-gray-200 dark:border-gray-700 px-4 py-5 sm:px-6">
3535
<slot name="footer"></slot>
3636
</div>
3737

‎src/demo/App.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77

88
<div class="mt-8">
99
<form v-if="show" class="mx-auto max-w-4xl" @submit.prevent="onSubmit">
10-
<div class="shadow overflow-hidden sm:rounded-md bg-white">
11-
<div class="relative px-4 py-5 bg-white sm:p-6">
10+
<div class="shadow overflow-hidden sm:rounded-md bg-white dark:bg-black">
11+
<div class="relative px-4 py-5 bg-white dark:bg-black sm:p-6">
1212

1313
<CloseButton @close="close"/>
1414

@@ -53,7 +53,7 @@
5353
</fieldset>
5454
</div>
5555

56-
<div class="mt-4 px-4 py-3 bg-gray-50 text-right sm:px-6">
56+
<div class="mt-4 px-4 py-3 bg-gray-50 dark:bg-gray-900 text-right sm:px-6">
5757
<div class="flex justify-between items-center">
5858
<div><FormLoading :loading="loading" /></div>
5959
<div><PrimaryButton>Create Booking</PrimaryButton></div>
@@ -114,7 +114,6 @@ const close = () => { show.value = false; emit('done'); }
114114
-webkit-font-smoothing: antialiased;
115115
-moz-osx-font-smoothing: grayscale;
116116
text-align: center;
117-
color: #2c3e50;
118117
margin-top: 60px;
119118
}
120119
</style>

‎tailwind.config.cjs

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
33
content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
4+
darkMode: 'class',
45
theme: {
56
extend: {},
67
},

0 commit comments

Comments
 (0)