Skip to content

Commit bae2495

Browse files
erimicelerimicel
committed
Add dark mode switcher button to demo
1 parent 19c71c7 commit bae2495

File tree

4 files changed

+62
-29
lines changed

4 files changed

+62
-29
lines changed

‎README.md

-4
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,6 @@
1212

1313
https://erimicel.github.io/select2-tailwindcss-theme/
1414

15-
## Current issues to be fixed
16-
17-
- [ ] Fix height of multi select box
18-
1915
## 📦 Installation
2016

2117
### CDN

‎docs/index.html

+60-23
Original file line numberDiff line numberDiff line change
@@ -17,26 +17,56 @@
1717
<link href="css/select2-tailwindcss-theme-plain.min.css" rel="stylesheet">
1818
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
1919
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
20+
<script>
21+
tailwind.config = {
22+
darkMode: 'selector',
23+
}
24+
</script>
25+
26+
<script>
27+
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
28+
document.documentElement.classList.toggle(
29+
'dark',
30+
localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
31+
);
32+
</script>
2033
</head>
2134

22-
<body class="font-sans antialiased bg-gray-100">
35+
<body class="font-sans antialiased bg-gray-100 dark:bg-gray-900">
2336

24-
<header class="py-4 text-white bg-blue-600 shadow">
37+
<header class="py-4 text-white bg-blue-600 shadow dark:bg-blue-950">
2538
<h1 class="text-xl font-bold text-center">Select2 Tailwindcss Theme Demo</h1>
2639
</header>
2740

28-
<main class="max-w-4xl p-6 mx-auto mt-8 bg-white rounded-lg shadow-lg">
29-
<h2 class="mb-6 text-2xl font-semibold text-gray-800">
30-
Examples of
31-
<a href="https://github.com/erimicel/select2-tailwindcss-theme" target="_blank" class="text-blue-600">
32-
@erimicel/select2-tailwindcss-theme
33-
</a>
34-
</h2>
41+
<main class="max-w-4xl p-6 mx-auto mt-8 bg-white rounded-lg shadow-lg dark:bg-slate-800">
42+
<div class="flex flex-row flex-wrap justify-between">
43+
<h2 class="mb-6 text-2xl font-semibold text-gray-800 dark:text-white">
44+
Examples of
45+
<a href="https://github.com/erimicel/select2-tailwindcss-theme" target="_blank" class="text-blue-600">
46+
@erimicel/select2-tailwindcss-theme
47+
</a>
48+
</h2>
49+
50+
<div class="flex flex-row items-center mb-4 align-middle sm:mb-0">
51+
<span class="mr-2 text-sm font-semibold text-gray-700 dark:text-white">Switch Dark Mode</span>
52+
<button id="theme-toggle"
53+
class="w-12 h-12 p-2 border border-gray-100 rounded-lg bg-gray-50 hover:bg-gray-200 dark:bg-gray-700 dark:border-gray-800 dark:hover:bg-gray-600">
54+
<svg class="block fill-violet-700 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
55+
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
56+
</svg>
57+
<svg class="hidden fill-yellow-500 dark:block" fill="currentColor" viewBox="0 0 20 20">
58+
<path
59+
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
60+
fill-rule="evenodd" clip-rule="evenodd"></path>
61+
</svg>
62+
</button>
63+
</div>
64+
</div>
3565

3666
<form class="space-y-4">
3767
<!-- Single Select -->
3868
<div>
39-
<label class="block mb-2 text-sm font-medium text-gray-700">Example of single select</label>
69+
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of single select</label>
4070
<select data-placeholder="Choose one thing" data-allow-clear="1">
4171
<option></option>
4272
<option>1</option>
@@ -49,7 +79,7 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
4979

5080
<!-- Tags Select -->
5181
<div>
52-
<label class="block mb-2 text-sm font-medium text-gray-700">Example of dynamic option creation</label>
82+
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of dynamic option creation</label>
5383
<select multiple data-placeholder="Type anything" data-allow-clear="1" data-tags="1">
5484
<option>Alaska</option>
5585
<option>Hawaii</option>
@@ -59,7 +89,7 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
5989

