Add logo white ketika dark mode

Author: jujun-jamaludin

public/img/logo-semutdev-white.png

@@ -5,7 +5,7 @@ import { SITE_TITLE } from "../consts";
 
 <header
   id="navbar"
-  class="bg-white shadow-md sticky top-0 z-50 transition-transform duration-300 ease-in-out"
+  class="bg-white dark:bg-gray-900 shadow-md dark:shadow-gray-800 sticky top-0 z-50 transition-transform duration-300 ease-in-out"
 >
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex items-center justify-between h-16">
@@ -29,16 +29,34 @@ import { SITE_TITLE } from "../consts";
         </a>
       </div>
       <div class="absolute left-1/2 transform -translate-x-1/2">
-        <a href="/"
-          ><img
+        <a href="/" class="relative">
+          <img
             width="150"
             src="/img/logo-semutdev.png"
             alt="Logo semutdev"
-          /></a
-        >
+            class="dark:hidden"
+          />
+          <img
+            width="150"
+            src="/img/logo-semutdev-white.png"
+            alt="Logo semutdev"
+            class="hidden dark:block"
+          />
+        </a>
       </div>
-      <div class="flex items-center">
-        <button id="menu-toggle" class="text-gray-700 hover:text-blue-600">
+      <div class="flex items-center gap-3">
+        <!-- Dark Mode Toggle -->
+        <button id="theme-toggle" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400" aria-label="Toggle dark mode">
+          <svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+          </svg>
+          <svg id="theme-toggle-light-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+          </svg>
+        </button>
+
+        <!-- Menu Toggle -->
+        <button id="menu-toggle" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-6 w-6"
@@ -87,7 +105,75 @@ import { SITE_TITLE } from "../consts";
 </div>
 
 <header>
+  <script is:inline>
+    // Dark Mode Script - Runs immediately to prevent flash
+    const theme = (() => {
+      if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+        return localStorage.getItem('theme');
+      }
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+      }
+      return 'light';
+    })();
+
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+
+    window.localStorage.setItem('theme', theme);
+  </script>
+
+  <script>
+    // Theme Toggle Logic
+    document.addEventListener('DOMContentLoaded', () => {
+      const themeToggle = document.getElementById('theme-toggle');
+      const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+      const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+
+      if (!themeToggle || !themeToggleDarkIcon || !themeToggleLightIcon) {
+        console.error('Theme toggle elements not found');
+        return;
+      }
+
+      function updateThemeIcons() {
+        const currentTheme = localStorage.getItem('theme') || 'light';
+        if (currentTheme === 'dark') {
+          themeToggleLightIcon.classList.remove('hidden');
+          themeToggleDarkIcon.classList.add('hidden');
+        } else {
+          themeToggleDarkIcon.classList.remove('hidden');
+          themeToggleLightIcon.classList.add('hidden');
+        }
+      }
+
+      // Initialize icons
+      updateThemeIcons();
+
+      // Toggle theme
+      themeToggle.addEventListener('click', () => {
+        const currentTheme = localStorage.getItem('theme') || 'light';
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        console.log('Toggling theme from', currentTheme, 'to', newTheme);
+
+        localStorage.setItem('theme', newTheme);
+
+        if (newTheme === 'dark') {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+        }
+
+        updateThemeIcons();
+      });
+    });
+  </script>
+
   <script type="module">
+    // Menu Toggle Logic
     const menuToggle = document.getElementById("menu-toggle");
     const menuClose = document.getElementById("menu-close");
     const mobileMenu = document.getElementById("mobile-menu");

src/components/Header.astro

