diff --git a/package-lock.json b/package-lock.json
index c982de7..3249297 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "format-duration": "^3.0.2",
         "html-entities": "^2.3.3",
         "tailwindcss": "^3.2.4",
+        "theme-change": "^2.3.0",
         "vue": "^3.2.45"
       },
       "devDependencies": {
@@ -6103,6 +6104,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/theme-change": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/theme-change/-/theme-change-2.3.0.tgz",
+      "integrity": "sha512-MOv3g4dQfte9Q7WZKyLRshcw9JqcJCwB+CO1OS7lN1WMJcQyPzmpgwm5Ve55vQ4qt62g++A9+8s1x+vRPpm42w=="
+    },
     "node_modules/tiny-glob": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -10986,6 +10992,11 @@
         }
       }
     },
+    "theme-change": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/theme-change/-/theme-change-2.3.0.tgz",
+      "integrity": "sha512-MOv3g4dQfte9Q7WZKyLRshcw9JqcJCwB+CO1OS7lN1WMJcQyPzmpgwm5Ve55vQ4qt62g++A9+8s1x+vRPpm42w=="
+    },
     "tiny-glob": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
diff --git a/package.json b/package.json
index 387570d..afd2e42 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "format-duration": "^3.0.2",
     "html-entities": "^2.3.3",
     "tailwindcss": "^3.2.4",
+    "theme-change": "^2.3.0",
     "vue": "^3.2.45"
   },
   "devDependencies": {
diff --git a/src/components/NavItems.astro b/src/components/NavItems.astro
index 3301d11..74132af 100644
--- a/src/components/NavItems.astro
+++ b/src/components/NavItems.astro
@@ -29,4 +29,11 @@ const { class: _class } = Astro.props as Props;
       About
     </a>
   </li>
+  <div class="md:flex-1"></div>
+  <li>
+    <button data-toggle-theme="dark,light">
+      <i class="fa-solid fa-circle-half-stroke"></i>
+      Switch color theme
+    </button>
+  </li>
 </ul>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 85e8864..35023c3 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -34,12 +34,33 @@ const metaTagTitle = `${title} - Spotify Playlist Archive`;
     <meta name="twitter:creator" content="@MaciejPedzich" />
     <meta property="twitter:title" content={metaTagTitle} />
     <meta property="twitter:description" content={description} />
+    <script is:inline>
+      if (localStorage.getItem('theme') === null) {
+        if (
+          window.matchMedia &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches
+        ) {
+          document.documentElement.setAttribute('data-theme', 'dark');
+        } else {
+          document.documentElement.setAttribute('data-theme', 'light');
+        }
+      } else {
+        document.documentElement.setAttribute(
+          'data-theme',
+          localStorage.getItem('theme')
+        );
+      }
+    </script>
+    <script>
+      import { themeChange } from 'theme-change';
+      themeChange();
+    </script>
   </head>
   <body>
     <header
-      class="navbar bg-base-200 fixed top-0 w-full z-50 border-b-[1px] border-gray-600"
+      class="navbar bg-base-200 fixed top-0 w-full z-50 border-b-[1px] border-base-content border-opacity-20"
     >
-      <div class="navbar-start">
+      <div class="navbar-start lg:w-full">
         <div class="lg:flex-none flex-1">
           <a
             href="/"
@@ -48,8 +69,8 @@ const metaTagTitle = `${title} - Spotify Playlist Archive`;
             Spotify Playlist Archive
           </a>
         </div>
-        <div class="lg:flex hidden">
-          <NavItems class="menu menu-horizontal p-0" />
+        <div class="lg:flex lg:w-full hidden">
+          <NavItems class="menu menu-horizontal lg:flex-1 p-0" />
         </div>
       </div>
       <div class="navbar-end lg:hidden">
