Introduction

Creating a cohesive and responsive design for a website can be challenging, especially when implementing a theme toggle feature for dark and light modes. In this blog, I’ll share how I developed a site-wide SCSS setup and implemented a theme toggle button using separate SCSS files for each theme. This process was complex, but the results were rewarding.

Step 1: Setting Up Your SCSS Files

1.1 Creating Base SCSS Files

To start, create a base SCSS file that includes common styles and variables used throughout the site. This file serves as the foundation for both the dark and light themes.

// _sass/minima/prism/prism.scss

// Import Google Fonts
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

// Define color variables
$primary-color: #ff5733;
$secondary-color: #c70039;
$background-dark: #1a1a1a;
$text-light: #ffffff;

// Base styles
body {
    font-family: 'Roboto', sans-serif;
    background-color: $background-dark;
    color: $text-light;
    transition: background-color 0.3s ease, color 0.3s ease;
}

// Button styles
.button {
    background-color: $primary-color;
    color: $text-light;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;

    &:hover {
        background-color: $secondary-color;
    }
}

1.2 Creating Theme-Specific SCSS Files

To implement the theme toggle, create two separate SCSS files: one for the light theme and one for the dark theme. This approach allows you to define specific styles for each theme.

Light Theme SCSS

// _sass/minima/prism/_theme_toggle.scss

// Light theme colors
$light-background: #ffffff;
$light-text: #333333;

// Light theme styles
body[data-theme="light"] {
    background-color: $light-background;
    color: $light-text;
}

Dark Theme SCSS

// _sass/minima/dracula/theme.scss

// Dark theme colors
$dark-background: #282a36;
$dark-text: #f8f8f2;

// Dark theme styles
body[data-theme="dark"] {
    background-color: $dark-background;
    color: $dark-text;
}

Step 2: Implementing SCSS on Your Webpage

2.1 Integrating SCSS into Your Build Process

Since your setup uses SCSS directly, ensure your build process compiles these SCSS files into a single CSS file that your site uses. This means adding each variable to this SCSS file that is in your files/teammates files like I had to, and then oraganize them all into one color. Like shown below you need to set colors for each important variable so the styling works on each page as it’s supposed to.

// ==========================================================================
// PRISM COMPLETE STYLESHEET
// Dark & Red Theme
// ==========================================================================

// Import fonts
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

// Color Theme
$primary-color: #ff1900;     // Red
$secondary-color: #cf1500;   // Dark Red
$background-dark: #000000;   // Black background
$container-bg: #1a1a1a;      // Dark Grey container
$card-bg: #2e2e2e;          // Card/Section background
$input-bg: #333;             // Input background
$text-light: #ffffff;        // White text
$text-muted: #ddd;           // Muted text
$border-color: #b30000;      // Red border
$button-bg: #690000;         // Light Red button
$button-hover: #e60000;      // Darker Red on hover
$success-color: #28a745;     // Success states
$error-color: #dc3545;       // Error states
$warning-color: #ffc107;     // Warning states (This was missing)
$table-stripe: #6f0e0e;      // Table striping

// Light theme colors
$light-primary: #ff1900;
$light-secondary: #cf1500;
$light-background: #ffffff;
$light-container: #f0f0f0;
$light-card: #ffffff;
$light-input: #f5f5f5;
$light-text: #333333;
$light-text-muted: #666666;
$light-border: #ff1900;
$light-warning: #ffc107;
  • Jekyll: If you’re using Jekyll, it automatically compiles SCSS files in the _sass directory into CSS.

Step 3: Adding a Theme Toggle Button

3.1 Create the Theme Toggle Button

Add a button to your HTML file to allow users to switch between themes:

<button id="theme-toggle" class="theme-switch">Switch to Light Mode</button>

3.2 Implement JavaScript for Theme Switching

Creating the theme toggle functionality was challenging, but I managed to implement it using JavaScript. The script switches between the light and dark themes by updating the data-theme attribute on the <body> element.

// assets/js/theme-switcher.js

function initializeTheme() {
    const savedTheme = localStorage.getItem('site-theme') || 'dark';
    document.body.setAttribute('data-theme', savedTheme);
    updateButtonText(savedTheme);
}

function toggleTheme() {
    const currentTheme = document.body.getAttribute('data-theme');
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    document.body.setAttribute('data-theme', newTheme);
    localStorage.setItem('site-theme', newTheme);
    updateButtonText(newTheme);
}

function updateButtonText(theme) {
    const button = document.getElementById('theme-toggle');
    button.textContent = `Switch to ${theme === 'light' ? 'Dark' : 'Light'} Mode`;
}

document.addEventListener('DOMContentLoaded', () => {
    initializeTheme();
    document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
});

Step 4: Common Bugs and Fixes

4.1 Undefined Variables

Issue: If you encounter an error like Undefined variable, it means a variable is being used before it’s defined.

Solution: Ensure all variables are defined at the top of your SCSS files. Double-check for typos in variable names.

4.2 Incorrect Theme Application

Issue: The theme toggle doesn’t apply the correct styles.

Solution: Verify that the data-theme attribute is correctly set on the <body> element. Ensure your JavaScript logic updates this attribute and that your SCSS files include styles for both themes.

4.3 Compilation Errors

Issue: Errors during SCSS compilation can occur due to syntax issues.

Solution: Check for missing semicolons, unmatched braces, or incorrect nesting in your SCSS files. Use a linter to catch syntax errors early.

Conclusion

Implementing a site-wide SCSS setup with a theme toggle button was a complex task that required creating separate SCSS files for each theme. Despite the challenges, the result is a flexible and user-friendly design that enhances the user experience. I hope this guide helps you in your projects. Happy coding!