6090
<!-- Multiple Select -->
6191
<div>
62-
<label class="block mb-2 text-sm font-medium text-gray-700">Example of multiple select</label>
92+
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of multiple select</label>
6393
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
6494
<option>Alaska</option>
6595
<option>Hawaii</option>
@@ -69,13 +99,13 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
6999

70100
<!-- Disabled Select -->
71101
<div>
72-
<label class="block mb-2 text-sm font-medium text-gray-700">Example of disabled select</label>
102+
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of disabled select</label>
73103
<select disabled data-placeholder="Cannot choose" data-allow-clear="1"></select>
74104
</div>
75105

76106
<!-- Multiple Disabled Select -->
77107
<div>
78-
<label class="block mb-2 text-sm font-medium text-gray-700">Example of disabled multiple select with selected items</label>
108+
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of disabled multiple select with selected items</label>
79109
<select disabled multiple>
80110
<option selected>Alaska</option>
81111
<option selected>Hawaii</option>
@@ -84,7 +114,7 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
84114

85115
<!-- Select with Optgroup -->
86116
<div>
87-
<label class="block mb-2 text-sm font-medium text-gray-700">Example of select with optgroup</label>
117+
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of select with optgroup</label>
88118
<select data-placeholder="Choose one thing" data-allow-clear="1">
89119
<option></option>
90120
<optgroup label="Group A">
@@ -102,7 +132,7 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
102132

103133
<!-- Input Group -->
104134
<div>
105-
<label class="block mb-2 text-sm font-medium text-gray-700">Example of input group (.input-group)</label>
135+
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of input group (.input-group)</label>
106136
<div class="flex input-group">
107137
<span class="flex items-center px-3 text-base text-gray-500 bg-white border border-gray-300 shrink-0 rounded-l-md sm:text-sm/6">Prepend</span>
108138
<select data-placeholder="Choose one thing" data-allow-clear="1">
@@ -137,7 +167,7 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
137167

138168
<!-- Validated Select -->
139169
<div>
140-
<label class="block mb-2 text-sm font-medium text-gray-700">Example of validated select (.is-valid, :invalid)</label>
170+
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of validated select (.is-valid, :invalid)</label>
141171
<select class="is-invalid" data-placeholder="Invalid example" data-allow-clear="1">
142172
<option></option>
143173
</select>
@@ -146,17 +176,24 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
146176
</form>
147177
</main>
148178

149-
<footer class="my-12 text-center text-gray-600">
179+
<footer class="my-12 text-center text-gray-600 dark:text-white">
150180
<p class="text-sm">Select2 4.1.0-rc.0, TailwindCSS 3.4.17, jQuery 3.7.1</p>
151181
</footer>
152182

153183
<script>
154184
$(function () {
155-
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
156-
document.documentElement.classList.toggle(
157-
'dark',
158-
localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
159-
);
185+
// Toggle dark mode
186+
document.getElementById('theme-toggle').addEventListener('click', () => {
187+
localStorage.theme = localStorage.theme === 'dark' ? 'light' : 'dark';
188+
189+
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
190+
document.documentElement.classList.toggle(
191+
'dark',
192+
localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
193+
);
194+
195+
console.log(localStorage.theme);
196+
});
160197

161198
// Select2 init
162199
$('select').each(function () {

‎docs/tailwind.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ module.exports = {
33
// The selector strategy replaced the class strategy in Tailwind CSS v3.4.1.
44
darkMode: 'selector',
55
content: [
6-
'./**/*.{html,js}',
6+
'./**/*.{html}',
77
],
88
theme: {
99
extend: {},

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"build:min": "MINIFY=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme.min.css --verbose",
99
"build:plain": "VERBOSE=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.css --verbose",
1010
"build:plain:min": "MINIFY=true VERBOSE=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.min.css --verbose",
11-
"build:demo": "cp ./dist/select2-tailwindcss-theme-plain.min.css ./docs/css/ &&npx tailwindcss -i ./docs/tailwind.css -o ./docs/css/tailwind.css --minify",
11+
"build:demo": "cp ./dist/select2-tailwindcss-theme-plain.min.css ./docs/css/ && npx tailwindcss -i ./docs/tailwind.css -o ./docs/css/tailwind.css --minify",
1212
"build:all": "npm run build && npm run build:min && npm run build:plain && npm run build:plain:min && npm run build:demo"
1313
},
1414
"repository": {

0 commit comments

Comments
 (0)