Kinsey

# Colors & Themes

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: #000000;
  --color-dark-2: #181818;
  --color-dark-3: #333333;
  --color-dark-4: #555555;
  /* Light Colors */
  --color-light-1: #ffffff;
  --color-light-2: #fafafa;
  --color-light-3: #f8f8f8;
  --color-light-4: #f2f2ed;
  /* Middle shades of grey */
  --color-gray-1: #b0b0b0;
  --color-gray-2: #cccccc;
  --color-gray-3: #888888;
  --color-gray-4: #e8e8e8;
  /* Portfolio Projects Colors */
  --color-portfolio-1: #f1f6f6;
  --color-portfolio-2: #262626;
  --color-portfolio-3: #f6f6f1;
  --color-portfolio-4: #d7d7d9;
  --color-portfolio-5: #dededb;
  --color-portfolio-6: #f7f6f3;
  --color-portfolio-7: #f0f0f0;
  --color-portfolio-8: #eaeaea;
  --color-portfolio-9: #f1f0f0;
  --color-portfolio-10: #eeece6;
  --color-portfolio-11: #fbf7f6;
  --color-portfolio-12: #e9eaec;
  /* Borders Colors */
  --color-border-dark: rgba(136, 136, 136, .3);
  --color-border-light: rgba(136, 136, 136, .3);
  ...
}

# 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 {
  ...
  /* XXL heading */
  --xxl-color-dark: #555555;
  --xxl-color-light: #ffffff;
  /* XL Heading */
  --xl-color-dark: #555555;
  --xl-color-light: #ffffff;
  /* h1 Heading */
  --h1-color-dark: #555555;
  --h1-color-light: #ffffff;
  /* h2 Heading */
  --h2-color-dark: #555555;
  --h2-color-light: #ffffff;
  /* h3 Heading */
  --h3-color-dark: #555555;
  --h3-color-light: #ffffff;
  /* h4 Heading */
  --h4-color-dark: #555555;
  --h4-color-light: #ffffff;
  /* h5 Heading */
  --h5-color-dark: #555555;
  --h5-color-light: #ffffff;
  /* h6 Heading */
  --h6-color-dark: #555555;
  --h6-color-light: #ffffff;
  /* Subheading */
  --subheading-color-dark: #555555;
  --subheading-color-light: #b0b0b0;
  /* Paragraph */
  --paragraph-color-dark: #555555;
  --paragraph-color-light: #ffffff;
  /* Blockquote */
  --blockquote-color-dark: #555555;
  --blockquote-color-light: #ffffff;
  /* Dropcap */
  --dropcap-color-dark: #111111;
  --dropcap-color-light: #ffffff;
  ...
}

# Helper Classes

Use one of the following classes to style 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-light-1 /* === background-color: var(--color-light-1); */
.bg-light-2
.bg-light-3
.bg-light-4

.bg-white-1 /* === background-color: #fff; */

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

.bg-portfolio-1 /* === background-color: var(--color-portfolio-1); */
.bg-portfolio-2
.bg-portfolio-3
.bg-portfolio-4
.bg-portfolio-5
.bg-portfolio-6
.bg-portfolio-7
.bg-portfolio-8
.bg-portfolio-9
.bg-portfolio-10
.bg-portfolio-11
.bg-portfolio-12

# Dark & Light Themes

The majority of the template 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-1) background -->
<section
  class="section section-services pt-medium pb-small bg-white-1"
  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.

← Typography →