dark mode (#57)

* chore(taskfile): improved task preview

added node_modules/.bin folder to the path to force use the hugo version from npm. Added automatic opening of website in preview mode. Added the correct baseUrl to preview

* feat: dark mode

This change introduces the ability for the user to set the dark theme

Author: d4rkstar

Taskfile.yaml

@@ -44,11 +44,13 @@ tasks:
       - rm -rf openserverless-task
 
   preview:
+    silent: true
     desc: preview the websites
     cmds:
-      - hugo server -O
+      - PATH="node_modules/.bin:$PATH" hugo server --baseURL "http://localhost:1313/" -O
 
   debug:
+    silent: true
     desc: debug the websites
     cmds:
-      - hugo server --ignoreCache  --debug --disableFastRender
+      - PATH="node_modules/.bin:$PATH" hugo server --ignoreCache  --debug --disableFastRender

assets/scss/_styles_project.scss

@@ -26,6 +26,67 @@
     url('/fonts/quattrocento-v23-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
 }
 
+:root {
+    --primary-color: #0073e6;
+    --background-light: #ffffff;
+    --text-light: #333333;
+    --border-light: #dddddd;
+    --link-light: #0056b3;
+    --code-bg-light: #f5f5f5;
+    --bs-secondary-color: #333333;
+  }
+  
+  .dark-mode {
+    --background-light: #121212;
+    --text-light: #e0e0e0;
+    --border-light: #444444;
+    --link-light: #4a90e2;
+    --code-bg-light: #1e1e1e;
+    --bs-secondary-color: #e0e0e0;
+    --td-pre-bg: #1e1e1e;
+  }
+  
+  body {
+    background-color: var(--background-light);
+    color: var(--text-light);
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+  
+  a {
+    color: var(--link-light);
+    transition: color 0.3s ease;
+  }
+  
+  a:hover {
+    color: color-mix(in srgb, var(--link-light) 80%, white);
+  }
+  
+  header, footer {
+    background-color: var(--background-light);
+    border-bottom: 1px solid var(--border-light);
+  }
+  
+  pre, code {
+    background-color: var(--code-bg-light);
+    color: var(--text-light);
+    border-radius: 5px;
+    padding: 5px;
+  }
+  
+  button.toggle-dark-mode {
+    background: var(--primary-color);
+    color: #fff;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  button.toggle-dark-mode:hover {
+    background: color-mix(in srgb, var(--primary-color) 80%, black);
+  }
+  
+
 p { font-family: "Quattrocento" !important;}
 
 .navbar, aside, .quote-title {
@@ -36,6 +97,8 @@ h1, h2, h3 ,h4, h5, .lead {
     font-family: "Baloo 2" !important;
 }
 
+
+
 div.td-content h1,
 div.td-content h2,
 div.td-content h3,
@@ -45,7 +108,7 @@ div.td-content h6 {
     color: #265d85 !important;
 }
 
-.td-sidebar-nav-active-item {
+.ttq,d-sidebar-nav-active-item {
     color: #ff0000;
 }
 
@@ -57,6 +120,7 @@ aside{
 .text-default { color: black; }
 .text-white { color: white; }
 
+
 .center-image-container {
     text-align: center;
 }

assets/scss/_variables_project.scss

@@ -1,4 +1,5 @@
 $font-family-base: "Quattrocento";
 $td-enable-google-fonts: false;
 
-$primary: #265d85 !default;
+$primary: #265d85 !default;
+

hugo.yaml

@@ -193,6 +193,8 @@ params:
     # add "hide_readingtime: true" to the page's front matter
     readingtime:
       enable: false
+    
+    showLightDarkModeMenu: true
 
   links:
     # End user relevant links. These will show up on left side of footer and in the community page if you have one.

layouts/partials/footer.html

@@ -50,3 +50,6 @@
         </div>
     </div>
 </footer>
+{{ if .Site.Params.ui.showLightDarkModeMenu -}}
+{{ partial "theme-toggler" . }}
+{{ end -}}

layouts/partials/head.html

@@ -1,3 +1,12 @@
+<script>
+    // Applica immediatamente la modalità scura se salvata in localStorage
+    (function() {
+      const currentTheme = localStorage.getItem('theme');
+      if (currentTheme === 'dark') {
+        document.documentElement.classList.add('dark-mode');
+      }
+    })();
+  </script>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 {{ range .AlternativeOutputFormats -}}

layouts/partials/navbar.html

@@ -71,17 +71,7 @@
                         {{ partial "navbar-lang-selector.html" . -}}
                     </li>
                 {{ end -}}
-                {{ if .Site.Params.ui.showLightDarkModeMenu -}}
-                    <li class="td-light-dark-menu nav-item dropdown">
-                        {{ partial "theme-toggler" . }}
-                    </li>
-                {{ end -}}
             </ul>
-
-
-        </div>
-        <div class="d-none d-lg-block">
-            {{ partial "search-input.html" . }}
-        </div>
+        </div>        
     </div>
 </nav>

layouts/partials/theme-toggler.html

@@ -0,0 +1,57 @@
+<div id="theme-toggler-container">
+  <button id="theme-toggler" class="btn btn-light-dark" aria-label="Toggle theme">
+    <span id="theme-icon" class="fa fa-sun"></span>
+  </button>
+</div>
+
+<script>
+  // Gestione della modalità scura
+  const themeToggler = document.getElementById('theme-toggler');
+  const themeIcon = document.getElementById('theme-icon');
+  const currentTheme = localStorage.getItem('theme') || 'light';
+
+  // Cambia tema al clic
+  themeToggler.addEventListener('click', () => {
+    document.body.classList.toggle('dark-mode');
+    const isDarkMode = document.body.classList.contains('dark-mode');
+    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+    themeIcon.classList.toggle('fa-sun', !isDarkMode);
+    themeIcon.classList.toggle('fa-moon', isDarkMode);
+    
+  });
+</script>
+
+<style>
+  /* Stili per il pulsante flottante */
+  #theme-toggler-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+  }
+
+  .btn-light-dark {
+    background: #ffffff;
+    border: 1px solid #ddd;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
+  }
+
+  .btn-light-dark:hover {
+    background: #f0f0f0;
+    transform: scale(1.1);
+  }
+
+  .dark-mode .btn-light-dark {
+    background: #333333;
+    color: #ffffff;
+    border-color: #444444;
+  }
+</style>