The AI2 Themes
- Creating your own theme
  - :root variables
- Redefined Classes
  - Theme colour combinations
  - Gradients

The AI2 Themes

The AI2 Themes are slightly different to the Default Website themes but they should be compatible. This is not the case vica-versa; you cannot use Default Website themes with the AI.

Although included in the Themes folder, there is a theme - purple & dark_purple included in the release files. This would need to be manually included in the ai-settings.js file if you want to view and/or use it.

The purple theme can be viewed below:

The Purple Theme

@charset "utf-8";
/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *  Theme:  Purple             (#622f53)   v3.1
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *  For:   OW websites
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *  Author:     DNC Thomas
 *  Last edit:  2026-08-25 18:32:40
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 
:root {
    --baseR: 98;
    --baseG: 47;
    --baseB: 83;
 
    --color1: #22111d;
    --color2: #45213a;
    --color3: #673258;
    --color4: #8a4275;
    --color5: #ac5392;
    --color6: #bd75a8;
    --color7: #cd98be;
    --color8: #debad3;
    --color9: #eedde9;
    --modal: rgba( var(--baseR), var(--baseG), var(--baseB), 0.3);
    --shadow1: 0 0.3em 0.3em -1px var(--color5);
    --shadow2: 0.2em 0.2em rgb(var(--baseR), var(--baseG), var(--baseB), 80%), 0.6em 0.6em 0.6em rgb(var(--baseR), var(--baseG), var(--baseB), 50%);
 
    --gradient-down: linear-gradient( 0deg,  var(--color7), var(--color5));
    --gradient-up:   linear-gradient( 0deg,  var(--color5), var(--color7));
    --gradient-ltr:  linear-gradient( 90deg, var(--color7), var(--color5));
    --gradient-rtl:  linear-gradient( 90deg, var(--color5), var(--color7));
}
 
/*  Theme colour combinations (Foreground / Background)	
    You may wish to tweek these to improve contrast; you
    should start by changing color1 to color9 and vica-versa */
.ow-theme4, .ow-theme4-hvr:hover {color: var(--color9);}
.ow-theme5, .ow-theme5-hvr:hover {color: var(--color9);}
.ow-theme6, .ow-theme6-hvr:hover {color: var(--color1);}
 
/* Gradients ~ You may wish to adjust the foreground colours used */
.ow-theme-grad-down-hvr:hover,
.ow-theme-grad-up-hvr:hover,
.ow-theme-grad-ltr-hvr:hover,
.ow-theme-grad-rtl-hvr:hover,
/* Include buttons in a btnBar*/
.ow-btnBar button:hover {color: var(--color9)!important;}

Creating your own theme

It's quite easy to create your own theme simply by copying any of the themes in the theme folder and renaming it.

You then need to set the variables in th e:root section as described below. To use your theme, you will need to copy its name into the js/ai-settings.js file in the appropriate section. You should remember that it should be all lower case and not have it .js extension.

Below is a description and explanation of the various sections.

:root variables

These are the foundation for all themes. The first three variables: –baseR, –baseG and b–baseB define the red, green and blue component of the theme colour.

The following 9 variables: –color1 to –color9 define a range of colours from dark to light based on the theme colour. I obtain these from https://icolorpalette.com/ but any site that provides colour ranges based on a single colour can be used. Dark Themes For dark themes I simply reverse the order of the colours used.

The next three variables; –modal, –shadow1 and –shadow2 define the background used while displaying the almanac popup; and the two shadows available. You should see that these variabls are all based on variables described above. This ensures that they maintain the theme colours. If you understand how to generate shadows then feel free to edit them. Note I use on-line shadow generators to make this easier such as Box Shadow Generalor

Finally, there are four variables that define the gradients that again use existing variables. Again feel free to adjust these if you want.

Redefined Classes

Theme colour combinations

The three classes included are all in the mid-range of the theme. This is to enable changes to be made to the foreground colours as the background gets lighter. Some backgrounds need the darkest colour for text, while others need the lightest. Including these in the theme makes sure that sufficient contrast is maintained.

Gradients

The same issues arise with gradients as they all use mid-range colours. Even if you don't change the gradients themselves, you may need to use the lightest or darkest avaialable theme colour to ensure sufficient contrast for text on a hovered gradient.

If you do modify the gradients themselves, it is almost certain that you will need to adjust this colour. (You may even need to add colours for no hover.) Note Use: .ow-theme-grad-down, etc without the :hover psudo class.