@@ -21,19 +21,26 @@ const products = (await getCollection('produk', ({ data }) => {
   <head>
     <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
   </head>
-  <body class="bg-white">
+  <body class="bg-white dark:bg-gray-900 transition-colors">
     <main class="max-w-4xl mx-auto min-h-screen px-4 py-8 md:py-16">
       <!-- Hero Section -->
       <section class="text-center mb-12">
-        <img
-          src="/img/logo-kotak-label.png"
-          alt={SITE_TITLE}
-          class="w-32 md:w-40 mx-auto mb-6"
-        />
-        <h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-3">
+        <div class="w-32 md:w-40 mx-auto mb-6 relative">
+          <img
+            src="/img/logo-kotak-label.png"
+            alt={SITE_TITLE}
+            class="w-full dark:hidden"
+          />
+          <img
+            src="/img/logo-semutdev-white.png"
+            alt={SITE_TITLE}
+            class="w-full hidden dark:block"
+          />
+        </div>
+        <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-3">
           Tutorial, Teknologi, Koding 🔥
         </h1>
-        <p class="text-gray-600 text-base md:text-lg mb-6 max-w-2xl mx-auto">
+        <p class="text-gray-600 dark:text-gray-400 text-base md:text-lg mb-6 max-w-2xl mx-auto">
           Berbagi rayapan programmer mulai dari pengalaman, tutorial, produk dan lain sebagainya.
         </p>
 
@@ -106,12 +113,12 @@ const products = (await getCollection('produk', ({ data }) => {
           </p>
           <div class="flex items-center justify-center gap-6 text-sm md:text-base">
             <div>
-              <div class="text-3xl md:text-4xl font-bold">25</div>
+              <div class="text-3xl md:text-4xl font-bold">4</div>
               <div class="text-white/80">Apps Created</div>
             </div>
             <div class="h-12 w-px bg-white/30"></div>
             <div>
-              <div class="text-3xl md:text-4xl font-bold">75</div>
+              <div class="text-3xl md:text-4xl font-bold">96</div>
               <div class="text-white/80">To Go</div>
             </div>
           </div>
@@ -121,18 +128,18 @@ const products = (await getCollection('produk', ({ data }) => {
       <!-- Product section -->
       <section class="mb-12">
         <div class="flex items-center justify-between mb-6">
-          <h2 class="text-xl md:text-2xl font-bold text-gray-900">Produk Digital</h2>
-          <a href="/produk" class="text-blue-600 hover:text-blue-700 text-sm font-medium">
+          <h2 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">Produk Digital</h2>
+          <a href="/produk" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium">
             Lihat Semua →
           </a>
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
           {products.slice(0, 6).map((product) => (
             <a
               href={product.data.showDetail == true ? `/produk/${product.id}/` : `${product.data.checkoutUrl}/`}
-              class="group block border border-gray-200 rounded-xl overflow-hidden hover:shadow-md hover:border-blue-500 transition-all"
+              class="group block border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden hover:shadow-md hover:border-blue-500 dark:hover:border-blue-400 transition-all bg-white dark:bg-gray-800"
             >
-              <div class="aspect-video bg-gradient-to-br from-blue-50 to-purple-50 relative overflow-hidden">
+              <div class="aspect-video bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 relative overflow-hidden">
                 <img
                   src={product.data.image}
                   alt={product.data.title}
@@ -141,15 +148,15 @@ const products = (await getCollection('produk', ({ data }) => {
                 />
               </div>
               <div class="p-4">
-                <h3 class="text-gray-900 font-medium text-sm mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors">
+                <h3 class="text-gray-900 dark:text-white font-medium text-sm mb-2 line-clamp-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                   {product.data.title}
                 </h3>
                 <div class="flex items-baseline gap-2">
-                  <span class="text-blue-600 text-lg font-bold">
+                  <span class="text-blue-600 dark:text-blue-400 text-lg font-bold">
                     Rp{product.data.price.toLocaleString('id-ID')}
                   </span>
                   {product.data.discount != 0 && (
-                    <span class="text-gray-400 text-sm line-through">
+                    <span class="text-gray-400 dark:text-gray-500 text-sm line-through">
                       Rp{product.data.discount.toLocaleString('id-ID')}
                     </span>
                   )}
@@ -162,19 +169,19 @@ const products = (await getCollection('produk', ({ data }) => {
       <!-- Blog section -->
       <section class="mb-12">
         <div class="flex items-center justify-between mb-6">
-          <h2 class="text-xl md:text-2xl font-bold text-gray-900">Artikel Terbaru</h2>
-          <a href="/blog" class="text-blue-600 hover:text-blue-700 text-sm font-medium">
+          <h2 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">Artikel Terbaru</h2>
+          <a href="/blog" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium">
             Lihat Semua →
           </a>
         </div>
         <div class="space-y-3">
           {posts.slice(0, 5).map((post) => (
             <a
               href={`/blog/${post.id}/`}
-              class="group block p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:shadow-sm transition-all"
+              class="group block p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-400 hover:shadow-sm transition-all bg-white dark:bg-gray-800"
             >
               <div class="flex items-start gap-4">
-                <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden bg-gradient-to-br from-blue-50 to-purple-50">
+                <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20">
                   <img
                     src={post.data.heroImage}
                     alt={post.data.title}
@@ -183,14 +190,14 @@ const products = (await getCollection('produk', ({ data }) => {
                   />
                 </div>
                 <div class="flex-1 min-w-0">
-                  <h3 class="text-gray-900 font-medium text-sm md:text-base mb-1 line-clamp-2 group-hover:text-blue-600 transition-colors">
+                  <h3 class="text-gray-900 dark:text-white font-medium text-sm md:text-base mb-1 line-clamp-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                     {post.data.title}
                   </h3>
-                  <p class="text-gray-500 text-xs md:text-sm">
+                  <p class="text-gray-500 dark:text-gray-400 text-xs md:text-sm">
                     <FormattedDate date={post.data.pubDate} />
                   </p>
                 </div>
-                <svg class="w-5 h-5 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-all flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="w-5 h-5 text-gray-400 dark:text-gray-500 group-hover:text-blue-600 dark:group-hover:text-blue-400 group-hover:translate-x-1 transition-all flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                 </svg>
               </div>
@@ -200,7 +207,7 @@ const products = (await getCollection('produk', ({ data }) => {
       </section>
 
       <!-- Footer Note -->
-      <div class="text-center py-8 text-gray-500 text-sm">
+      <div class="text-center py-8 text-gray-500 dark:text-gray-400 text-sm">
         <p>© 2025 semutdev. Made with ❤️</p>
       </div>
     </main>

src/pages/index.astro

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	darkMode: 'class', // Enable class-based dark mode
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}