libraries > ThemeManager;

Theme Manager is a lightweight Javascript library that allows you to create custom 4-colored themes on the fly with a simple themes.js file.
Find out how to use it on this page.

First, you need to create a themes.js file. This will hold all your theme data as well as your settings.
It is recommended to share the same themes.js file across your site for consistency.

Here are the default contents for this file:

themes.js

var settings = {
//width of each color square
    width: "3em", 
//width of space between color selectors
    gap: "1em",  
//whether you want to use 
//cookies to save site-wide theme choices
    cookies: false, 
//the domain for the cookies to be set on
    domain: 'jacq.dev' 
};

var data = [
    {
        bg: "#F4DFD0",
        fg: "#FDEFEF",
        col1: "#fff8f8",
        col2: "#ded2c3",
        default: true
    },
    {
        bg: "#93B5C6",
        fg: "#C9CCD5",
        col1: "#FFE3E3",
        col2: "#E4D8DC"
    },
    {
        bg: "#BAABDA",
        fg: "#D6E5FA",
        col1: "#FFF9F9",
        col2: "#D77FA1"
    },
    {
        bg: "#87AAAA",
        fg: "#C8E3D4",
        col1: "#F6EABE",
        col2: "#F6D7A7"
    },
];

Once you have that, you should import it to any page you would like to use your themes, along with the latest version of ThemeManager.js, with:

<script src="themes.js"></script>
<script src="https://lib.jacq.dev/th"></script>

If you wish to see the code, you can either head over to the GitHub, or view it directly at lib.jacq.dev/th.

themes.js has two parts. Settings, and theme data.
Each setting has an effect on your configuration.

• width: This defines the width of a single square within the 4 square container in the theme selector.
• gap: This defines the space between the themes in the theme selector.
• cookies: This defines whether you want your users to have a cookie storing their last chosen theme. It is useful if you find yourself constantly re-applying a certain theme.
• domain: This is the domain the cookies will have an effect on. It is required if you use cookies.
  Do not specify subdomains, instead only specify your top level domain. E.G.: jacq.dev.

Under data, you will find a collection of themes. You can add or remove to these themes as you like. Each color is set with a HEX code. There are 4 settable colors.

• bg: Typically used for a background color.
• fg: Used for a foreground color.
• col1: This is the first accent color.
• col2: This is the second accent color.

In addition to 4 colors, there is also a "default" attribute. You just need to set it to true on the theme you would like to automatically set on page load. This attribute is not required on any other theme.

Now that you know how to setup your themes.js file, you can apply your theme.

There are a total of 8 accessible colors in your CSS now. The 4 that you set, in addition to 4 automatically created colors. These colors are:

• bglink: A darkened version of bg, it is useful for having special text over the bg color.
• fglink: A darkened version of fg, it is useful for having special text over the fg color.
• bgaccent: A less darkened version of bg, useful for accents such as lines, borders and other small touches over the bg color.
• fgaccent: A less darkened version of fg, useful for accents such as lines, borders and other small touches over the fg color.

Each of these colors are now available in CSS using the var() keyword. Below is an example css file.

example.css

body {
    background-color: var(--bg);
}

.foreground {
    background-color: var(--fg);
}

.foreground a {
    color: var(--fglink);
}

When using these variables in CSS, it is important to remember to use two dashes before the name of the variable.

Where can you see it in action? Well, this page, along with all my other pages uses it. The selector is on the top of the page!

That is all! You're now set to use ThemeManager. If you have any problems, feel free to open an issue on Github!