Skip to content

Implement Dark Mode Color Palette and Theme Management #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
momstrosity wants to merge 6 commits into
base: 82106ed8-966a-4f45-a851-3e38d982075f
Choose a base branch
from
Open

Implement Dark Mode Color Palette and Theme Management #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8477124
Start draft PR
momstrosity May 16, 2025
f1e3a65
Add comprehensive dark mode color palette to Tailwind configuration
momstrosity May 16, 2025
dd74582
Update CSS with comprehensive dark mode support and transitions
momstrosity May 16, 2025
f1f1c79
Add theme management script for dark mode toggle
momstrosity May 16, 2025
5c720ab
Add theme toggle button to header with dark mode support
momstrosity May 16, 2025
9d60776
Add theme script and dark mode support to default layout
momstrosity May 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions src/assets/js/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 };
301 changes: 104 additions & 197 deletions src/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Loading