feat: implement logo dark theme filtering

Add theme-logo class with CSS filters to properly display logo in dark mode across all navigation components.

Author: Al Aqsa Reto Wijaya

src/App.jsx

@@ -1,12 +1,11 @@
-import Logo from './assets/tulis-logo.png';
+import Logo from "./assets/tulis-logo.png";
 
 function App() {
-
   return (
     <div className="container mx-auto mt-5">
       {/* <!-- Navbar Start --> */}
       <div className="flex gap-3 items-center">
-        <img width={100} src={Logo} />
+        <img width={100} src={Logo} alt="Tulis Logo" className="theme-logo" />
         <div className="flex gap-3 ml-auto">
           <a
             href="/"
@@ -51,9 +50,7 @@ function App() {
               className="w-full h-64 object-cover rounded-md"
             />
             <h2 className="mt-3 font-semibold">KUPU-KUPU</h2>
-            <p className="text-gray-600">
-              Colored Pencil
-            </p>
+            <p className="text-gray-600">Colored Pencil</p>
             <p className="font-bold mt-2">Rp 129.000 / 24pcs</p>
           </div>
 
@@ -129,9 +126,7 @@ function App() {
       {/* <!-- Login Page Start --> */}
       <div className="grid grid-cols-6 gap-5 max-w-screen-xl mx-auto">
         <div className="col-span-3 flex justify-center items-center">
-          <h1 className="text-5xl font-bold">
-            Login
-          </h1>
+          <h1 className="text-5xl font-bold">Login</h1>
         </div>
         <div className="col-span-3 px-20 min-h-[calc(100vh-200px)] flex flex-col justify-center">
           <form className="w-full">
@@ -151,15 +146,15 @@ function App() {
             </div>
             <button
               className=" bg-sky-700 rounded-lg py-3 px-2 w-full text-white font-bold mt-5"
-              type="submit">
+              type="submit"
+            >
               Login
             </button>
           </form>
 
           <div className="justify-center mt-3 text-center">
             Don't have an account?
-            <a href="/register"
-              className="underline hover:text-sky-700">
+            <a href="/register" className="underline hover:text-sky-700">
               Register here
             </a>
           </div>
@@ -206,12 +201,10 @@ function App() {
           </form>
           <div className="justify-center mt-3 text-center">
             Already have an account?
-            <a href="/login"
-              className="underline hover:text-sky-700">
+            <a href="/login" className="underline hover:text-sky-700">
               Login here
             </a>
           </div>
-
         </div>
       </div>
       {/* <!-- Register Page End --> */}

src/components/AdminNavbar.jsx

@@ -26,7 +26,7 @@ function AdminNavbar() {
     <>
       {/* <!-- Navbar Start --> */}
       <div className="flex gap-3 items-center">
-        <img width={100} src={Logo} alt="Tulis Logo" />
+        <img width={100} src={Logo} alt="Tulis Logo" className="theme-logo" />
         <div className="flex gap-3 ml-auto items-center">
           <Link
             to="/admin"

src/components/Navbar.jsx

@@ -15,7 +15,7 @@ function Navbar() {
   const handleLogout = async () => {
     try {
       await signOut(auth);
-      successAlert("Success!", "Logout success"); 
+      successAlert("Success!", "Logout success");
       navigate("/");
     } catch (err) {
       console.error(err);
@@ -26,7 +26,7 @@ function Navbar() {
     <>
       {/* <!-- Navbar Start --> */}
       <div className="flex gap-3 items-center">
-        <img width={100} src={Logo} alt="Tulis Logo" />
+        <img width={100} src={Logo} alt="Tulis Logo" className="theme-logo" />
         {user ? (
           <div className="flex gap-3 ml-auto items-center">
             <Link

src/index.css

@@ -1,5 +1,4 @@
 @import "tailwindcss";
-
 /* CSS Custom Properties for Theme Support */
 :root {
   /* Light theme colors */
@@ -93,13 +92,22 @@ body {
   background-color: var(--color-accent-hover);
 }
 
+/* Logo theming */
+.theme-logo {
+  filter: none;
+}
+
+.dark .theme-logo {
+  filter: invert(1);
+}
+
 /* Enhanced transitions for smooth theme switching */
 * {
-  transition-property: background-color, border-color, color, fill, stroke;
+  transition-property: background-color, border-color, color, fill, stroke,
+    filter;
   transition-duration: 0.3s;
   transition-timing-function: ease;
 }
-
 /* Custom scrollbar for dark theme */
 ::-webkit-scrollbar {
   width: 8px;
@@ -116,4 +124,4 @@ body {
 
 ::-webkit-scrollbar-thumb:hover {
   background: var(--color-border-hover);
-}
+}

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};