add dark instead of blackmode

nfdi4plants · Sep 19, 2024 · a3433ad · a3433ad
1 parent 029b503
commit a3433ad
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/src/components/Home/HeroText.astro b/src/components/Home/HeroText.astro
@@ -16,7 +16,7 @@ const mainHeroText = "The ARC is a framework for organizing and documenting rese
           <span class="text-accent">C</span>ontext 
         </div>
       </h1>
-      <p class="py-6 prose-lg" style="text-align:justify">
+      <p class="py-6 prose-lg xl:prose-xl" style="text-align:justify">
         {mainHeroText}
       </p>
     </div>

diff --git a/src/components/Search.astro b/src/components/Search.astro
@@ -97,6 +97,14 @@ document.addEventListener('keydown', function(event) {
   --pagefind-ui-font: sans-serif;
 }
 
+.pagefind-ui__search-input {
+  outline: unset !important;
+}
+
+.pagefind-ui__search-input:focus {
+  border: 2px solid oklch(var(--p))
+}
+
 </style>
 
 <style>

diff --git a/src/components/ThemeController.astro b/src/components/ThemeController.astro
@@ -3,15 +3,15 @@
   function initializeTheme() {
     const savedTheme = localStorage.getItem('theme');
     const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const theme = savedTheme || (prefersDarkMode ? 'black' : 'light');
+    const theme = savedTheme || (prefersDarkMode ? 'dark' : 'light');
     document.documentElement.setAttribute('data-theme', theme);
     updateToggleButton(theme);
   }
 
   // Function to toggle between light and dark themes
   function toggleTheme() {
     const currentTheme = document.documentElement.getAttribute('data-theme');
-    const newTheme = currentTheme === 'light' ? 'black' : 'light';
+    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
     document.documentElement.setAttribute('data-theme', newTheme);
     localStorage.setItem('theme', newTheme);
     updateToggleButton(newTheme);
@@ -35,7 +35,7 @@
 <button class="btn btn-ghost btn-circle">
   <label class="swap swap-rotate">
     <!-- this hidden checkbox controls the state -->
-    <input id="theme-toggle" type="checkbox" class="theme-controller" value="black"/>
+    <input id="theme-toggle" type="checkbox" class="theme-controller" value="dark"/>
 
     <!-- sun icon -->
     <svg

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -18,17 +18,17 @@ export default {
         },
       },
       {
-        black: {
-          ...require("daisyui/src/theming/themes")["black"],
+        dark: {
+          ...require("daisyui/src/theming/themes")["dark"],
           primary: "#00a896",
           accent: "#c70039",
           warning: '#ffbe00',
           error: '#ff5861',
           info: '#00b6ff',
-          success: '#00a96e'
+          success: '#00a96e',
         },
       }
     ],
   },
-  darkMode: ['class', '[data-theme="black"]']
+  darkMode: ['class', '[data-theme="dark"]']
 }