Dark mode grouped select group headers colour fix

erimicel · Jan 11, 2025 · 5b91a4e · 5b91a4e
1 parent de39024
commit 5b91a4e
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 9 deletions.
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/[email protected].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/[email protected].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/[email protected]/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 */