Added light mode

Author: paviro

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "koshelf"
-version = "1.0.9"
+version = "1.0.10"
 description = "Transform your KOReader library into a beautiful reading dashboard with statistics."
 repository = "https://github.com/paviro/KOShelf"
 license = "EUPL-1.2 license"

assets/calendar.js

@@ -223,6 +223,7 @@ function showEventModal(_title, event) {
     // Animate open
     modal.classList.remove('hidden');
     modal.classList.add('opacity-0');
+    modalCard.classList.add('scale-95', 'opacity-0');
     modal.offsetHeight; // Force reflow
     requestAnimationFrame(() => {
         modal.classList.replace('opacity-0', 'opacity-100');
@@ -242,8 +243,6 @@ function hideModal() {
 
     setTimeout(() => {
         modal.classList.add('hidden');
-        modal.classList.remove('opacity-0');
-        modalCard.classList.remove('scale-95', 'opacity-0');
     }, 300);
 }
 

assets/heatmap.js

@@ -140,11 +140,11 @@ class ActivityHeatmap {
     updateActiveYearOption(selectedOption) {
         const allOptions = document.querySelectorAll('.year-option');
         allOptions.forEach(opt => {
-            opt.classList.remove('bg-dark-750', 'text-white');
+            opt.classList.remove('bg-dark-700', 'text-white');
             opt.classList.add('text-dark-200');
         });
 
-        selectedOption.classList.add('bg-dark-750', 'text-white');
+        selectedOption.classList.add('bg-dark-700', 'text-white');
         selectedOption.classList.remove('text-dark-200');
     }
 
@@ -282,16 +282,18 @@ class ActivityHeatmap {
     // Apply styling and interactions to a heatmap cell
     applyCellStyling(cell, activityLevel, dateStr, activityObj) {
         const colorClasses = [
-            'bg-dark-700',          // 0 (no activity)
-            'bg-green-900',         // 1 (low)
-            'bg-green-700',         // 2 (medium)
-            'bg-green-500',         // 3 (high)
-            'bg-green-300'          // 4 (very high)
+            ['bg-gray-200', 'dark:bg-dark-700'],       // 0 (no activity)
+            ['bg-green-100', 'dark:bg-green-900'],     // 1 (low)
+            ['bg-green-300', 'dark:bg-green-700'],     // 2 (medium)
+            ['bg-green-500', 'dark:bg-green-500'],     // 3 (high)
+            ['bg-green-600', 'dark:bg-green-300']      // 4 (very high)
         ];
 
-        // Remove all color classes and add the appropriate one
-        colorClasses.forEach(cls => cell.classList.remove(cls));
-        cell.classList.add(colorClasses[activityLevel]);
+        // Remove all possible color classes
+        colorClasses.flat().forEach(cls => cell.classList.remove(cls));
+        
+        // Add both light and dark mode classes for the current activity level
+        colorClasses[activityLevel].forEach(cls => cell.classList.add(cls));
 
         // Set tooltip
         const readLabel = DateUtils.formatDuration(activityObj.read);

assets/input.css

@@ -10,31 +10,31 @@
 
 @layer components {
   .sidebar-item {
-    @apply flex items-center px-4 py-3 text-dark-300 hover:text-white hover:bg-dark-700 rounded-lg mx-2 transition-all duration-200;
+    @apply flex items-center px-4 py-3 text-gray-700 dark:text-dark-200 hover:text-primary-600 dark:hover:text-primary-300 hover:bg-primary-50 dark:hover:bg-primary-900/20 rounded-lg mx-2 transition-all duration-200;
   }
 
   .sidebar-item-active {
     @apply bg-primary-600 text-white shadow-lg;
   }
 
   .sidebar-item-modern {
-    @apply flex items-center space-x-3 px-4 py-3 rounded-lg mx-2 transition-all duration-200 hover:bg-dark-800/50;
+    @apply flex items-center space-x-3 px-4 py-3 rounded-lg mx-2 transition-all duration-200 hover:bg-primary-50 dark:hover:bg-primary-900/20;
   }
 
   .sidebar-item-modern-active {
-    @apply bg-dark-800/70 border border-dark-700/50 shadow-sm;
+    @apply bg-primary-50 dark:bg-primary-900/30 border border-primary-200 dark:border-primary-700/50 shadow-sm;
   }
 
   .nav-item {
-    @apply text-dark-300 hover:text-white transition-all duration-200;
+    @apply text-gray-600 dark:text-dark-300 hover:text-gray-900 dark:hover:text-white transition-all duration-200;
   }
 
   .nav-item-active {
-    @apply text-primary-400 bg-dark-700/60;
+    @apply text-primary-400 bg-gray-100/60 dark:bg-dark-700/60;
   }
 
   .book-card {
-    @apply relative bg-dark-800 rounded-lg overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-2xl;
+    @apply relative bg-white dark:bg-dark-800 rounded-lg overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-2xl;
   }
 
   .book-progress-bar {
@@ -50,11 +50,11 @@
   }
 
   .search-input {
-    @apply w-full bg-dark-700 border border-dark-600 rounded-lg px-4 py-2 text-white placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
+    @apply w-full bg-gray-100 dark:bg-dark-700 border border-gray-300 dark:border-dark-600 rounded-lg px-4 py-2 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-dark-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
   }
 
   .filter-button {
-    @apply px-4 py-2 bg-dark-700 hover:bg-dark-600 text-dark-300 hover:text-white rounded-lg transition-all duration-200 shadow;
+    @apply px-4 py-2 bg-gray-100 dark:bg-dark-700 hover:bg-gray-200 dark:hover:bg-dark-600 text-gray-600 dark:text-dark-300 hover:text-gray-900 dark:hover:text-white rounded-lg transition-all duration-200 shadow;
   }
 
   .filter-button-active {
@@ -134,7 +134,7 @@
   .ec-dark .ec-day-head,
   .ec-dark .ec-sidebar,
   .ec-dark .ec-popup {
-    @apply border-dark-700;
+    @apply border-gray-200 dark:border-dark-700;
   }
 
   /* Calendar container specific styles */
@@ -167,12 +167,12 @@
 
   .calendar-container .ec .ec-header .ec-days {
     margin: 0;
-    @apply bg-dark-800 shadow border-b border-dark-700 rounded-t-lg;
-    @apply text-sm md:text-base lg:text-lg xl:text-xl py-2;
+    @apply bg-gray-200 dark:bg-dark-800 shadow-sm border-b border-gray-200 dark:border-dark-700 rounded-t-lg;
+    @apply text-gray-800 dark:text-primary-300 text-sm md:text-base lg:text-lg xl:text-xl py-2 font-medium;
   }
 
   .calendar-container .ec .ec-header .ec-day {
-    @apply border-dark-700/50 py-3 font-medium text-primary-300;
+    @apply border-gray-300 dark:border-dark-700/50 py-3 font-medium text-primary-800 dark:text-primary-300;
     border-right-width: 1px;
     border-right-style: solid;
   }
@@ -192,37 +192,23 @@
 
   /* Style the calendar body */
   .calendar-container .ec .ec-body {
-    @apply bg-dark-850/50 rounded-lg mt-1 border border-dark-700;
+    @apply bg-gray-50 dark:bg-dark-850/50 rounded-lg mt-1 border border-gray-200 dark:border-dark-700 shadow-sm;
     border-top: none;
   }
 
-  /* Only show inner borders */
+  /* Day cell borders and hover */
   .calendar-container .ec .ec-day {
-    border-color: rgba(51, 65, 85, 0.5); /* dark-700 with opacity */
-  }
-  
-  /* Day cell styling */
-  .day-cell {
-    @apply transition-colors duration-200;
-  }
-  
-  .day-cell:hover {
-    @apply bg-dark-800/80;
+    @apply border-gray-300 dark:border-dark-700/50 transition-colors duration-200;
   }
 
   /* Today highlighting */
   .calendar-container .ec .ec-today {
-    @apply bg-primary-900/10 font-medium;
+    @apply bg-primary-200/60 dark:bg-primary-900/30 font-medium border border-primary-400;
   }
 
   /* Event styling */
-  .ec-dark .ec-event {
-    @apply shadow-lg rounded-lg px-1 md:py-1 md:px-2;
-    @apply text-2xs md:text-xs lg:text-sm;
-  }
-  
-  /* Add some spacing between events */
-  .ec-dark .ec-event:not(:last-child) {
+  .calendar-container .ec-event {
+    @apply shadow-lg rounded-lg px-1 md:py-1 md:px-2 text-2xs md:text-xs lg:text-sm;
     @apply mb-1;
   }
 

assets/statistics.js

@@ -109,20 +109,28 @@ class StatisticsManager {
         });
 
         // Mark first option as active if none is selected
-        if (weekOptionElements.length > 0 && !weekOptionElements[0].classList.contains('bg-dark-750')) {
-            weekOptionElements[0].classList.add('bg-dark-750', 'text-white');
-            weekOptionElements[0].classList.remove('text-dark-200');
+        if (weekOptionElements.length > 0 && !weekOptionElements[0].classList.contains('bg-primary-50')) {
+            weekOptionElements[0].classList.add('bg-primary-50', 'dark:bg-dark-700', 'text-primary-900', 'dark:text-white');
+            weekOptionElements[0].classList.remove('text-gray-600', 'dark:text-dark-200');
         }
     }
 
     // Update active state for dropdown options
     updateActiveOption(allOptions, selectedOption) {
         allOptions.forEach(el => {
-            el.classList.remove('bg-dark-750', 'text-white');
-            el.classList.add('text-dark-200');
+            // Remove both light and dark mode active classes
+            el.classList.remove('bg-primary-50', 'dark:bg-dark-700', 'text-primary-900', 'dark:text-white', 'bg-green-50', 'text-green-900');
+            // Reset to default text color
+            el.classList.add('text-gray-600', 'dark:text-dark-200');
         });
-        selectedOption.classList.add('bg-dark-750', 'text-white');
-        selectedOption.classList.remove('text-dark-200');
+
+        // Add appropriate active classes based on the context (week or year selector)
+        if (selectedOption.closest('#weekOptions')) {
+            selectedOption.classList.add('bg-primary-50', 'dark:bg-dark-700', 'text-primary-900', 'dark:text-white');
+        } else {
+            selectedOption.classList.add('bg-green-50', 'dark:bg-dark-700', 'text-green-900', 'dark:text-white');
+        }
+        selectedOption.classList.remove('text-gray-600', 'dark:text-dark-200');
     }
 
     // Show loading indicator

templates/book_details/book_details.html

@@ -6,12 +6,12 @@
     <title>{{ book.epub_info.title }} - {{ site_title }}</title>
     <link rel="stylesheet" href="/assets/css/style.css">
 </head>
-<body class="min-h-full bg-dark-900 text-white font-sans">
+<body class="min-h-full bg-gray-100 dark:bg-dark-900 text-gray-900 dark:text-white font-sans">
     <!-- Sidebar - Hidden on mobile, visible on md+ screens -->
     {% include "sidebar.html" %}
 
     <!-- Header - Fixed at top -->
-    <header class="fixed top-0 left-0 right-0 md:left-64 bg-dark-850/75 backdrop-blur-sm border-b border-dark-700/50 px-4 md:px-6 h-[70px] md:h-[80px] z-40">
+    <header class="fixed top-0 left-0 right-0 md:left-64 bg-white/90 dark:bg-dark-850/75 backdrop-blur-sm border-b border-gray-200/50 dark:border-dark-700/50 px-4 md:px-6 h-[70px] md:h-[80px] z-40">
         <div class="flex items-center h-full min-w-0 flex-1">
             <!-- Mobile Title & Back Button -->
             <div class="md:hidden flex items-center space-x-3 min-w-0 flex-1">
@@ -20,20 +20,20 @@
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                     </svg>
                 </button>
-                <div class="h-8 w-px bg-dark-700 mx-3 md:mx-6"></div>
+                <div class="h-8 w-px bg-gray-200 dark:bg-dark-700 mx-3 md:mx-6"></div>
                 <div class="min-w-0 flex-1">
-                    <h1 class="text-lg font-bold text-white truncate">{{ book.epub_info.title }}</h1>
+                    <h1 class="text-lg font-bold text-gray-900 dark:text-white truncate">{{ book.epub_info.title }}</h1>
                     {% if !book.epub_info.authors.is_empty() %}
-                    <p class="text-xs text-dark-300 truncate">by {{ book.epub_info.authors[0] }}</p>
+                    <p class="text-xs text-gray-500 dark:text-dark-300 truncate">by {{ book.epub_info.authors[0] }}</p>
                     {% endif %}
                 </div>
             </div>
 
             <!-- Desktop Title -->
             <div class="hidden md:block min-w-0 flex-1">
-                <h1 class="text-2xl font-bold text-white truncate">{{ book.epub_info.title }}</h1>
+                <h1 class="text-2xl font-bold text-gray-900 dark:text-white truncate">{{ book.epub_info.title }}</h1>
                 {% if !book.epub_info.authors.is_empty() %}
-                <p class="text-sm text-dark-300 truncate">by {{ book.epub_info.authors[0] }}</p>
+                <p class="text-sm text-gray-500 dark:text-dark-300 truncate">by {{ book.epub_info.authors[0] }}</p>
                 {% endif %}
             </div>
         </div>

templates/book_details/components/additional_info.html

@@ -1,15 +1,15 @@
 <!-- Additional Information -->
 <section data-name="additional-info" data-default-visible="false">
-    <div class="flex items-center justify-between mb-4 md:mb-6 pb-4 border-b border-dark-700/50">
+    <div class="flex items-center justify-between mb-4 md:mb-6 pb-4 border-b border-gray-200/50 dark:border-dark-700/50">
         <div class="flex items-center space-x-3">
             <div class="w-2 h-6 md:h-8 bg-gradient-to-b from-cyan-400 to-cyan-600 rounded-full"></div>
-            <h2 class="text-xl md:text-2xl font-bold text-white">Additional Information</h2>
+            <h2 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">Additional Information</h2>
         </div>
 
         <!-- Hide/Show Button -->
-        <button class="flex items-center space-x-2 px-3 py-2 bg-dark-800/50 border border-dark-700/70 rounded-lg hover:bg-dark-700/50 transition-colors">
-            <span class="text-sm text-dark-300">Loading...</span>
-            <svg class="w-4 h-4 text-dark-300 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <button class="flex items-center space-x-2 px-3 py-2 bg-gray-100/50 dark:bg-dark-800/50 border border-gray-300/70 dark:border-dark-700/70 rounded-lg hover:bg-gray-200/50 dark:hover:bg-dark-700/50 transition-colors">
+            <span class="text-sm text-gray-600 dark:text-dark-300">Loading...</span>
+            <svg class="w-4 h-4 text-gray-600 dark:text-dark-300 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
             </svg>
         </button>
@@ -20,25 +20,25 @@ <h2 class="text-xl md:text-2xl font-bold text-white">Additional Information</h2>
         <div class="space-y-6">
             {% match book.publisher() %}
             {% when Some with (publisher) %}
-            <div class="bg-dark-800/50 border border-dark-700/70 rounded-lg p-4">
+            <div class="bg-white dark:bg-dark-800 border border-gray-200/70 dark:border-dark-700/70 rounded-lg p-4">
                 <div class="flex items-center space-x-3">
                     <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg flex items-center justify-center">
                         <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                         </svg>
                     </div>
                     <div>
-                        <div class="text-lg font-bold text-white">{{ publisher }}</div>
-                        <div class="text-sm text-dark-400">Publisher</div>
+                        <div class="text-lg font-bold text-gray-900 dark:text-white">{{ publisher }}</div>
+                        <div class="text-sm text-gray-500 dark:text-dark-400">Publisher</div>
                     </div>
                 </div>
             </div>
             {% when None %}
             {% endmatch %}
 
             {% if !book.identifiers().is_empty() %}
-            <div class="bg-dark-800/50 border border-dark-700/70 rounded-lg p-6">
-                <h4 class="text-lg font-semibold text-white mb-4 flex items-center">
+            <div class="bg-white dark:bg-dark-800 border border-gray-200/70 dark:border-dark-700/70 rounded-lg p-6">
+                <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                     <div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center mr-3">
                         <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path>
@@ -50,27 +50,27 @@ <h4 class="text-lg font-semibold text-white mb-4 flex items-center">
                     {% for identifier in book.identifiers() %}
                     {% if identifier.is_linkable() %}
                     <a href="{{ identifier.url().unwrap() }}" target="_blank" rel="noopener noreferrer" 
-                       class="group relative bg-dark-700/50 border border-dark-600/70 rounded-lg p-4 hover:border-primary-500 hover:bg-dark-650/50 transition-all duration-200 shadow-sm hover:shadow-md">
+                       class="group relative bg-gray-100 dark:bg-dark-700 border border-gray-300 dark:border-dark-600 rounded-lg p-4 hover:border-primary-500 hover:bg-primary-50 dark:hover:bg-dark-650 transition-all duration-200 shadow-sm hover:shadow-md">
                         <div class="flex items-center justify-between mb-2">
-                            <div class="text-sm font-medium text-primary-300 uppercase tracking-wide group-hover:text-primary-200">
+                            <div class="text-sm font-medium text-primary-600 dark:text-primary-300 uppercase tracking-wide group-hover:text-primary-700 dark:group-hover:text-primary-200">
                                 {{ identifier.display_scheme() }}
                             </div>
-                            <div class="text-dark-400 transform translate-x-1 group-hover:translate-x-0 transition-all duration-200">
+                            <div class="text-gray-400 dark:text-dark-400 transform translate-x-1 group-hover:translate-x-0 transition-all duration-200">
                                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                 </svg>
                             </div>
                         </div>
-                        <div class="text-sm text-dark-300 font-mono break-all group-hover:text-white transition-colors duration-200">
+                        <div class="text-sm text-gray-700 dark:text-dark-300 font-mono break-all group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-200">
                             {{ identifier.value }}
                         </div>
                     </a>
                     {% else %}
-                    <div class="bg-dark-700/50 border border-dark-600/70 rounded-lg p-4 shadow-sm">
-                        <div class="text-sm font-medium text-primary-300 uppercase tracking-wide mb-2">
+                    <div class="bg-gray-100 dark:bg-dark-700 border border-gray-300 dark:border-dark-600 rounded-lg p-4 shadow-sm">
+                        <div class="text-sm font-medium text-primary-600 dark:text-primary-300 uppercase tracking-wide mb-2">
                             {{ identifier.display_scheme() }}
                         </div>
-                        <div class="text-sm text-dark-300 font-mono break-all">
+                        <div class="text-sm text-gray-700 dark:text-dark-300 font-mono break-all">
                             {{ identifier.value }}
                         </div>
                     </div>