Changing Color Scheme
Locate the Template Files
Begin by locating the config.twig
file in the theme folder and opening it to edit the color scheme.
Customize the Color Scheme
Alter the color scheme of the theme by adjusting the values of the variables found in the :root
selector.
⚠️
Please avoid altering the --header-img
variable as it is responsible for setting the header's background image. Changes to this might disrupt the theme's layout.
config.twig
:root {
--logo_width: 450px;
--main-color: #ff6bff;
--error-color: #fe3c45;
--hover-buy: #48995d;
--hover-sell: #d9373f;
--hover-info: #218bdf;
--background-color: #1d1027;
--second-background: #321f40;
--third-background: #3c2b48;
--fourth-background: #1d1027;
--package-border: #564164;
--primary-text-color: #ffffff;
--focus-text-color: #f8bb86;
--secondary-text-color: #aeaeae;
--cold-color: #f8bb86;
--green-button: #4da564;
--light-green: #57b871;
--disable-button: #428954;
--font-family: Montserrat, sans-serif;
--tiny-font: 12px;
--small-font: 14px;
--medium-font: 16px;
--big-font: 18px;
--border-radius: 5px;
--header-img: url({{ config("background-image") }});
--filter-shadow: rgba(255, 107, 255, 0.5);
--gradient-shadow: #d148413d;
--height-image: 486px;
--opacity-image: 1;
--blur-image: 0px;
--gift-color: #9747ff !important;
--gift-background: rgba(151,71,255,.2588235294) !important;
--gift-accent-color: #cca6ff !important;
--gift-text-color: #FFFFFF !important;
}