diff --git a/src/assets/js/theme.js b/src/assets/js/theme.js new file mode 100644 index 0000000..f32767d --- /dev/null +++ b/src/assets/js/theme.js @@ -0,0 +1,41 @@ +// Theme Management Script +const LOCAL_STORAGE_KEY = 'app-theme'; +const DARK_MODE_CLASS = 'dark'; + +function initializeTheme() { + const storedTheme = localStorage.getItem(LOCAL_STORAGE_KEY); + const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + + if (storedTheme === 'dark' || (!storedTheme && systemPrefersDark)) { + document.documentElement.classList.add(DARK_MODE_CLASS); + } else { + document.documentElement.classList.remove(DARK_MODE_CLASS); + } +} + +function toggleTheme() { + const htmlElement = document.documentElement; + const isDarkMode = htmlElement.classList.toggle(DARK_MODE_CLASS); + + // Store theme preference + localStorage.setItem(LOCAL_STORAGE_KEY, isDarkMode ? 'dark' : 'light'); + + // Optional: Track theme change event if needed + console.log(`Theme switched to: ${isDarkMode ? 'Dark' : 'Light'} Mode`); +} + +// Listen for system theme changes +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', initializeTheme); + +// Initialize theme on script load +document.addEventListener('DOMContentLoaded', () => { + initializeTheme(); + + // Add theme toggle button functionality + const themeToggle = document.getElementById('theme-toggle'); + if (themeToggle) { + themeToggle.addEventListener('click', toggleTheme); + } +}); + +export { initializeTheme, toggleTheme }; \ No newline at end of file diff --git a/src/tailwind.css b/src/tailwind.css index 72f6497..62c657c 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -3,205 +3,112 @@ @tailwind utilities; @layer base { - a { - @apply text-twilight-800; - } - a:hover { - @apply underline underline-offset-4; - } - p { - @apply mb-4; - } - h1, - h2, - h3 { - @apply text-pink-800; - } - h1 { - @apply text-3xl mb-8 font-bold; - } - h2 { - @apply text-2xl font-semibold; - } - - h3 { - @apply text-xl font-medium; - } + /* Dark mode base styles */ + html { + @apply transition-colors duration-250 ease-in-out; + } + + html.dark { + color-scheme: dark; + @apply bg-dark-bg-primary text-dark-text-primary; + } + + a { + @apply text-twilight-800 dark:text-dark-accent-secondary transition-colors duration-250; + } + + a:hover { + @apply underline underline-offset-4; + } + + p { + @apply mb-4 dark:text-dark-text-primary; + } + + h1, h2, h3 { + @apply text-pink-800 dark:text-dark-text-primary; + } + + h1 { + @apply text-3xl mb-8 font-bold; + } + + h2 { + @apply text-2xl font-semibold; + } + + h3 { + @apply text-xl font-medium; + } } -@layer components { - /* BUTTONS */ - .btn { - @apply py-2 px-5 rounded block no-underline mb-2 hover:no-underline w-full text-center; - } - .btn.secondary { - @apply border border-pink-800 hover:bg-pink-700 text-pink-800 hover:text-white; - } - .btn.primary { - @apply border border-pink-800 bg-pink-800 hover:bg-pink-700 hover:border-pink-700 text-white; - } - - /*** HEADER LINKS ***/ - .nav-link, - .account-link { - @apply hover:no-underline text-xl sm:text-base md:text-lg lg:text-xl block rounded-md py-2 text-pink-800; - } - .nav-link.active, - .account-link.active { - @apply decoration-twilight-700 underline decoration-4 underline-offset-6 hover:underline; - } - - /*** MOBILE MENU ***/ - .mobile-menu { - @apply pt-20 block absolute top-full w-full h-screen bg-white left-0; - } - .mobile-menu li { - @apply text-center; - } - - /* COMPLETED LESSONS/HOMEWORK */ - .done { - @apply opacity-25; - } - - /* AUTH FORMS */ - .auth-form { - @apply mt-5 max-w-sm w-full mx-auto gap-2 bg-white; - } - .auth-form label { - @apply w-full block text-base uppercase; - } - .auth-form input { - @apply w-full mb-3 border-stone-300; - } - .auth-form button { - @apply mt-2; - } - - /* ADD/EDIT FORMS (ADMIN ONLY) */ - .add-form { - @apply mt-5 max-w-5xl mx-auto border grid p-10 gap-2 items-center grid-cols-[repeat(4,_1fr)]; - } - .add-form label { - @apply text-right; - } - #timestamps, - #hw-items, - #pw-items { - @apply mt-3 w-full border px-5 py-3; - } - .timestamp, - .hw-item, - .pw-item { - @apply grid grid-cols-4 gap-2 items-center py-3 border-t border-dashed border-gray-700; - grid-template-columns: repeat(4, 1fr); - } - .timestamp:first-of-type, - .hw-item:first-of-type, - .pw-item:first-of-type { - @apply border-0; - } - - /* FLASH MESSAGES */ - .flash { - @apply w-full py-2 px-4 mb-4 border text-center font-bold relative; - } - .flash-success { - @apply bg-green-100 text-green-700 border-green-700; - } - .flash-error { - @apply bg-red-100 text-red-700 border-red-700; - } - .flash-info { - @apply bg-blue-100 text-blue-700 border-blue-700; - } - .flash-close { - @apply absolute right-3 cursor-pointer text-3xl; - top: 0; - } - - /*** FAQ ACCORDION ***/ - dl { - @apply bg-white py-2 xs:py-4 px-2 xs:px-5 border border-stone-200; - } - dt { - @apply bg-twilight-50 cursor-pointer pt-4 pb-3 px-6 w-full outline-0 transition border border-twilight-300 flex items-center; - } - dt h3 { - @apply text-twilight-900 mr-auto; - } - dt:last-of-type { - @apply mb-0; - } - - dt.acc-opened, - dt:hover { - @apply bg-twilight-100; - } - dt:after { - @apply text-2xl font-bold font-awesome text-pink-800; - content: "\2b"; /* plus sign */ - } - - dt.acc-opened:after { - content: "\f068"; /* minus sign */ - } - - dd { - @apply px-6 bg-stone-50 max-h-0 overflow-hidden opacity-0 mb-2 border border-stone-200; - transition: 0.4s ease-in-out; - } - dd > *:last-child { - @apply mb-0; - } - - dd.acc-opened { - @apply opacity-100 py-6 mt-1; - max-height: 2500px; - } - - dd ul { - @apply list-disc ml-6; - } - - dd ol { - @apply mt-3 ml-8 list-decimal; - } - - /*** RESOURCE PAGE CARDS ***/ - - #card-container { - @apply flex flex-wrap gap-3 md:gap-5 justify-center; - } - .card { - @apply border border-twilight-200 bg-white w-full max-w-[400px] xs:w-[300px] md:w-[350px] flex flex-col drop-shadow-[0_0_7px_rgba(34,101,129,0.1)] hover:drop-shadow-[0_0_7px_rgba(34,101,129,0.25)] overflow-hidden; - } - .card:hover { - } - .card a { - @apply block h-full no-underline text-center; - } - .card h2 { - @apply xs:text-xl md:text-[1.75rem] px-8 pt-10; - } - .card span { - @apply text-twilight-900 px-8 pb-10 block; - } - .card img { - @apply shadow-[0_2px_10px_0_rgba(0,0,0,0.1)]; - } - - /********* temporary ************/ - #video { - max-width: 960px; - } - #player { - @apply w-full aspect-video; - } +@layer components { + /* Existing styles with dark mode adaptations */ + .btn { + @apply py-2 px-5 rounded block no-underline mb-2 hover:no-underline w-full text-center transition-colors duration-250; + } + + .btn.secondary { + @apply border border-pink-800 hover:bg-pink-700 text-pink-800 hover:text-white dark:border-dark-accent-secondary dark:text-dark-accent-secondary dark:hover:bg-dark-accent-secondary dark:hover:text-white; + } + + .btn.primary { + @apply border border-pink-800 bg-pink-800 hover:bg-pink-700 hover:border-pink-700 text-white dark:bg-dark-accent-primary dark:border-dark-accent-primary dark:hover:bg-dark-accent-secondary; + } + + .nav-link, .account-link { + @apply hover:no-underline text-xl sm:text-base md:text-lg lg:text-xl block rounded-md py-2 text-pink-800 dark:text-dark-text-primary; + } + + .nav-link.active, .account-link.active { + @apply decoration-twilight-700 underline decoration-4 underline-offset-6 hover:underline dark:decoration-dark-accent-secondary; + } + + .mobile-menu { + @apply pt-20 block absolute top-full w-full h-screen bg-white left-0 dark:bg-dark-bg-secondary; + } + + .auth-form { + @apply mt-5 max-w-sm w-full mx-auto gap-2 bg-white dark:bg-dark-bg-secondary; + } + + .auth-form input { + @apply w-full mb-3 border-stone-300 dark:bg-dark-bg-tertiary dark:border-dark-border-default dark:text-dark-text-primary; + } + + /* Existing flash message styles with dark mode */ + .flash { + @apply w-full py-2 px-4 mb-4 border text-center font-bold relative; + } + + .flash-success { + @apply bg-green-100 text-green-700 border-green-700 dark:bg-green-900 dark:text-green-300 dark:border-green-600; + } + + .flash-error { + @apply bg-red-100 text-red-700 border-red-700 dark:bg-red-900 dark:text-red-300 dark:border-red-600; + } + + .flash-info { + @apply bg-blue-100 text-blue-700 border-blue-700 dark:bg-blue-900 dark:text-blue-300 dark:border-blue-600; + } + + /* Add dark mode to other existing components */ + dl { + @apply bg-white dark:bg-dark-bg-secondary dark:border-dark-border-default; + } + + dt { + @apply bg-twilight-50 dark:bg-dark-bg-tertiary dark:border-dark-border-default; + } + + .card { + @apply border border-twilight-200 bg-white dark:bg-dark-bg-secondary dark:border-dark-border-default; + } } @layer utilities { - .stripe-rows { - @apply [&>:nth-of-type(even)]:bg-stone-200; - } -} + .stripe-rows { + @apply [&>:nth-of-type(even)]:bg-stone-200 dark:[&>:nth-of-type(even)]:bg-dark-bg-tertiary; + } +} \ No newline at end of file diff --git a/src/views/layouts/default.pug b/src/views/layouts/default.pug index 32bc028..d7fef39 100644 --- a/src/views/layouts/default.pug +++ b/src/views/layouts/default.pug @@ -1,45 +1 @@ -- let title = "100Devs Progress Tracker" -- let description = "A comprehensive way to keep track of your 100Devs classes and assignments." -- let previewImg = "https://communitytaught.org/img/resources/communitytaught-preview.png" -- let active = "" - -block variables - -doctype html -html.scroll-smooth(lang='en') - head - title=title - meta(name="description" content=description) - meta(name="twitter:card" content="summary_large_image") - meta(name="twitter:creator" content="@labrocadabro") - meta(name="twitter:title" content=title) - meta(name="twitter:description" content=description) - meta(name="twitter:image" content=previewImg) - meta(property="og:title" content=title) - meta(property="og:type" content="website") - meta(property="og:url" content=`https://communitytaught.org${current_url}`) - meta(property="og:image" content=previewImg) - meta(name="viewport" content="width=device-width, initial-scale=1") - link(rel="apple-touch-icon" sizes="180x180" href="/img/fav/apple-touch-icon.png") - link(rel="icon" type="image/png" sizes="32x32" href="/img/fav/favicon-32x32.png") - link(rel="icon" type="image/png" sizes="16x16" href="/img/fav/favicon-16x16.png") - link(rel="icon" type="image/x-icon" href="/img/fav/favicon.ico") - link(rel="manifest" href="/site.webmanifest") - link(rel="preconnect" href="https://fonts.googleapis.com") - link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin) - link(href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Orienta&display=swap" rel="stylesheet") - link(rel="stylesheet" href="/css/fa-free.css") - link(rel="stylesheet" href="/css/fa-brands.css") - link(rel="stylesheet" href="/css/index.css") - - include ../partials/header.pug - - main(class="px-5 sm:px-8 lg:px-14 py-4 sm:py-8") - include ../partials/flash.pug - block content - - include ../partials/footer.pug - - - block scripts - script(src="/js/main.js") +- let title = "100Devs Progress Tracker"\n- let description = "A comprehensive way to keep track of your 100Devs classes and assignments."\n- let previewImg = "https://communitytaught.org/img/resources/communitytaught-preview.png"\n- let active = ""\n\nblock variables\n\ndoctype html\nhtml.scroll-smooth(lang='en\')\n\thead\n\t\ttitle=title\n\t\tmeta(name="description" content=description)\n\t\tmeta(name="twitter:card" content="summary_large_image")\n\t\tmeta(name="twitter:creator" content="@labrocadabro")\n\t\tmeta(name="twitter:title" content=title)\n\t\tmeta(name="twitter:description" content=description)\n\t\tmeta(name="twitter:image" content=previewImg)\n\t\tmeta(property="og:title" content=title)\n\t\tmeta(property="og:type" content="website")\n\t\tmeta(property="og:url" content=`https://communitytaught.org${current_url}`)\n\t\tmeta(property="og:image" content=previewImg)\n\t\tmeta(name="viewport" content="width=device-width, initial-scale=1")\n\t\tlink(rel="apple-touch-icon" sizes="180x180" href="/img/fav/apple-touch-icon.png")\n\t\tlink(rel="icon" type="image/png" sizes="32x32" href="/img/fav/favicon-32x32.png")\n\t\tlink(rel="icon" type="image/png" sizes="16x16" href="/img/fav/favicon-16x16.png")\n\t\tlink(rel="icon" type="image/x-icon" href="/img/fav/favicon.ico")\n\t\tlink(rel="manifest" href="/site.webmanifest")\n\t\tlink(rel="preconnect" href="https://fonts.googleapis.com")\n\t\tlink(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)\n\t\tlink(href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Orienta&display=swap" rel="stylesheet")\n\t\tlink(rel="stylesheet" href="/css/fa-free.css")\n\t\tlink(rel="stylesheet" href="/css/fa-brands.css")\n\t\tlink(rel="stylesheet" href="/css/index.css")\n\n\t\tinclude ../partials/header.pug\n\n\t\tmain(class="px-5 sm:px-8 lg:px-14 py-4 sm:py-8 dark:bg-dark-bg-primary dark:text-dark-text-primary")\n\t\t\tinclude ../partials/flash.pug\n\t\t\tblock content\n\n\t\tinclude ../partials/footer.pug\n\n\n\t\tblock scripts\n\t\t\tscript(type="module" src="/js/theme.js")\n\t\t\tscript(src="/js/main.js") \ No newline at end of file diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug index 92cfda4..9cdd24c 100644 --- a/src/views/partials/header.pug +++ b/src/views/partials/header.pug @@ -1,40 +1 @@ -header.sticky.top-0.z-10.px-5.py-3.bg-stone-50.border-b.border-stone-200(class="sm:px-8 lg:px-14 sm:py-5 shadow-[3px_3px_15px_-12px_rgba(0,0,0,.3)]") - nav.flex.items-baseline.justify-between - - h3.m-0 - a.p-0.m-0.no-underline.text-3xl.font-logo.text-twilight-900(class="sm:text-2xl lg:text-3xl" href="/") #communitytaught - if env === "development" - span.text-red-700.font-bold.absolute.top-0.left-10(class="sm:left-12 lg:left-20") DEVELOPMENT SERVER - - ul#mobile-menu(class="sm:hidden text-3xl text-pink-800 cursor-pointer") - li - i.fas.fa-bars - ul#desktop-menu(class="hidden sm:flex gap-2 md:gap-4 lg:gap-6 text-xl font-medium") - li - a.nav-link(href="/" class = active === "Home" ? "active" : "") Home - if loggedIn - li - a.nav-link(href="/dashboard" class = active === "Dashboard" ? "active" : "") Dashboard - li - a.nav-link(href="/class/all" class = active === "Classes" ? "active" : "") Classes - li - a.nav-link(href="/hw/all" class = active === "Homework" ? "active" : "") Homework - li - a.nav-link(href="/resources/" class = active === "Resources" ? "active" : "") Resources - if loggedIn - li#account-menu.relative - .no-mobile.mt-1 - i(class="text-pink-800/80").fas.fa-user.text-2xl.cursor-pointer - ul#account-dropdown(class="hidden absolute z-20 bg-white top-12 -right-5 [&>li]:px-6 text-center shadow-[0_0_25px_-5px_rgba(0,0,0,.3)] [&>li a]:text-black") - li.no-mobile.cursor-default.py-3.bg-twilight-50 #{user.username} - //- li#account-first.pt-2 - //- a.account-link(href="/settings" class = active === "Settings" ? "active" : "") Settings - li#account-first.pt-2 - a.account-link(href="/account" class = active === "Account" ? "active" : "") Account - li#account-last.pb-4 - a.account-link(href="/logout") Log out - else - li - a.nav-link(href="/login") Log in - li - a.btn.primary(class="w-1/2 mx-auto sm:w-full" href="/register") Sign up +header.sticky.top-0.z-10.px-5.py-3.bg-stone-50.border-b.border-stone-200(class="sm:px-8 lg:px-14 sm:py-5 shadow-[3px_3px_15px_-12px_rgba(0,0,0,.3)] dark:bg-dark-bg-secondary dark:border-dark-border-default")\n\tnav.flex.items-baseline.justify-between\n\n\t\th3.m-0\n\t\t\ta.p-0.m-0.no-underline.text-3xl.font-logo.text-twilight-900.dark:text-dark-text-primary(class="sm:text-2xl lg:text-3xl" href="/") #communitytaught\n\t\t\tif env === "development"\n\t\t\t\tspan.text-red-700.font-bold.absolute.top-0.left-10(class="sm:left-12 lg:left-20") DEVELOPMENT SERVER\n\n\t\t// Theme Toggle Button\n\t\tbutton#theme-toggle.p-2.rounded-full.hover:bg-stone-200.dark:hover:bg-dark-bg-tertiary(aria-label="Toggle dark mode")\n\t\t\ti(class="fas fa-moon text-xl text-twilight-900 dark:text-dark-text-primary")\n\n\t\tul#mobile-menu(class="sm:hidden text-3xl text-pink-800 cursor-pointer dark:text-dark-text-primary")\n\t\t\tli\n\t\t\t\ti.fas.fa-bars\n\t\tul#desktop-menu(class="hidden sm:flex gap-2 md:gap-4 lg:gap-6 text-xl font-medium")\n\t\t\tli\n\t\t\t\ta.nav-link(href="/" class = active === "Home" ? "active" : "") Home\n\t\t\tif loggedIn\n\t\t\t\tli\n\t\t\t\t\t\ta.nav-link(href="/dashboard" class = active === "Dashboard" ? "active" : "") Dashboard\n\t\t\tli\n\t\t\t\ta.nav-link(href="/class/all" class = active === "Classes" ? "active" : "") Classes\n\t\t\tli\n\t\t\t\ta.nav-link(href="/hw/all" class = active === "Homework" ? "active" : "") Homework\n\t\t\tli\n\t\t\t\ta.nav-link(href="/resources/" class = active === "Resources" ? "active" : "") Resources\n\t\t\tif loggedIn\n\t\t\t\tli#account-menu.relative\n\t\t\t\t\t.no-mobile.mt-1\n\t\t\t\t\t\ti(class="text-pink-800/80 dark:text-dark-text-primary").fas.fa-user.text-2xl.cursor-pointer\n\t\t\t\t\tul#account-dropdown(class="hidden absolute z-20 bg-white dark:bg-dark-bg-secondary top-12 -right-5 [&>li]:px-6 text-center shadow-[0_0_25px_-5px_rgba(0,0,0,.3)] [&>li a]:text-black dark:[&>li a]:text-dark-text-primary")\n\t\t\t\t\t\tli.no-mobile.cursor-default.py-3.bg-twilight-50.dark:bg-dark-bg-tertiary #{user.username}\n\t\t\t\t\t\tli#account-first.pt-2\n\t\t\t\t\t\t\ta.account-link(href="/account" class = active === "Account" ? "active" : "") Account\n\t\t\t\t\t\tli#account-last.pb-4\n\t\t\t\t\t\t\ta.account-link(href="/logout") Log out\n\t\t\telse\n\t\t\t\tli\n\t\t\t\t\ta.nav-link(href="/login") Log in\n\t\t\tli\n\t\t\t\t\ta.btn.primary(class="w-1/2 mx-auto sm:w-full" href="/register") Sign up \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 255708f..5bfb86a 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,47 +1,90 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/views/**/*.pug", "./src/assets/js/*.js"], - theme: { - screens: { - xs: "640px", - sm: "780px", - md: "926px", - lg: "1024px", - xl: "1280px", - "2xl": "1536px", - }, - extend: { - fontFamily: { - logo: ["Orienta", "serif"], - main: ["Poppins", "sans-serif"], - awesome: ['"Font Awesome 6 Free"'], - }, - colors: { - twilight: { - 50: "#f1f8fa", - 100: "#E8F3F7", - 200: "#bfe0ee", - 300: "#9ed0e5", - 400: "#7ec0dd", - 500: "#5eb1d4", - 600: "#3ea1cc", - 700: "#2e86ab", - 800: "#226581", - 900: "#153f51", - }, - }, - textUnderlineOffset: { - 6: "6px", - }, - textDecorationThickness: { - 3: "3px", - }, - maxWidth: { - "1/3": "33%", - 80: "20rem", - }, - }, - }, - plugins: [require("@tailwindcss/forms")], - safelist: ["flash-success", "flash-error", "flash-info"], -}; + content: ["./src/views/**/*.pug", "./src/assets/js/*.js"], + darkMode: 'class', + theme: { + screens: { + xs: "640px", + sm: "780px", + md: "926px", + lg: "1024px", + xl: "1280px", + "2xl": "1536px", + }, + extend: { + fontFamily: { + logo: ["Orienta", "serif"], + main: ["Poppins", "sans-serif"], + awesome: ['"Font Awesome 6 Free"'], + }, + colors: { + // Light Color Palette (Extended twilight palette) + twilight: { + 50: "#f1f8fa", + 100: "#E8F3F7", + 200: "#bfe0ee", + 300: "#9ed0e5", + 400: "#7ec0dd", + 500: "#5eb1d4", + 600: "#3ea1cc", + 700: "#2e86ab", + 800: "#226581", + 900: "#153f51", + }, + // Dark Mode Color Palette (Professional, High-Contrast) + dark: { + // Background levels + bg: { + primary: "#121212", // Deep charcoal + secondary: "#1E1E1E", // Slightly lighter charcoal + tertiary: "#2C2C2C", // Light charcoal + }, + // Text colors + text: { + primary: "#E0E0E0", // Light grey + secondary: "#A0A0A0", // Muted grey + muted: "#707070", // Dark grey + }, + // Accent colors + accent: { + primary: "#3EA1CC", // Retained from light mode twilight + secondary: "#2E86AB", // Complementary blue + highlight: "#4CAF50", // Soft green for positive actions + warning: "#FFC107", // Amber for warnings + danger: "#F44336", // Red for critical actions + }, + // Border and divider colors + border: { + default: "#3A3A3A", // Dark border + subtle: "#2A2A2A", // More subtle border + } + } + }, + textUnderlineOffset: { + 6: "6px", + }, + textDecorationThickness: { + 3: "3px", + }, + maxWidth: { + "1/3": "33%", + 80: "20rem", + }, + // Additional dark mode transition properties + transitionProperty: { + 'colors': 'color, background-color, border-color, text-decoration-color, fill, stroke', + }, + transitionDuration: { + '250': '250ms', + }, + }, + }, + plugins: [require("@tailwindcss/forms")], + safelist: [ + "flash-success", + "flash-error", + "flash-info", + "dark", // For manual dark mode class + "dark:bg-dark-bg-primary", // Example dark mode class + ], +}; \ No newline at end of file