Fix dark mode.

themesberg · May 20, 2022 · 185e7b9 · 185e7b9
1 parent a6e8841
commit 185e7b9
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 16 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="">
+<html class="dark">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

diff --git a/dist/js/datepicker-full.js b/dist/js/datepicker-full.js
@@ -995,7 +995,7 @@
           classList.add('next', 'text-gray-500', 'dark:text-white');
         }
         if (this.today === current) {
-          classList.add('today', 'bg-gray-100', 'dark:bg-gray-600', 'dark:bg-gray-600');
+          classList.add('today', 'bg-gray-100', 'dark:bg-gray-600');
         }
         if (current < this.minDate || current > this.maxDate || this.disabled.includes(current)) {
           classList.add('disabled', 'cursor-not-allowed');
@@ -1024,7 +1024,7 @@
         }
         if (this.selected.includes(current)) {
           classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
-          classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
+          classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'dark:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
         }
         if (current === this.focused) {
           classList.add('focused');
@@ -1048,7 +1048,7 @@
       Array.from(this.grid.children).forEach((el) => {
         const current = Number(el.dataset.date);
         const classList = el.classList;
-        classList.remove('bg-gray-200', 'dark:bg-gray-700', 'rounded-l-lg', 'rounded-r-lg');
+        classList.remove('bg-gray-200', 'dark:bg-gray-600', 'rounded-l-lg', 'rounded-r-lg');
         if (current > rangeStart && current < rangeEnd) {
           classList.add('range', 'bg-gray-200', 'dark:bg-gray-600');
           classList.remove('rounded-lg');
@@ -1063,7 +1063,7 @@
         }
         if (this.selected.includes(current)) {
           classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
-          classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
+          classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200', 'dark:bg-gray-600');
         }
         if (current === this.focused) {
           classList.add('focused');

diff --git a/dist/js/datepicker-full.min.js b/dist/js/datepicker-full.min.js
diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
@@ -995,7 +995,7 @@ var Datepicker = (function () {
           classList.add('next', 'text-gray-500', 'dark:text-white');
         }
         if (this.today === current) {
-          classList.add('today', 'bg-gray-100', 'dark:bg-gray-600', 'dark:bg-gray-600');
+          classList.add('today', 'bg-gray-100', 'dark:bg-gray-600');
         }
         if (current < this.minDate || current > this.maxDate || this.disabled.includes(current)) {
           classList.add('disabled', 'cursor-not-allowed');
@@ -1024,7 +1024,7 @@ var Datepicker = (function () {
         }
         if (this.selected.includes(current)) {
           classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
-          classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
+          classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'dark:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
         }
         if (current === this.focused) {
           classList.add('focused');
@@ -1048,7 +1048,7 @@ var Datepicker = (function () {
       Array.from(this.grid.children).forEach((el) => {
         const current = Number(el.dataset.date);
         const classList = el.classList;
-        classList.remove('bg-gray-200', 'dark:bg-gray-700', 'rounded-l-lg', 'rounded-r-lg');
+        classList.remove('bg-gray-200', 'dark:bg-gray-600', 'rounded-l-lg', 'rounded-r-lg');
         if (current > rangeStart && current < rangeEnd) {
           classList.add('range', 'bg-gray-200', 'dark:bg-gray-600');
           classList.remove('rounded-lg');
@@ -1063,7 +1063,7 @@ var Datepicker = (function () {
         }
         if (this.selected.includes(current)) {
           classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
-          classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
+          classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200', 'dark:bg-gray-600');
         }
         if (current === this.focused) {
           classList.add('focused');

diff --git a/dist/js/datepicker.min.js b/dist/js/datepicker.min.js
diff --git a/js/picker/views/DaysView.js b/js/picker/views/DaysView.js
@@ -161,7 +161,7 @@ export default class DaysView extends View {
         classList.add('next', 'text-gray-500', 'dark:text-white');
       }
       if (this.today === current) {
-        classList.add('today', 'bg-gray-100', 'dark:bg-gray-600', 'dark:bg-gray-600');
+        classList.add('today', 'bg-gray-100', 'dark:bg-gray-600');
       }
       if (current < this.minDate || current > this.maxDate || this.disabled.includes(current)) {
         classList.add('disabled', 'cursor-not-allowed');
@@ -190,7 +190,7 @@ export default class DaysView extends View {
       }
       if (this.selected.includes(current)) {
         classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
-        classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
+        classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'dark:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
       }
       if (current === this.focused) {
         classList.add('focused');
@@ -214,7 +214,7 @@ export default class DaysView extends View {
     Array.from(this.grid.children).forEach((el) => {
       const current = Number(el.dataset.date);
       const classList = el.classList;
-      classList.remove('bg-gray-200', 'dark:bg-gray-700', 'rounded-l-lg', 'rounded-r-lg')
+      classList.remove('bg-gray-200', 'dark:bg-gray-600', 'rounded-l-lg', 'rounded-r-lg')
       if (current > rangeStart && current < rangeEnd) {
         classList.add('range', 'bg-gray-200', 'dark:bg-gray-600');
         classList.remove('rounded-lg');
@@ -229,7 +229,7 @@ export default class DaysView extends View {
       }
       if (this.selected.includes(current)) {
         classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
-        classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
+        classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200', 'dark:bg-gray-600');
       }
       if (current === this.focused) {
         classList.add('focused');

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowbite-datepicker",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A Tailwind CSS powered datepicker built with vanilla JavaScript and Flowbite",
   "module": "js/main.js",
   "exports": {

diff --git a/tailwind.css b/tailwind.css
@@ -626,6 +626,24 @@ input[type=file]::file-selector-button:hover {
   background: #374151;
 }
 
+.dark input[type=file]::-webkit-file-upload-button {
+  color: white;
+  background: #4B5563;
+}
+
+.dark input[type=file]::file-selector-button {
+  color: white;
+  background: #4B5563;
+}
+
+.dark input[type=file]::-webkit-file-upload-button:hover {
+  background: #6B7280;
+}
+
+.dark input[type=file]::file-selector-button:hover {
+  background: #6B7280;
+}
+
 input[type="range"]::-webkit-slider-thumb {
   height: 1.25rem;
   width: 1.25rem;
@@ -642,6 +660,10 @@ input[type="range"]:disabled::-webkit-slider-thumb {
   background: #9CA3AF;
 }
 
+.dark input[type="range"]:disabled::-webkit-slider-thumb {
+  background: #6B7280;
+}
+
 input[type="range"]:focus::-webkit-slider-thumb {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -668,6 +690,10 @@ input[type="range"]:disabled::-moz-range-thumb {
   background: #9CA3AF;
 }
 
+.dark input[type="range"]:disabled::-moz-range-thumb {
+  background: #6B7280;
+}
+
 input[type="range"]::-moz-range-progress {
   background: #3F83F8;
 }