Dark mode grouped select group headers colour fix

erimicel · erimicel · commit 5b91a4eacf98 · 2025-01-11T13:12:09.000Z
diff --git a/README.md b/README.md
@@ -67,7 +67,7 @@ module.exports = {
 ```
 
 Enable to dark mode by `dark` class toggle:
-```
+```js
 // tailwind.config.js
 module.exports = {
   // The selector strategy replaced the class strategy in Tailwind CSS v3.4.1.
diff --git a/dist/select2-tailwindcss-theme-plain.css b/dist/select2-tailwindcss-theme-plain.css
@@ -227,6 +227,13 @@
   color: rgb(55 65 81 / var(--tw-text-opacity, 1))
 }
 
+.select2-container--tailwindcss-3 .select2-results__group:where(.dark, .dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1))
+}
+
 /* Group container */
 
 .select2-container--tailwindcss-3 .select2-results__option--group{
diff --git a/dist/select2-tailwindcss-theme-plain.min.css b/dist/select2-tailwindcss-theme-plain.min.css
diff --git a/dist/select2-tailwindcss-theme.css b/dist/select2-tailwindcss-theme.css
@@ -55,7 +55,7 @@
 
 /* Group headers */
 .select2-container--tailwindcss-3 .select2-results__group {
-  @apply flex cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700;
+  @apply flex cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-300;
 }
 
 /* Group container */
diff --git a/dist/select2-tailwindcss-theme.min.css b/dist/select2-tailwindcss-theme.min.css
diff --git a/docs/css/select2-tailwindcss-theme-plain.min.css b/docs/css/select2-tailwindcss-theme-plain.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -13,8 +13,8 @@
   <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,container-queries"></script>
 
   <link href="css/tailwind.css" rel="stylesheet">
-  <link href="https://cdn.jsdelivr.net/gh/erimicel/select2-tailwindcss-theme@1.2.1/dist/select2-tailwindcss-theme-plain.min.css" rel="stylesheet">
-  <link href="css/select2-tailwindcss-theme-plain.min.css?v=1.2.1" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/gh/erimicel/select2-tailwindcss-theme@1.2.2/dist/select2-tailwindcss-theme-plain.min.css" rel="stylesheet">
+  <link href="css/select2-tailwindcss-theme-plain.min.css?v=1.2.2" rel="stylesheet">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
   <script>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "select2-tailwindcss-theme",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "A Select2 theme for Tailwindcss",
   "main": "dist/select2-tailwindcss-theme.css",
   "scripts": {
diff --git a/src/_layout.scss b/src/_layout.scss
@@ -54,7 +54,7 @@
 
 /* Group headers */
 .select2-container--tailwindcss-3 .select2-results__group {
-  @apply flex cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700;
+  @apply flex cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-300;
 }
 
 /* Group container */

Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@`
`55`	`55`
`56`	`56`	`/* Group headers */`
`57`	`57`	`.select2-container--tailwindcss-3 .select2-results__group {`
`58`		`- @apply flex cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700;`
	`58`	`+ @apply flex cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-300;`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`/* Group container */`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "select2-tailwindcss-theme",`
`3`		`- "version": "1.2.1",`
	`3`	`+ "version": "1.2.2",`
`4`	`4`	`"description": "A Select2 theme for Tailwindcss",`
`5`	`5`	`"main": "dist/select2-tailwindcss-theme.css",`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@`
`54`	`54`
`55`	`55`	`/* Group headers */`
`56`	`56`	`.select2-container--tailwindcss-3 .select2-results__group {`
`57`		`- @apply flex cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700;`
	`57`	`+ @apply flex cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-300;`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`/* Group container */`