Главная Обзор Помощь
Регистрация Вход
dkb
/
knotes
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

set dark theme as default

Daniel Bohry 1 месяц назад
Родитель
a689956c9c
Сommit
1261935029
5 измененных файлов с 61 добавлено и 40 удалено
Единый вид Показать статистику Diff
  1. 1 1
      src/main/resources/static/404.html
  2. 1 1
      src/main/resources/static/components/base.html
  3. 18 18
      src/main/resources/static/css/style.css
  4. 3 0
      src/main/resources/static/js/components.js
  5. 38 20
      src/main/resources/static/js/script.js

+ 1 - 1
src/main/resources/static/404.html
Просмотреть файл 

@@ -3,7 +3,7 @@
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 
-    <meta name="theme-color" content="#007bff">
 
+    <meta name="theme-color" content="#2d2d2d">
 
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
 
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
 
     <meta name="apple-mobile-web-app-title" content="kNotes">
 
     <meta name="apple-mobile-web-app-title" content="kNotes">

+ 1 - 1
src/main/resources/static/components/base.html
Просмотреть файл 

@@ -3,7 +3,7 @@
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 
-    <meta name="theme-color" content="#007bff">
 
+    <meta name="theme-color" content="#2d2d2d">
 
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
 
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
 
     <meta name="apple-mobile-web-app-title" content="kNotes">
 
     <meta name="apple-mobile-web-app-title" content="kNotes">

+ 18 - 18
src/main/resources/static/css/style.css
Просмотреть файл 

@@ -1,24 +1,7 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 
 
 
-/* CSS Variables for Theme Support */
 
+/* CSS Variables for Theme Support - Dark Theme Default */
 
 :root {
 
 :root {
 
-    --bg-primary: #fafafa;
 
-    --bg-secondary: white;
 
-    --bg-tertiary: #f5f5f5;
 
-    --text-primary: #333;
 
-    --text-secondary: #666;
 
-    --text-tertiary: #999;
 
-    --border-primary: #e0e0e0;
 
-    --border-secondary: #ddd;
 
-    --accent-primary: #007bff;
 
-    --accent-primary-hover: #0056b3;
 
-    --accent-secondary: #6c757d;
 
-    --overlay-bg: rgba(0,0,0,0.5);
 
-    --shadow: rgba(0,0,0,0.3);
 
-}
 
-
 
-/* Dark Theme Variables */
 
-[data-theme="dark"] {
 
     --bg-primary: #1a1a1a;
 
     --bg-primary: #1a1a1a;
 
     --bg-secondary: #2d2d2d;
 
     --bg-secondary: #2d2d2d;
 
     --bg-tertiary: #404040;
 
     --bg-tertiary: #404040;
 
@@ -34,6 +17,23 @@
 
     --shadow: rgba(0,0,0,0.5);
 
     --shadow: rgba(0,0,0,0.5);
 
 }
 
 }
 
 
 
+/* Light Theme Variables */
 
+[data-theme="light"] {
 
+    --bg-primary: #fafafa;
 
+    --bg-secondary: white;
 
+    --bg-tertiary: #f5f5f5;
 
+    --text-primary: #333;
 
+    --text-secondary: #666;
 
+    --text-tertiary: #999;
 
+    --border-primary: #e0e0e0;
 
+    --border-secondary: #ddd;
 
+    --accent-primary: #007bff;
 
+    --accent-primary-hover: #0056b3;
 
+    --accent-secondary: #6c757d;
 
+    --overlay-bg: rgba(0,0,0,0.5);
 
+    --shadow: rgba(0,0,0,0.3);
 
+}
 
