Introduction

I'm using SCSS to stlye the website content and handle the light and dark themes.

Main Color Variables

These are the main colors used in the website.

./styles/variables.scss
$light-gray: #dadada;
$gray: #bdbdbd;
$white: #ffffff;
$black: #333333;
$yellow: #f9c22e;
$accent: $yellow;
$link: #1e5aff;

Light Theme Color Variables

These are the colors used for the light theme.

./styles/variables.scss
$light-primary-dark: #273469;
$light-primary-darker: #1e2749;
$light-primary: #007bff;
$light-primary-light: #35a3fd;
$light-primary-hover: #023e8a;
 
$light-mode-background: $light-primary-dark;
$light-image-filter: grayscale(0);
$light-section-title: $light-primary-dark;
$light-text-static: $white;
$light-text-scroll: $light-primary-dark;
$light-nav-item-hover: $light-primary;
$light-menu-icon: $light-primary-dark;
$light-nav-scroll: $white;
$light-background: #f0f2f5;
$light-card-title: $black;
$light-card-title-hover: $light-primary;
$light-card-background: $white;
$light-code-background: lighten($light-background, 4%);
$light-line-highlight: darken($light-background, 10%);
$light-line-highlight-border: darken($light-background, 20%);

Dark Theme Color Variables

These are the colors used for the dark theme.

./styles/variables.scss
$dark-primary-dark: #313131;
$dark-primary-darker: #242424;
$dark-primary: #313131;
$dark-primary-light: hsl(207, 98%, 60%);
$dark-primary-hover: #023e8a;
 
$dark-mode-background: lighten($dark-primary-dark, 5%);
$dark-image-filter: grayscale(100%);
$dark-section-title: $white;
$dark-text-static: $white;
$dark-nav-item-hover: $white;
$dark-menu-icon: $white;
$dark-nav-scroll: $dark-primary;
$dark-sidebar: darken($dark-primary, 2%);
$dark-background: lighten($dark-primary-dark, 2%);
$dark-card-title: $white;
$dark-card-title-hover: $white;
$dark-card-background: #434343;
$dark-code-background: $dark-background;
$dark-line-highlight: lighten($dark-primary-dark, 10%);
$dark-line-highlight-border: lighten($dark-primary-dark, 30%);

Common Color Variables

These are the colors used in both the light and dark themes.

./styles/variables.scss
$nav-box-shadow: rgba(63, 63, 63, 0.3);
$border-color: rgba(0, 0, 0, 0.125);
$border-color-dark: #626262;

Complete Variables File

./styles/variables.scss
// Main colors
$light-gray: #dadada;
$gray: #bdbdbd;
$white: #ffffff;
$black: #333333;
$yellow: #f9c22e;
$accent: $yellow;
$link: #1e5aff;
 
// Light colors
$light-primary-dark: #273469;
$light-primary-darker: #1e2749;
$light-primary: #007bff;
$light-primary-light: #35a3fd;
$light-primary-hover: #023e8a;
 
$light-mode-background: $light-primary-dark;
$light-image-filter: grayscale(0);
$light-section-title: $light-primary-dark;
$light-text-static: $white;
$light-text-scroll: $light-primary-dark;
$light-nav-item-hover: $light-primary;
$light-menu-icon: $light-primary-dark;
$light-nav-scroll: $white;
$light-background: #f0f2f5;
$light-card-title: $black;
$light-card-title-hover: $light-primary;
$light-card-background: $white;
$light-code-background: lighten($light-background, 4%);
$light-line-highlight: darken($light-background, 10%);
$light-line-highlight-border: darken($light-background, 20%);
 
// Dark colors
$dark-primary-dark: #313131;
$dark-primary-darker: #242424;
$dark-primary: #313131;
$dark-primary-light: hsl(207, 98%, 60%);
$dark-primary-hover: #023e8a;
 
$dark-mode-background: lighten($dark-primary-dark, 5%);
$dark-image-filter: grayscale(100%);
$dark-section-title: $white;
$dark-text-static: $white;
$dark-nav-item-hover: $white;
$dark-menu-icon: $white;
$dark-nav-scroll: $dark-primary;
$dark-sidebar: darken($dark-primary, 2%);
$dark-background: lighten($dark-primary-dark, 2%);
$dark-card-title: $white;
$dark-card-title-hover: $white;
$dark-card-background: #434343;
$dark-code-background: $dark-background;
$dark-line-highlight: lighten($dark-primary-dark, 10%);
$dark-line-highlight-border: lighten($dark-primary-dark, 30%);
 
