Asli

# Colors

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

# Background Colors

When adjusting the template colors, please set both HEX and RGB (separated by commas) values as shown below. RGB values are used to produce background overlays. If you need help with the conversion, this service might help: Hex to RGB Color Converter (opens new window).

/* Colors */
:root {
  /* Dark colors */
  --color-dark-1: #20211F;
  --color-dark-1-rgb: 32, 33, 31;
  --color-dark-2: #1B1A18;
  --color-dark-2-rgb: 27, 26, 24;
  --color-dark-3: #313130;
  --color-dark-3-rgb: 49, 49, 48;
  --color-dark-4: #060707;
  --color-dark-4-rgb: 6, 7, 7;
  /* Gray colors */
  --color-gray-1: #939597;
  --color-gray-1-rgb: 147, 149, 151;
  --color-gray-2: #C0C0C0;
  --color-gray-2-rgb: 192, 192, 192;
  --color-gray-3: #777777;
  --color-gray-3-rgb: 119, 119, 119;
  --color-gray-4: #888888;
  --color-gray-4-rgb: 136, 136, 136;
  /* Light colors */
  --color-light-1: #DBDAD7;
  --color-light-1-rgb: 219, 218, 215;
  --color-light-2: #E8E6E0;
  --color-light-2-rgb: 232, 230, 224;
  --color-light-3: #F1F2ED;
  --color-light-3-rgb: 241, 242, 237;
  --color-light-4: #FFFFFF;
  --color-light-4-rgb: 255, 255, 255;
  /* Platinum colors */
  --color-platinum-1: #767B75;
  --color-platinum-1-rgb: 118, 123, 117;
  --color-platinum-2: #686D67;
  --color-platinum-2-rgb: 104, 109, 103;
  /* Accent colors */
  --color-accent-light-theme: #656453;
  --color-accent-light-theme-rgb: 101, 100, 83;
  --color-accent-dark-theme: #FDF9CF;
  --color-accent-dark-theme-rgb: 253, 249, 207;
  --color-accent: var(--color-accent-light-theme);
  --color-accent-rgb: 101, 100, 83;
  /* Border colors */
  --color-border-opacity-light-theme: rgba(32, 33, 32, .2);
  --color-border-opacity-dark-theme: rgba(255, 255, 255, .2);
  --color-border-opacity: var(--color-border-opacity-light-theme);
  --color-border-solid-light-theme: #20211F;
  --color-border-solid-dark-theme: #fff;
  --color-border-solid: var(--color-border-solid-light-theme);
  /* Links colors */
  --color-links-light-theme: #666;
  --color-links-dark-theme: #fff;
  --color-links: var(--color-links-light-theme);
  --color-classic-submenu-links: #000;
  --color-classic-submenu-links-hover: #656453;
  --color-classic-submenu-links-hover-background: #65645315;
}

# Helper Classes

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

.bg-dark-1 /* === background-color: var(--color-dark-1); */
.bg-dark-2
.bg-dark-3
.bg-dark-4

.bg-gray-1 /* === background-color: var(--color-gray-1); */
.bg-gray-2
.bg-gray-3
.bg-gray-4

.bg-light-1 /* === background-color: var(--color-light-1); */
.bg-light-2
.bg-light-3
.bg-light-4

.bg-platinum-1 /* === background-color: var(--color-platinum-1); */
.bg-platinum-2

.bg-accent /* === background-color: var(--color-accent); */
.bg-accent-dark-theme
.bg-accent-light-theme

# Dark & Light Themes

The majority of the template elements support dark & light color themes. You can define those themes via the data-arts-color-theme attribute. It accepts dark or light as valid values.

Consider the following examples:




 




<!-- Light elements and typography placed on a dark (.bg-dark-2) background -->
<main
  class="page-wrapper bg-dark-2"
  data-arts-color-theme="dark"
  >
  ...
</main>



 




<!-- Dark elements and typography placed on a light (.bg-light-1) background -->
<div
  class="header__wrapper-overlay-menu js-header__overlay-container bg-light-4"
  data-arts-color-theme="light"
  >
  ...
</div>

TIP

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

# Typography Colors

To learn more about how to properly adjust the color of texts, please refer to the Typography article.

← Fonts →