Differences

This shows you the differences between two versions of the page.

--- wiki:ai2:ai2_themes [2026/08/29 09:02] – [:root variables] Neil Thomas
+++ wiki:ai2:ai2_themes [2026/08/29 13:55] (current) – Neil Thomas
@@ Line 6: / Line 6: @@
 The purple theme can be viewed below:
+<WRAP indent><WRAP box border purple rightbar>
 ++++ The Purple Theme |
 <code css>
 @charset "utf-8";
 /*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- *  Theme:  theme             (#00332C)   v3.1
+ *  Theme:  Purple             (#622f53)   v3.1
  *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- *  For:   OWS websites
+ *  For:   OW websites
  *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  *  Author:     DNC Thomas
  *  Last edit:  2026-08-25 18:32:40
  *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
-/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-    Theme: Purple (#622f53)
-    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 :root {
@@ Line 62: / Line 59: @@
 </code>
 ++++
+</WRAP></WRAP>
 ===== Creating your own theme =====
-==== :root variables ====
+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.
@@ Line 74: / Line 77: @@
 ++
-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.  I use the site [[https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator | Box Shadow Generalor]] ++
+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>