// Common colors
$nav-box-shadow: rgba(63, 63, 63, 0.3);
$border-color: rgba(0, 0, 0, 0.125);
$border-color-dark: #626262;

CSS Variables

All the SCSS variables are mapped into CSS variables and defines globally.

Make sure to import the variables.scss file in the styles.scss file.

./styles/styles.scss
@import "./variables";

Light Theme

Light theme is set as default, so all the variables are defined in the :root element with values from SCSS variables for the light theme.

./styles/styles.scss
:root {
  --color-primary-dark: #{$light-primary-dark};
  --color-primary-darker: #{$light-primary-darker};
  --color-primary: #{$light-primary};
  --color-primary-hover: #{$light-primary-hover};
  --color-primary-light: #{$light-primary-light};
 
  --color-mode-background: #{$light-mode-background};
  --image-filter: #{$light-image-filter};
  --color-section-title: #{$light-section-title};
  --color-text-static: #{$light-text-static};
  --color-text-scroll: #{$light-text-scroll};
  --color-nav-item-hover: #{$light-nav-item-hover};
  --color-menu-icon: #{$light-menu-icon};
  --color-nav-scroll: #{$light-nav-scroll};
  --color-toggler-border: #{lighten($gray, 20%)};
  --color-sidebar-background: #{$white};
  --color-nav-active: #{$light-background};
  --color-nav-scroll-font: #{$light-nav-scroll};
  --color-default-font: #{$black};
  --color-code-background: #{lighten($light-background, 4%)};
  --color-card-title: #{$light-card-title};
  --color-card-title-hover: #{$light-card-title-hover};
  --color-card-background: #{$light-card-background};
  --color-background: #{$light-background};
  --color-background-light: #{lighten($light-background, 2%)};
  --color-highlight-background: #{lighten($light-background, 3%)};
  --color-box-shadow: #{$nav-box-shadow};
  --color-default-border: #{$border-color};
  --color-scrollbar-track: #{$light-background};
  --color-scrollbar-thumb: #{darken($light-background, 10%)};
  --color-scrollbar-thumb-hover: #{darken($light-background, 20%)};
  --color-link: #{$link};
  --color-back-to-top: #{$link};
}

Dark Theme

For the dark theme, :root element variables are redefined with values from SCSS variables for the dark theme.

./styles/styles.scss
.dark {
  --color-primary-dark: #{$dark-primary-dark};
  --color-primary-darker: #{$dark-primary-darker};
  --color-primary: #{$dark-primary};
  --color-primary-hover: #{$light-primary-hover};
  --color-primary-light: #{$light-primary-light};
 
  --color-mode-background: #{$dark-mode-background};
  --image-filter: #{$dark-image-filter};
  --color-section-title: #{$dark-section-title};
  --color-text-static: #{$dark-text-static};
  --color-text-scroll: #{$dark-text-static};
  --color-nav-item-hover: #{$dark-nav-item-hover};
  --color-menu-icon: #{$dark-menu-icon};
  --color-nav-scroll: #{$dark-nav-scroll};
  --color-toggler-border: #{darken($gray, 40%)};
  --color-sidebar-background: #{lighten($dark-background, 2%)};
  --color-nav-active: #{$dark-background};
  --color-default-font: #{$white};
  --color-code-background: #{$dark-background};
  --color-card-title: #{$dark-card-title};
  --color-card-title-hover: #{$dark-card-title-hover};
  --color-card-background: #{$dark-card-background};
  --color-background: #{$dark-background};
  --color-background-light: #{lighten($dark-background, 2%)};
  --color-highlight-background: #{lighten($dark-background, 8%)};
  --color-box-shadow: #{$nav-box-shadow};
  --color-default-border: #{$border-color-dark};
  --color-scrollbar-track: #{$dark-background};
  --color-scrollbar-thumb: #{lighten($dark-primary-dark, 10%)};
  --color-scrollbar-thumb-hover: #{lighten($dark-primary-dark, 20%)};
  --color-link: #{lighten($link, 20%)};
  --color-back-to-top: #{lighten($link, 5%)};
}

Toggle Theme

The theme is toggled by adding the dark class to the body element.

./scripts/theme.js
const toggleTheme = () => {
  document.body.classList.toggle("dark");
};
Table of Contents