Skip to content

Commit 03dbc06

Browse files
xmimiexxmimiex
authored
feat: dark-mode tailwind 4 (#238)
1 parent be6ae26 commit 03dbc06

File tree

4 files changed

+278
-3
lines changed

4 files changed

+278
-3
lines changed

‎README.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,16 @@ npm i --save-dev flowbite flowbite-qwik flowbite-qwik-icons
7979

8080
@source "../node_modules/flowbite-qwik";
8181

82+
@custom-variant dark (&:where(.dark, .dark *));
83+
@theme {
84+
--color-bgContrast: #fff;
85+
}
86+
@layer theme {
87+
.dark {
88+
--color-bgContrast: #111827;
89+
}
90+
}
91+
8292
@theme {
8393
--animate-from-left: slideFromLeft 0.2s 1;
8494
--animate-from-right: slideFromRight 0.2s 1;
@@ -103,6 +113,65 @@ npm i --save-dev flowbite flowbite-qwik flowbite-qwik-icons
103113
transform: translateX(0);
104114
}
105115
}
116+
117+
--color-green-50: #ecfdf5;
118+
--color-green-100: #d1fae5;
119+
--color-green-200: #a7f3d0;
120+
--color-green-300: #6ee7b7;
121+
--color-green-400: #34d399;
122+
--color-green-500: #10b981;
123+
--color-green-600: #059669;
124+
--color-green-700: #047857;
125+
--color-green-800: #065f46;
126+
--color-green-900: #064e3b;
127+
--color-green-950: oklch(.266 .065 152.934);
128+
129+
--color-pink-50: #fdf2f8;
130+
--color-pink-100: #fce7f3;
131+
--color-pink-200: #fbcfe8;
132+
--color-pink-300: #f9a8d4;
133+
--color-pink-400: #f472b6;
134+
--color-pink-500: #ec4899;
135+
--color-pink-600: #db2777;
136+
--color-pink-700: #be185d;
137+
--color-pink-800: #9d174d;
138+
--color-pink-900: #831843;
139+
140+
--color-purple-50: #f5f3ff;
141+
--color-purple-100: #ede9fe;
142+
--color-purple-200: #ddd6fe;
143+
--color-purple-300: #c4b5fd;
144+
--color-purple-400: #a78bfa;
145+
--color-purple-500: #8b5cf6;
146+
--color-purple-600: #7c3aed;
147+
--color-purple-700: #6d28d9;
148+
--color-purple-800: #5b21b6;
149+
--color-purple-900: #4c1d95;
150+
--color-purple-950: oklch(.291 .149 302.717);
151+
152+
--color-gray-50: #f9fafb;
153+
--color-gray-100: #f3f4f6;
154+
--color-gray-200: #e5e7eb;
155+
--color-gray-300: #d1d5db;
156+
--color-gray-400: #9ca3af;
157+
--color-gray-500: #6b7280;
158+
--color-gray-600: #4b5563;
159+
--color-gray-700: #374151;
160+
--color-gray-800: #1f2937;
161+
--color-gray-900: #111827;
162+
--color-gray-950: oklch(.13 .028 261.692);
163+
164+
--color-blue-50: #eff6ff;
165+
--color-blue-100: #dbeafe;
166+
--color-blue-200: #bfdbfe;
167+
--color-blue-300: #93c5fd;
168+
--color-blue-400: #60a5fa;
169+
--color-blue-500: #3b82f6;
170+
--color-blue-600: #2563eb;
171+
--color-blue-700: #1d4ed8;
172+
--color-blue-800: #1e40af;
173+
--color-blue-900: #1e3a8a;
174+
--color-blue-950: oklch(.282 .091 267.935);
106175
}
107176
```
108177

‎apps/web/src/global.css‎

Lines changed: 70 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
@import 'tailwindcss';
22

33
@plugin 'flowbite/plugin';
4-
54
@source "../node_modules/flowbite-qwik";
65

6+
@custom-variant dark (&:where(.dark, .dark *));
7+
@theme {
8+
--color-bgContrast: #fff;
9+
}
10+
@layer theme {
11+
.dark {
12+
--color-bgContrast: #111827;
13+
}
14+
}
15+
716
@theme {
817
--animate-from-left: slideFromLeft 0.2s 1;
918
--animate-from-right: slideFromRight 0.2s 1;
10-
1119
--min-width-screen-lg: 1024px;
12-
1320
--container-8xl: 90rem;
1421

1522
@keyframes slideFromLeft {
@@ -28,6 +35,66 @@
2835
transform: translateX(0);
2936
}
3037
}
38+
39+
40+
--color-green-50: #ecfdf5;
41+
--color-green-100: #d1fae5;
42+
--color-green-200: #a7f3d0;
43+
--color-green-300: #6ee7b7;
44+
--color-green-400: #34d399;
45+
--color-green-500: #10b981;
46+
--color-green-600: #059669;
47+
--color-green-700: #047857;
48+
--color-green-800: #065f46;
49+
--color-green-900: #064e3b;
50+
--color-green-950: oklch(.266 .065 152.934);
51+
52+
--color-pink-50: #fdf2f8;
53+
--color-pink-100: #fce7f3;
54+
--color-pink-200: #fbcfe8;
55+
--color-pink-300: #f9a8d4;
56+
--color-pink-400: #f472b6;
57+
--color-pink-500: #ec4899;
58+
--color-pink-600: #db2777;
59+
--color-pink-700: #be185d;
60+
--color-pink-800: #9d174d;
61+
--color-pink-900: #831843;
62+
63+
--color-purple-50: #f5f3ff;
64+
--color-purple-100: #ede9fe;
65+
--color-purple-200: #ddd6fe;
66+
--color-purple-300: #c4b5fd;
67+
--color-purple-400: #a78bfa;
68+
--color-purple-500: #8b5cf6;
69+
--color-purple-600: #7c3aed;
70+
--color-purple-700: #6d28d9;
71+
--color-purple-800: #5b21b6;
72+
--color-purple-900: #4c1d95;
73+
--color-purple-950: oklch(.291 .149 302.717);
74+
75+
--color-gray-50: #f9fafb;
76+
--color-gray-100: #f3f4f6;
77+
--color-gray-200: #e5e7eb;
78+
--color-gray-300: #d1d5db;
79+
--color-gray-400: #9ca3af;
80+
--color-gray-500: #6b7280;
81+
--color-gray-600: #4b5563;
82+
--color-gray-700: #374151;
83+
--color-gray-800: #1f2937;
84+
--color-gray-900: #111827;
85+
--color-gray-950: oklch(.13 .028 261.692);
86+
87+
--color-blue-50: #eff6ff;
88+
--color-blue-100: #dbeafe;
89+
--color-blue-200: #bfdbfe;
90+
--color-blue-300: #93c5fd;
91+
--color-blue-400: #60a5fa;
92+
--color-blue-500: #3b82f6;
93+
--color-blue-600: #2563eb;
94+
--color-blue-700: #1d4ed8;
95+
--color-blue-800: #1e40af;
96+
--color-blue-900: #1e3a8a;
97+
--color-blue-950: oklch(.282 .091 267.935);
3198
}
3299

33100
/*

‎apps/web/src/routes/docs/getting-started/quickstart/index.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,17 @@ export default component$(() => {
4545
4646
@source "../node_modules/flowbite-qwik";
4747
48+
49+
@custom-variant dark (&:where(.dark, .dark *));
50+
@theme {
51+
--color-bgContrast: #fff;
52+
}
53+
@layer theme {
54+
.dark {
55+
--color-bgContrast: #111827;
56+
}
57+
}
58+
4859
@theme {
4960
--animate-from-left: slideFromLeft 0.2s 1;
5061
--animate-from-right: slideFromRight 0.2s 1;
@@ -69,6 +80,65 @@ export default component$(() => {
6980
transform: translateX(0);
7081
}
7182
}
83+
84+
--color-green-50: #ecfdf5;
85+
--color-green-100: #d1fae5;
86+
--color-green-200: #a7f3d0;
87+
--color-green-300: #6ee7b7;
88+
--color-green-400: #34d399;
89+
--color-green-500: #10b981;
90+
--color-green-600: #059669;
91+
--color-green-700: #047857;
92+
--color-green-800: #065f46;
93+
--color-green-900: #064e3b;
94+
--color-green-950: oklch(.266 .065 152.934);
95+
96+
--color-pink-50: #fdf2f8;
97+
--color-pink-100: #fce7f3;
98+
--color-pink-200: #fbcfe8;
99+
--color-pink-300: #f9a8d4;
100+
--color-pink-400: #f472b6;
101+
--color-pink-500: #ec4899;
102+
--color-pink-600: #db2777;
103+
--color-pink-700: #be185d;
104+
--color-pink-800: #9d174d;
105+
--color-pink-900: #831843;
106+
107+
--color-purple-50: #f5f3ff;
108+
--color-purple-100: #ede9fe;
109+
--color-purple-200: #ddd6fe;
110+
--color-purple-300: #c4b5fd;
111+
--color-purple-400: #a78bfa;
112+
--color-purple-500: #8b5cf6;
113+
--color-purple-600: #7c3aed;
114+
--color-purple-700: #6d28d9;
115+
--color-purple-800: #5b21b6;
116+
--color-purple-900: #4c1d95;
117+
--color-purple-950: oklch(.291 .149 302.717);
118+
119+
--color-gray-50: #f9fafb;
120+
--color-gray-100: #f3f4f6;
121+
--color-gray-200: #e5e7eb;
122+
--color-gray-300: #d1d5db;
123+
--color-gray-400: #9ca3af;
124+
--color-gray-500: #6b7280;
125+
--color-gray-600: #4b5563;
126+
--color-gray-700: #374151;
127+
--color-gray-800: #1f2937;
128+
--color-gray-900: #111827;
129+
--color-gray-950: oklch(.13 .028 261.692);
130+
131+
--color-blue-50: #eff6ff;
132+
--color-blue-100: #dbeafe;
133+
--color-blue-200: #bfdbfe;
134+
--color-blue-300: #93c5fd;
135+
--color-blue-400: #60a5fa;
136+
--color-blue-500: #3b82f6;
137+
--color-blue-600: #2563eb;
138+
--color-blue-700: #1d4ed8;
139+
--color-blue-800: #1e40af;
140+
--color-blue-900: #1e3a8a;
141+
--color-blue-950: oklch(.282 .091 267.935);
72142
}
73143
`}
74144
/>

