Install

Two use any of the theming options or components, you will need to add the css and javascript files to your application.

Css

Add the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://brand.workingsolutions.com/components/css/wsol-components.css">

Javascript

Include the javascript file along with the other javascript files. Preferably in the footer. May need to be added to the <head>, depending on the code structure.

<script src="https://brand.workingsolutions.com/components/js/react-embed.js">

Adding a theme

There are seven themes to choose from: Sea Serpent, Dragon, Sun Wukong, Ifrit, Dybbuk, Fae, and Nine Tails. For reference on what the themes look like, go to the Colors and Themes page. Some components will change, based on the theme chosen.

To apply the theme, add the following script to your website/application:

var body = document.body;
body.classList.add("theme-ifrit");

The above script will add the Ifrit theme. It is okay if you add the script and you don’t see a change in your page. This just means you do not have a component on the page that automatically changes. If you want to customize a single page, add it to the page javascript. If you want the whole application to be the same theme, then add it to the global javascript that affects the entire application.

The other theme classes are as followed:

  • theme-sea-serpent
  • theme-dragon
  • theme-sun-wukong
  • theme-ifrit
  • theme-dybbuk
  • theme-fae
  • theme-nine-tails

Adding a theme to elements

We can customize certain elements to have our theme styles applied as a text gradient by adding the following javascript:

const themeElements = document.querySelectorAll("h2, h4, p.custom");
themeElements.forEach(function (i) {
  i.classList.add("custom-theme");
});

With the code above, every h2, h4, and paragraphs with a class custom, will apply the theme colors to the text.  You can be as specific as you need to be with the element you want to apply the theme to.

Adding a theme to backgrounds

The option to add the theme colors to a background of an element is available, as well.  If you have a header or an element that you want to add a gradient background to, the following script can be used:

const bgmatches = document.querySelectorAll(".btn-primary");
bgmatches.forEach(function (i) {
  i.classList.add("bg-custom-theme");
});

The above code will add a gradient background to any element with the class .btn-primary.  Just like with the Text Gradient, you can be specific so that only certain elements will be styled with the theme.

Full code

The following is an example of a full body of code:

var body = document.body;
body.classList.add("theme-ifrit");

const themeElements = document.querySelectorAll("h2, h4, p.custom");
themeElements.forEach(function (i) {
  i.classList.add("custom-theme");
});

const bgmatches = document.querySelectorAll(".btn-primary");
bgmatches.forEach(function (i) {
  i.classList.add("bg-custom-theme");
});

Visit the Codepen to test out the functions above. For any questions on theming, contact design@workingsol.com.