Skip to content

[WIP] Implement Dark Mode Color Palette in Tailwind Configuration #20

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

Draft
momstrosity wants to merge 5 commits into
base: 8c9e344d-98b2-48ef-ac18-716e6b5bf1d1
Choose a base branch
from
Draft

[WIP] Implement Dark Mode Color Palette in Tailwind Configuration #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
825d32c
Start draft PR
momstrosity May 16, 2025
7e0da4d
Define comprehensive dark mode color palette in Tailwind configuration
momstrosity May 16, 2025
f801656
Add base dark mode styles and transition effects
momstrosity May 16, 2025
7465780
Define comprehensive dark mode color palette with 10 color stops
momstrosity May 16, 2025
a058541
Update dark mode base styles with new color palette
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
211 changes: 13 additions & 198 deletions src/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,206 +2,21 @@
@tailwind components;
@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;
}
/* Global dark mode styles */
body {
@apply bg-white text-black;
}
@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;
}
.dark {
@apply bg-dark-900 text-dark-50;
}

@layer utilities {
.stripe-rows {
@apply [&>:nth-of-type(even)]:bg-stone-200;
}
/* Accessibility and theme transition */
body, .dark {
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure elements adapt to dark mode */
.dark *::selection {
@apply bg-darkMode-accent-secondary text-dark-50;
}
123 changes: 78 additions & 45 deletions tailwind.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,80 @@
/** @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', // Enable class-based dark mode
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: {
// Existing Light Mode Twilight Palette
twilight: {
50: "#f1f8fa",
100: "#E8F3F7",
200: "#bfe0ee",
300: "#9ed0e5",
400: "#7ec0dd",
500: "#5eb1d4",
600: "#3ea1cc",
700: "#2e86ab",
800: "#226581",
900: "#153f51",
},
// Comprehensive Dark Mode Color Palette
dark: {
50: '#f5f5f5', // Very light gray, almost white
100: '#e9e9e9', // Light gray
200: '#d9d9d9', // Lighter medium gray
300: '#c4c4c4', // Light medium gray
400: '#a3a3a3', // Medium gray
500: '#858585', // Medium dark gray
600: '#6b6b6b', // Dark gray
700: '#4f4f4f', // Darker gray
800: '#353535', // Very dark gray
900: '#121212', // Almost black, deep dark background
},
// Semantic Dark Mode Colors
darkMode: {
background: {
primary: '#121212', // Deep, neutral dark background
secondary: '#1E1E1E', // Slightly lighter for secondary areas
tertiary: '#2C2C2C', // Even lighter for tertiary elements
},
text: {
primary: '#E0E0E0', // Light text for primary content
secondary: '#A0A0A0', // Muted text for secondary content
tertiary: '#6E6E6E', // Subtle text for less important content
},
accent: {
primary: '#4A90E2', // Bright blue for primary accents
secondary: '#5D6D7E', // Muted blue-gray for secondary accents
highlight: '#3498DB', // Bright highlight color
},
},
},
textUnderlineOffset: {
6: "6px",
},
textDecorationThickness: {
3: "3px",
},
maxWidth: {
"1/3": "33%",
80: "20rem",
},
},
},
plugins: [require("@tailwindcss/forms")],
safelist: ["flash-success", "flash-error", "flash-info"],
};