From 9ce9feafb7b39360b403fbd43f4bc278bd442b4e Mon Sep 17 00:00:00 2001
From: songtianlun <tianlun.song@foxmail.com>
Date: Thu, 16 Jan 2025 21:02:13 +0800
Subject: [PATCH] feat: update layouts and styles

- Update the footer layout to include copyright information and navigation links
- Improve the header layout with a responsive theme switcher
- Configure Tailwind CSS to use light and dark themes

This change enhances the project's user interface and user experience by providing a more visually appealing and responsive design. It includes updates to the footer and header layouts, making it easier for users to navigate the site. Additionally, it configures Tailwind CSS to use light and dark themes, allowing users to customize their experience to suit their preferences.
---
 app/views/layouts/_footer.html.erb | 11 +++++++++++
 app/views/layouts/_header.html.erb | 22 ++++++++++++++++++++++
 config/tailwind.config.js          |  4 ++--
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
index f6d0c10..dbf4119 100644
--- a/app/views/layouts/_footer.html.erb
+++ b/app/views/layouts/_footer.html.erb
@@ -36,4 +36,15 @@
       </nav>
     </div>
   </div>
+</footer>
+<footer class="footer bg-neutral text-neutral-content p-10">
+  <small>
+    The <a href="https://www.railstutorial.org">Ruby on Rails Tutorial</a>
+    by <a href="https://www.michaelhartl.com">Michael Hartl</a>
+  </small>
+  <nav>
+    <%= link_to "About", about_url, class: "link link-hover"%>
+    <%= link_to "Contact", contact_url, class: "link link-hover"%>
+    <a href="https://news.railstutorial.org" class="link link-hover" >News</a>
+  </nav>
 </footer>
\ No newline at end of file
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 06814ad..477da18 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -67,5 +67,27 @@
         <% end %>
       </ul>
     </details>
+    <label class="swap swap-rotate">
+      <!-- this hidden checkbox controls the state -->
+      <input type="checkbox" class="theme-controller" value="synthwave" />
+
+      <!-- sun icon -->
+      <svg
+        class="swap-off h-10 w-10 fill-current"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24">
+        <path
+          d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+      </svg>
+
+      <!-- moon icon -->
+      <svg
+        class="swap-on h-10 w-10 fill-current"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24">
+        <path
+          d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+      </svg>
+    </label>
   </div>
 </div>
\ No newline at end of file
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index 99b9ec7..e4d7df9 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -24,8 +24,8 @@ module.exports = {
     // require('@tailwindcss/container-queries'),
   ],
   daisyui: {
-    themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
-    darkTheme: "light", // name of one of the included themes for dark mode
+    themes: ["light", "dark"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
+    darkTheme: "dark", // name of one of the included themes for dark mode
     base: true, // applies background color and foreground color for root element by default
     styled: true, // include daisyUI colors and design decisions for all components
     utils: true, // adds responsive and modifier utility classes