From 1d78b75e7d3fb89934d5c1b2d7cb25c59350c881 Mon Sep 17 00:00:00 2001
From: rabail-aamir <rabailamir310@gmail.com>
Date: Mon, 1 Sep 2025 00:23:04 +1000
Subject: [PATCH 1/2] docs: add guide for adding custom themes

---
 .gitignore                       |  2 +-
 Documentation/add-theme-guide.md | 50 ++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 Documentation/add-theme-guide.md

diff --git a/.gitignore b/.gitignore
index c3f7ccf..0cedd28 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,4 @@ out/
 splashkit/splashkit_autocomplete.json
 generated/
 __pycache__/
-_framework/
\ No newline at end of file
+_framework/.DS_Store
diff --git a/Documentation/add-theme-guide.md b/Documentation/add-theme-guide.md
new file mode 100644
index 0000000..130573f
--- /dev/null
+++ b/Documentation/add-theme-guide.md
@@ -0,0 +1,50 @@
+# Adding a Custom Theme to SplashKit Online
+
+The guide provides instructions for adding new themes to the SplashKit Online editor through theme.js and colors.css modifications and user interface updates for theme selection functionality.
+
+## Files Involved
+- `javascript/UI/themes.js`
+- `css/colours.css`
+- `index.html`
+
+## Add Theme Colours to *theme.js*
+
+Add your preferred color values to the themes object in javascript/UI/themes.js. 
+
+```js
+"myCustomTheme": {
+  "editorBackgroundColour": "#2e3440",
+  "editorKeyword": "#81a1c1",
+  "editorComment": "#616e88",
+  "editorLineNumber": "#d8dee9",
+  "editorGutterBackground": "#3b4252",
+  "editorString": "#a3be8c"
+}
+```
+
+
+## Theme Selector in *index.html* is updated 
+
+Make sure that this is updated, as this is resposible for enabling users to select the theme. 
+
+```html
+<li style="margin-left:1rem">
+<div>Theme:&nbsp;</div>
+<select id="themeSelection"></select>
+</li>
+```
+
+## CSS Variables in *colours.css*
+
+The Themes system enables runtime modification of CSS variables through its functionality. The available variables exist within the css/colours.css file which you can access for viewing.
+
+```css
+--editorKeyword
+--editorComment
+--editorLineNumber
+--editorBackgroundColour
+--editorString
+--editorGutterBackground
+--shadowColour
+```
+

From e3c7a6f1ce8ee2505ee89faaff6f6d576e92550b Mon Sep 17 00:00:00 2001
From: rabail-aamir <rabailamir310@gmail.com>
Date: Sat, 27 Sep 2025 01:57:03 +1000
Subject: [PATCH 2/2] docs(theme): expand CSS variables section with full list
 grouped by category

---
 Documentation/add-theme-guide.md | 47 ++++++++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/Documentation/add-theme-guide.md b/Documentation/add-theme-guide.md
index 130573f..16b7cd2 100644
--- a/Documentation/add-theme-guide.md
+++ b/Documentation/add-theme-guide.md
@@ -39,12 +39,55 @@ Make sure that this is updated, as this is resposible for enabling users to sele
 The Themes system enables runtime modification of CSS variables through its functionality. The available variables exist within the css/colours.css file which you can access for viewing.
 
 ```css
+/* Code editor colours */
 --editorKeyword
 --editorComment
+--editorGutterBackground
 --editorLineNumber
---editorBackgroundColour
+--editorFunctionsAndObject
+--editorProperty
+--editorNumber
+--editorSelected
 --editorString
---editorGutterBackground
+--editorMeta
+--editorVariable2
+--editorType
+--editorBackgroundColour
+
+/* UI colours */
+--gutterColour
+--disabled
+--errorColour
+--warning
+--activeTabColour
+--nodeConflict
+--languageSelectBackground
+--errorLineBackground
+--transientColour
+
+/* Gutter colours */
 --shadowColour
+--nodeHover
+--fileColour
+--iconHover
+
+/* Terminal colours */
+--terminalBackground
+
+/* Text */
+--primary
+
+/* Demo colours */
+--language
+--tagBackground
+--demoTitleBackground
+--demoThumbnailBackground
+
+/* Loading bar */
+--loadingBackground
+
+/* Fonts */
+--font
+--editorFont
 ```