JWS Docs / JWS Styling / JWS Style Variables

Jasmine Website Starter Variables Explained

CSS variables or Custom Properties (to give them their proper name) are used to define values that are reused throughout a document.

Such as a brand colour that is repeated about your site maybe for headings, titles and borders etc.. normally you would have to repeat that colour value in all those CSS properties that use it.

But with variables you can define the colour once at the :root { } of your file (top / beginning) then call that value wherever you need it. Then if you decide at some point to change your brand colour you only have to make the one change and all those CSS properties will change.

To define a variable we need to first start with double hyphen --

Then we add the variable name --color-primary

We then add the value --color-primary: rgb(4, 98, 94);

This is now set ready to be added wherever needed in our CSS file but to do so we need to use a var() so lets see how to add it to a <h1> for example.

h1 {color: var(--color-primary);}

JWS Style Variables

For the JWS Templates we have defined in the :root all of our colours plus a couple of supplementary font families, we did this for two reasons.

Firstly to make it easier for those new to changing CSS to identify and make the changes they want.

Secondly it allowed us to offer you a dark mode option for your website.

Below you can see all the variables and their colour values that we have included with our templates.

:root {
   color-scheme: light dark;
   --color-body-background: rgb(255, 255, 255);
   --color-secondary-background: rgb(251, 248, 248);
   --color-text: rgb(70, 70, 70);
   --color-headings: rgb(9, 84, 57);
   --color-links: rgb(102, 51, 153);
   --color-border: rgb(0, 128, 128);
   --color-border-dark: rgb(0, 85, 85);
   --color-border-footer: rgb(211, 211, 211);
   --color-code: rgb(128, 0, 0);
   /*---- nav & buttons ----*/    
   --color-one-nav-btn: rgb(0, 85, 85);
   --color-two-nav-btn: rgb(255, 255, 255);
   --color-active-nav-btn: rgb(237 126 36);
   /*---- Form ----*/
   --color-form-background: rgb(229, 229, 229);
   --color-inputs-text: rgb(105, 108, 113);
   --color-inputs-background: rgb(248, 248, 255);
   --color-form-legend: rgb(104, 142, 163);
   --color-form-label: rgb(26, 40, 55);
   --color-form-error: rgb(72, 61, 139);
   /*---- Fonts ----*/
   --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Segoe, Helvetica, Arial, sans-serif;
   --font-family-code: ui-monospace, Consolas, Monaco, SFMono-Regular, SF Mono, Menlo, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", monospace;
   --font-family-serif: 'Palatino', Georgia, serif;
   --icon-hover: drop-shadow(2px 2px 3px rgb(104, 142, 163));
}

@media (prefers-color-scheme: dark) {
   :root {
      --color-body-background: rgb(13, 17, 23);
      --color-secondary-background: rgb(22, 27, 34);
      --color-text: rgb(245, 245, 245);
      --color-headings: rgb(5, 223, 193);
      --color-links: rgb(255, 168, 98);
      --color-border: rgb(0, 128, 128);
      --color-border-dark: rgb(0, 85, 85);
      --color-code: rgb(126, 231, 135);
      /*---- nav & buttons ----*/    
      --color-one-nav-btn: rgb(255, 255, 255);
      --color-two-nav-btn: rgb(0, 85, 85);
      --color-active-nav-btn: rgb(237 126 36);
      /*---- Form ----*/
      --color-form-background: rgb(22, 27, 34);
      --color-inputs-text: rgb(245, 245, 245);
      --color-inputs-background: rgb(13, 17, 23);
      --color-form-legend: rgb(104, 142, 163);
      --color-form-label: rgb(113, 176, 243);
      --color-form-error: rgb(237, 126, 36);
      --icon-hover: opacity(0.2);
   }  
   .social_icons img {
      filter: invert(1);
   }
}

Updating Colour Variables

We understand that not everyone will like or want our chosen colour scheme and will want to change it, which is absolutely fine. But if you do plan on making changes you will need to keep in mind that any colours you replace for textual elements or backgrounds to text should have their contrast checked for accessibility. You can do this in your browser prior to changing any colour values in the style.css file by using the colour picker in the dev tools.

We have a section on our Browser Dev tools Intro page that explains how to use the colour picker tool and how to check that colours pass the current recommended accessibility standards.

Dark Mode

For those users who prefer using/reading on a dark background we have included a Dark Mode set of colours.

We did this by adding a second :root within a @media query. This :root contains all the same variables as defined in the original. Though the colour values have now changed so the whole site will be readable still with the dark background.

Dark mode can be switched on either in the browser settings or you can toggle the prefers-color-scheme:dark in the browser dev tools via the paint brush icon. Find out how to use this and other useful dev tools on our Browser Dev tools Intro page.

In this :root we also added a filter to the .social_icons img to give the icons a visual indication when hovered in this dark mode, though this isn't a variable.

What if you have two vars with the same name?

If you have two (or more) var's of the same name the last one in the list is the one that will be used.

The browser tools elements style panel will show the first var with a strikethrough (line through it), so if you see a var with this you might want to check over your variables.

There are a couple of ways in VS Code to make this easier to check for. Firstly if you click on the var name it will then highlight all vars of the same name, which you might miss if you have a long list of them.

Another way to check is to right click on the var name and choose go to definition then you will see a pop up window that lists the vars.

If you see more than two values this might be because you have it defined twice or more.

Why two values? Well if you have a light mode and dark mode then you will likely have two sets of the same var names, plus you should also see any class using the var.