Colors

Shock Theme colors are a modern and striking combination. However, these will not always be the colors of your brand, and it may be necessary to change the theme colors. You can easily do this by editing the file. theme.css

Color System

Shock Theme has its own color system whose main function is to allow elements to receive a predefined color through a class.

Some elements in addition to the color system, have different schemes that can set all element colors at once. This becomes useful, because with a single class it is possible to define a dark theme, or a light theme.

:root .arrow-button.scheme-1 {
	--color-1: var(--black-color);
}

:root .arrow-button.scheme-2 {
	--color-1: var(--white-color);
}

The color system reduces the amount of CSS making loading faster, in addition to allowing infinite customization possibilities. Notice in the following example an arrow button element defined in scheme-1 and colored primary.

<a href="#your-link" class="button arrow-button next scheme-1 primary">
  <span class="arrow">
    <span class="item"></span>
    <span class="item"></span>
  </span>
  <span class="line"></span>
  <span class="text">GET STARTED</span>
</a>

It is also possible to define an element's hover only with a color system class. See in the following example the infinity of possibilities that can be achieved using only classes.

<a href="#your-link" class="button shadow black primary-hover hover-up-down">
  <span class="button-text white-75 white-hover">Move Up Down</span>
  <i class="fa-solid fa-arrow-right button-icon white-75 white-hover"></i>
</a>