====== 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:
<WRAP indent><WRAP box border purple rightbar>
++++ The Purple Theme |
<code css>
@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;}
</code>
++++
</WRAP></WRAP>
===== 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 ====
<WRAP indent>
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 [[https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator | 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.
</WRAP>

===== Redefined Classes =====
<WRAP indent>
==== 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.
</WRAP>
==== Gradients ====
<WRAP indent>
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.++
</WRAP>