SCSS Design Tokens
Chapter 3
2 min read
To ensure a consistent UI, we need to populate our _variables.scss and _mixins.scss files with design tokens that support both light and dark modes.
src/styles/_variables.scss)These variables define your color palette and spacing. Notice how we use CSS Variables inside SCSS variables to allow for runtime theme switching.
// Colors - Using CSS variables for runtime switching
$color-crimson: var(--color-crimson, #e63946);
$color-white: #ffffff;
$color-black: #121212;
// Theme Colors
$background-light: #f8f9fa;
$background-dark: #0a0a0a;
$text-light: #1a1a1a;
$text-dark: #ededed;
// Spacing
$spacing-xs: 0.5rem;
$spacing-sm: 1rem;
$spacing-md: 2rem;
$spacing-lg: 4rem;
// Transitions
$transition-base: all 0.3s ease-in-out;Mixins handle repetitive tasks like media queries and flexbox centering, making your component styles much cleaner.
// Responsive Breakpoints
$breakpoint-mobile: 480px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;
@mixin mobile {
@media (max-width: #{$breakpoint-tablet - 1px}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1px}) {
@content;
}
}
// Flexbox Center Helper
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
// Dark Mode Wrapper
@mixin dark {
:global(.dark) & {
@content;
}
}Define the default state of your CSS variables here. This is where the magic happens when next-themes toggles the .dark class.
:root {
--color-crimson: #e63946;
background-color: $background-light;
color: $text-light;
}
[data-theme='dark'], .dark {
background-color: $background-dark;
color: $text-dark;
--color-crimson: #ff4d5a; // Slightly brighter crimson for dark mode
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
transition: $transition-base;
}Now, in any *.module.scss file, you can write clean, responsive, theme-aware styles without any imports:
.card {
padding: $spacing-md;
background: $color-white;
@include flex-center;
@include mobile {
padding: $spacing-sm;
}
@include dark {
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.1);
}
}