Changing theme colors

Theme Colors

The _variables.scss file defines all the colors used in this theme. You can easily customize the theme’s color scheme by modifying the values in this file.

_variables.scss

// -----------------------------------------------------------------
// 01. Variables
// -----------------------------------------------------------------

// Colors
$theme-colors: (
  "primary": #ff9776,
  "text-color": #555,
  "text-color-dark": #222,
  "text-color-light": #999,
  "heading-color": #1e1c1c,
  "body-color": #fff,
  "border-color": #ececec,
  "border-color-dark": #130d0d,
  "grey": #faede9,
  "black": #000,
  "white": #fff,
  "dark": #121212,
  "light": #edf6f5,
);

Adding Custom Colors

To add more colors to your theme, simply extend the $theme-colors map in _variables.scss like this:

_variables.scss

// Colors
$theme-colors: (
  "primary": #ff9776,
  "secondary": #01a22c, // Add new color here
);

Using Custom Colors in SCSS

Once you’ve defined a new color, you can use it in your SCSS styles by referencing the corresponding variable name prefixed with --pm-. Here’s an example:

blockquote {
  background-color: var(--pm-secondary); // Use the secondary color
}

Converting Theme Colors to CSS Variables

This theme utilizes an SCSS loop to automatically convert theme colors into CSS variables. This makes it easier to access and manage colors throughout your styles.

// Theme Variables
:root {
  // Colors
  @each $color, $value in $theme-colors {
    --pm-#{$color}: #{$value};
  }
}