+
 
 * {
 
 * {
 
     margin: 0;
 
     margin: 0;
 
     padding: 0;
 
     padding: 0;

+ 3 - 0
src/main/resources/static/js/components.js
Просмотреть файл 

@@ -71,4 +71,7 @@ async function initPage(pageType) {
 
     if (typeof initializeTheme === 'function') {
 
     if (typeof initializeTheme === 'function') {
 
         initializeTheme();
 
         initializeTheme();
 
     }
 
     }
 
+
 
+    // Ensure theme switch state is correct after components load
 
+    updateThemeSwitchState();
 
 }
 
 }

+ 38 - 20
src/main/resources/static/js/script.js
Просмотреть файл 

@@ -8,25 +8,43 @@ const VERSION_CHECK_INTERVAL_MS = 5000;
 
 
 
 // Theme management
 
 // Theme management
 
 function initializeTheme() {
 
 function initializeTheme() {
 
-    // Get saved theme preference or default to light
 
-    const savedTheme = localStorage.getItem('theme') || 'light';
 
+    // Get saved theme preference or default to dark
 
+    const savedTheme = localStorage.getItem('theme') || 'dark';
 
     const body = document.body;
 
     const body = document.body;
 
-    const themeSwitch = document.getElementById('themeSwitch');
 
-
 
-    if (!themeSwitch) return;
 
 
 
-    // Apply the theme
 
-    if (savedTheme === 'dark') {
 
-        body.setAttribute('data-theme', 'dark');
 
-        themeSwitch.classList.add('dark');
 
+    // Apply theme to body first (this works even if switch isn't loaded yet)
 
+    if (savedTheme === 'light') {
 
+        body.setAttribute('data-theme', 'light');
 
     } else {
 
     } else {
 
         body.removeAttribute('data-theme');
 
         body.removeAttribute('data-theme');
 
-        themeSwitch.classList.remove('dark');
 
+    }
 
+
 
+    // Update theme switch if it exists
 
+    const themeSwitch = document.getElementById('themeSwitch');
 
+    if (themeSwitch) {
 
+        if (savedTheme === 'light') {
 
+            themeSwitch.classList.remove('dark');
 
+        } else {
 
+            themeSwitch.classList.add('dark');
 
+        }
 
     }
 
     }
 
 
 
     updateThemeColor();
 
     updateThemeColor();
 
 }
 
 }
 
 
 
+function updateThemeSwitchState() {
 
+    const savedTheme = localStorage.getItem('theme') || 'dark';
 
+    const themeSwitch = document.getElementById('themeSwitch');
 
+
 
+    if (themeSwitch) {
 
+        if (savedTheme === 'light') {
 
+            themeSwitch.classList.remove('dark');
 
+        } else {
 
+            themeSwitch.classList.add('dark');
 
+        }
 
+    }
 
+}
 
+
 
 function toggleTheme() {
 
 function toggleTheme() {
 
     const body = document.body;
 
     const body = document.body;
 
     const themeSwitch = document.getElementById('themeSwitch');
 
     const themeSwitch = document.getElementById('themeSwitch');
 
@@ -36,16 +54,16 @@ function toggleTheme() {
 
     // Toggle between light and dark themes
 
     // Toggle between light and dark themes
 
     const currentTheme = body.getAttribute('data-theme');
 
     const currentTheme = body.getAttribute('data-theme');
 
 
 
-    if (currentTheme === 'dark') {
 
-        // Switch to light theme
 
-        body.removeAttribute('data-theme');
 
-        themeSwitch.classList.remove('dark');
 
-        localStorage.setItem('theme', 'light');
 
-    } else {
 
+    if (currentTheme === 'light') {
 
         // Switch to dark theme
 
         // Switch to dark theme
 
-        body.setAttribute('data-theme', 'dark');
 
+        body.removeAttribute('data-theme');
 
         themeSwitch.classList.add('dark');
 
         themeSwitch.classList.add('dark');
 
         localStorage.setItem('theme', 'dark');
 
         localStorage.setItem('theme', 'dark');
 
+    } else {
 
+        // Switch to light theme
 
+        body.setAttribute('data-theme', 'light');
 
+        themeSwitch.classList.remove('dark');
 
+        localStorage.setItem('theme', 'light');
 
     }
 
     }
 
 
 
     // Update theme color for mobile browsers
 
     // Update theme color for mobile browsers
 
@@ -144,10 +162,10 @@ function updateThemeColor() {
 
     const currentTheme = document.body.getAttribute('data-theme');
 
     const currentTheme = document.body.getAttribute('data-theme');
 
 
 
     if (themeColorMeta) {
 
     if (themeColorMeta) {
 
-        if (currentTheme === 'dark') {
 
-            themeColorMeta.setAttribute('content', '#2d2d2d');
 
-        } else {
 
+        if (currentTheme === 'light') {
 
             themeColorMeta.setAttribute('content', '#007bff');
 
             themeColorMeta.setAttribute('content', '#007bff');
 
+        } else {
 
+            themeColorMeta.setAttribute('content', '#2d2d2d');
 
         }
 
         }
 
     }
 
     }
 
 }
 
 }