‎packages/lib/README.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,16 @@ npm i --save-dev flowbite flowbite-qwik flowbite-qwik-icons
7979

8080
@source "../node_modules/flowbite-qwik";
8181

82+
@custom-variant dark (&:where(.dark, .dark *));
83+
@theme {
84+
--color-bgContrast: #fff;
85+
}
86+
@layer theme {
87+
.dark {
88+
--color-bgContrast: #111827;
89+
}
90+
}
91+
8292
@theme {
8393
--animate-from-left: slideFromLeft 0.2s 1;
8494
--animate-from-right: slideFromRight 0.2s 1;
@@ -103,6 +113,65 @@ npm i --save-dev flowbite flowbite-qwik flowbite-qwik-icons
103113
transform: translateX(0);
104114
}
105115
}
116+
117+
--color-green-50: #ecfdf5;
118+
--color-green-100: #d1fae5;
119+
--color-green-200: #a7f3d0;
120+
--color-green-300: #6ee7b7;
121+
--color-green-400: #34d399;
122+
--color-green-500: #10b981;
123+
--color-green-600: #059669;
124+
--color-green-700: #047857;
125+
--color-green-800: #065f46;
126+
--color-green-900: #064e3b;
127+
--color-green-950: oklch(.266 .065 152.934);
128+
129+
--color-pink-50: #fdf2f8;
130+
--color-pink-100: #fce7f3;
131+
--color-pink-200: #fbcfe8;
132+
--color-pink-300: #f9a8d4;
133+
--color-pink-400: #f472b6;
134+
--color-pink-500: #ec4899;
135+
--color-pink-600: #db2777;
136+
--color-pink-700: #be185d;
137+
--color-pink-800: #9d174d;
138+
--color-pink-900: #831843;
139+
140+
--color-purple-50: #f5f3ff;
141+
--color-purple-100: #ede9fe;
142+
--color-purple-200: #ddd6fe;
143+
--color-purple-300: #c4b5fd;
144+
--color-purple-400: #a78bfa;
145+
--color-purple-500: #8b5cf6;
146+
--color-purple-600: #7c3aed;
147+
--color-purple-700: #6d28d9;
148+
--color-purple-800: #5b21b6;
149+
--color-purple-900: #4c1d95;
150+
--color-purple-950: oklch(.291 .149 302.717);
151+
152+
--color-gray-50: #f9fafb;
153+
--color-gray-100: #f3f4f6;
154+
--color-gray-200: #e5e7eb;
155+
--color-gray-300: #d1d5db;
156+
--color-gray-400: #9ca3af;
157+
--color-gray-500: #6b7280;
158+
--color-gray-600: #4b5563;
159+
--color-gray-700: #374151;
160+
--color-gray-800: #1f2937;
161+
--color-gray-900: #111827;
162+
--color-gray-950: oklch(.13 .028 261.692);
163+
164+
--color-blue-50: #eff6ff;
165+
--color-blue-100: #dbeafe;
166+
--color-blue-200: #bfdbfe;
167+
--color-blue-300: #93c5fd;
168+
--color-blue-400: #60a5fa;
169+
--color-blue-500: #3b82f6;
170+
--color-blue-600: #2563eb;
171+
--color-blue-700: #1d4ed8;
172+
--color-blue-800: #1e40af;
173+
--color-blue-900: #1e3a8a;
174+
--color-blue-950: oklch(.282 .091 267.935);
106175
}
107176
```
108177

0 commit comments

Comments
 (0)