Rhye

# Customizing Colors

The main colors used throughout the template are defined as CSS variables in 📄 css/main.css under the :root selector.

# Main Colors

:root {
  ...
  /* Dark Colors */
  --color-dark-1: #111111;
  --color-dark-2: #262626;
  --color-dark-3: #333333;
  --color-dark-4: #555555;
  /* Light Colors */
  --color-light-1: #eeece6;
  --color-light-2: #f2f1ed;
  --color-light-3: #f7f6f3;
  --color-light-4: #f1e9db;
  /* Middle shades of grey */
  --color-gray-1: #888888;
  --color-gray-2: #cccccc;
  ...
}

# Typography Colors

You may define custom colors for each typographic element – heading, blockquote, or main text. These should be present for two color themes – dark and light.

:root {
  ...
  /* XL Heading */
  --xl-color-light: #eeece6;
  --xl-color-dark: #333333;
  /* h1 Heading */
  --h1-color-light: #eeece6;
  --h1-color-dark: #333333;
  /* h2 Heading */
  --h2-color-light: #eeece6;
  --h2-color-dark: #333333;
  /* h3 Heading */
  --h3-color-light: #eeece6;
  --h3-color-dark: #333333;
  /* h4 Heading */
  --h4-color-light: #eeece6;
  --h4-color-dark: #262626;
  /* h5 Heading */
  --h5-color-light: #eeece6;
  --h5-color-dark: #262626;
  /* h6 Heading */
  --h6-color-light: #eeece6;
  --h6-color-dark: #262626;
  /* Blockquote */
  --blockquote-color-light: #ffffff;
  --blockquote-color-dark: #262626;
  /* Paragraph */
  --paragraph-color-light: #cccccc;
  --paragraph-color-dark: #262626;
  /* Paragraph with dropcap */
  --dropcap-color-light: #ffffff;
  --dropcap-color-dark: #111111;
  ...
}

# Helper Classes

Use one of the following classes to style an element's background using a CSS variable:

.bg-dark-1 /* equals to background-color: var(--color-dark-1); */
.bg-dark-2
.bg-dark-3
.bg-dark-4
.bg-light-1 /* equals to background-color: var(--color-light-1); */
.bg-light-2
.bg-light-3
.bg-light-4
.bg-white /* equals to background-color: #fff; */

# Dark & Light Themes

The majority of the theme sections support dark and light color themes. You can define these themes via the data-arts-theme-text attribute, specifying whether you want the section texts to be light (for dark backgrounds) data-arts-theme-text="light" or dark (for light backgrounds) data-arts-theme-text="dark".

Consider the following examples:

<!-- Light elements and typography placed on dark (.bg-dark-2) background -->
<section
  class="section section-services pt-medium pb-small bg-dark-2"
  data-arts-theme-text="light"
>
  ...
</section>

<!-- Dark elements and typography placed on white (.bg-white) background -->
<section
  class="section section-services pt-medium pb-small bg-white"
  data-arts-theme-text="dark"
>
  ...
</section>

TIP

A section without an explicitly set data-arts-theme-text attribute is considered as a section with a light background and dark elements and typography.

← Fluid Typography →