diff --git a/css/colours.css b/css/colours.css index 96d542b8..27ce3276 100644 --- a/css/colours.css +++ b/css/colours.css @@ -7,7 +7,7 @@ --editorFunctionsAndObject: #50fa7b; --editorProperty: #66d9ef; --editorNumber: #bd93f9; - --editorSelected: rgba(255, 255, 255, 0.10); + --editorSelected: rgba(0, 120, 215, 0.20); --editorString: #f1fa8c; /* This meta colour is used for a numerious single characters, These include () in function calls, ; for termination operator ect */ --editorMeta: #f8f8f2; diff --git a/css/executionEnviroment.css b/css/executionEnviroment.css index 25651968..0c67f2d1 100644 --- a/css/executionEnviroment.css +++ b/css/executionEnviroment.css @@ -53,7 +53,6 @@ } - .sk-terminal-input-wrapper input { flex-grow: 1; margin: 0; @@ -94,8 +93,6 @@ background-color: var(--terminalBackground); } - #output { background-color: var(--terminalBackground); } - diff --git a/javascript/UI/themes.js b/javascript/UI/themes.js index 20449d96..c6e67800 100644 --- a/javascript/UI/themes.js +++ b/javascript/UI/themes.js @@ -1,65 +1,176 @@ //Applies a theme by overriding CSS variables using a JSON object function applyTheme(theme) { - if (!theme) { //empty/null/undefined = reset - document.documentElement.removeAttribute("style"); - return; - } - //For each entry (element) inside of each theme category that is applied - for (const key in theme) { - //Apply each color variable to the root of the document - document.documentElement.style.setProperty(`--${key}`, theme[key]); + //Helper function used to apply theme to specific document because of: + //Main parent document + //Iframe execution environment for the runtime/terminal + const applyThemeToDocument = (doc) => { + //Reset if empty, null or undefined + if (!theme) { + doc.documentElement.removeAttribute("style"); + return; + } + + //For each entry (element) inside of each theme category that is applied + for (const key in theme) { + doc.documentElement.style.setProperty(`--${key}`, theme[key]); + } + }; + + //Apply the theme to the main website/editor UI + applyThemeToDocument(document); + + //Execution environment runs inside an iframe which has its own separate document + //The theme must also be applied there for the terminal to update correctly + const iframe = document.getElementById("iframetest"); + + //Only apply the theme if the iframe exists and has loaded + if (iframe && iframe.contentDocument) { + applyThemeToDocument(iframe.contentDocument); } } //Run it in console dynamically after hosted window.applyTheme = applyTheme; -//Avaliable themes that can be applied +//Reapplies the last selected theme from localStorage +function applySavedTheme() { + const savedTheme = localStorage.getItem("skoTheme"); + + if (savedTheme && themes[savedTheme]) { + applyTheme(themes[savedTheme]); + } +} + +//Expose helper so other files can reapply the theme after iframe/language reloads +window.applySavedTheme = applySavedTheme; + +//Available themes that can be applied const themes = { light: { - "editorBackgroundColour": "#8d8d8d", - //"gutterColour": "#8d8d8d", - "shadowColour": "#8d8d8d", - "editorKeyword": "#28282B", - "editorComment": "#00A36C", - "editorLineNumber": "#353935", - "editorGutterBackground": "#202020", - "editorString": "#1f1f1f" - //More can be added from the colours.css file + "editorBackgroundColour": "#ffffff", + "gutterColour": "#f3f6fb", + "shadowColour": "#d8dee9", + "editorKeyword": "#2f81f7", + "editorComment": "#6a737d", + "editorLineNumber": "#7a8699", + "editorGutterBackground": "#eef3fb", + "editorString": "#22863a", + "editorFunctionsAndObject": "#d63384", + "editorProperty": "#005cc5", + "editorNumber": "#b36b00", + "editorMeta": "#24292e", + "editorVariable2": "#24292e", + "editorType": "#0b7285", + "editorSelected": "rgba(0, 95, 184, 0.16)", + "primary": "#1f2328", + "language": "#005cc5", + "tagBackground": "#e8f1fb", + "fileColour": "#2f81f7", + "iconHover": "#003f8f", + "terminalBackground": "#f6f8fa", + "loadingBackground": "#d8dee9", + "languageSelectBackground": "#f3f6fb", + "nodeHover": "#e8f1fb", + "demoTitleBackground": "#e8f1fb", + "demoThumbnailBackground": "rgba(0, 95, 184, 0.08)", + "errorLineBackground": "#ffe5e8", + "errorColour": "#d08770" }, dark: { - "editorBackgroundColour": "#1e1e1e", - //"gutterColour": "#1e1e1e", - "shadowColour": "#1e1e1e", - "editorKeyword": "#FAF9F6", - "editorComment": "#228B22", - "editorLineNumber": "#FFFFF0", - "editorGutterBackground": "#dcdcdc", - "editorString": "#fdfdfd" + "editorBackgroundColour": "#1f1b18", + "gutterColour": "#191512", + "shadowColour": "#191512", + "editorKeyword": "#e06c75", + "editorComment": "#6f665e", + "editorLineNumber": "#6c6258", + "editorGutterBackground": "#2a241f", + "editorString": "#cf8c6c", + "editorFunctionsAndObject": "#f2e5d7", + "editorProperty": "#c7925b", + "editorNumber": "#e5c07b", + "editorMeta": "#f2d9b6", + "editorVariable2": "#ffe66d", + "editorType": "#c8a15a", + "editorSelected": "rgba(229, 168, 75, 0.18)", + "primary": "#f2e5d7", + "language": "#d9a066", + "tagBackground": "#322b25", + "fileColour": "#c8a15a", + "iconHover": "#e5a84b", + "terminalBackground": "#181411", + "loadingBackground": "#3b322c", + "languageSelectBackground": "#2a241f", + "nodeHover": "#332c26", + "demoTitleBackground": "#2a241f", + "demoThumbnailBackground": "rgba(0,0,0,0.28)", + "errorLineBackground": "#4b2c2c", + "errorColour": "#d08770" }, "professional-grey": { - "editorBackgroundColour": "#2b2b2b", - //"gutterColour": "#2b2b2b", - "shadowColour": "#2b2b2b", - "editorKeyword": "#FAF9F6", - "editorComment": "#5F8575", - "editorLineNumber": "#FFFFFF", - "editorGutterBackground": "#e0e0e0" + "editorBackgroundColour": "#2b2f36", + "gutterColour": "#24282f", + "shadowColour": "#24282f", + "editorKeyword": "#7aa2f7", + "editorComment": "#7d8590", + "editorLineNumber": "#6b7280", + "editorGutterBackground": "#31363f", + "editorString": "#8fbf8f", + "editorFunctionsAndObject": "#88c0d0", + "editorProperty": "#b4befe", + "editorNumber": "#7fd9b3", + "editorMeta": "#d8dee9", + "editorVariable2": "#e5e9f0", + "editorType": "#81a1c1", + "editorSelected": "rgba(136, 192, 208, 0.16)", + "primary": "#eceff4", + "language": "#88c0d0", + "tagBackground": "#3b4252", + "fileColour": "#8fa7bf", + "iconHover": "#a7bfd9", + "terminalBackground": "#22272e", + "loadingBackground": "#434c5e", + "languageSelectBackground": "#31363f", + "nodeHover": "#3a404c", + "demoTitleBackground": "#2f3540", + "demoThumbnailBackground": "rgba(0,0,0,0.22)", + "errorLineBackground": "#5a4540", + "errorColour": "#d08770" }, space: { - "editorBackgroundColour": "#0d1117", - //"gutterColour": "#0d1117", - "shadowColour": "#0d1117", - "editorKeyword": "#A7C7E7", - "editorComment": "#191970", - "editorLineNumber": "#191970", - "editorGutterBackground": "#c9d1d9" + "editorBackgroundColour": "#161320", + "gutterColour": "#120f1a", + "shadowColour": "#120f1a", + "editorKeyword": "#8ab4ff", + "editorComment": "#6b6780", + "editorLineNumber": "#7a7496", + "editorGutterBackground": "#211c33", + "editorString": "#ffb3e6", + "editorFunctionsAndObject": "#7ee7ff", + "editorProperty": "#caa6ff", + "editorNumber": "#ffd580", + "editorMeta": "#f5eaff", + "editorVariable2": "#ffffff", + "editorType": "#b388ff", + "editorSelected": "rgba(138, 180, 255, 0.18)", + "primary": "#f5f0ff", + "language": "#7ee7ff", + "tagBackground": "#2a2340", + "fileColour": "#b388ff", + "iconHover": "#7ee7ff", + "terminalBackground": "#100d18", + "loadingBackground": "#7ee7ff", + "languageSelectBackground": "#211c33", + "nodeHover": "#2b2442", + "demoTitleBackground": "#211c33", + "demoThumbnailBackground": "rgba(120, 90, 255, 0.14)", + "errorLineBackground": "#4a2d4d", + "errorColour": "#ff7eb6" } }; //Build a simple isn’t there @@ -68,10 +179,10 @@ document.addEventListener("DOMContentLoaded", () => { //Add every theme as an option Object.keys(themes).forEach(name => sel.add(new Option(name, name))); //Visible text, value //Change the theme when the user picks something - sel.onchange = () => applyTheme(themes[sel.value]); + //sel.onchange = () => applyTheme(themes[sel.value]); - // when user picks a new theme + //When user picks a new theme sel.onchange = () => { const selected = sel.value; if (!selected) { @@ -83,5 +194,13 @@ document.addEventListener("DOMContentLoaded", () => { } }; + //Reapply saved theme when the page reloads + const savedTheme = localStorage.getItem("skoTheme"); + + if (savedTheme && themes[savedTheme]) { + sel.value = savedTheme; + applyTheme(themes[savedTheme]); + } + }); diff --git a/javascript/executionEnviroment/executionEnvironment.js b/javascript/executionEnviroment/executionEnvironment.js index c0d25433..ffc31204 100644 --- a/javascript/executionEnviroment/executionEnvironment.js +++ b/javascript/executionEnviroment/executionEnvironment.js @@ -134,6 +134,10 @@ class ExecutionEnvironment extends EventTarget{ await getPromiseFromEvent(this, "initialized"); this.readyForExecution = true; + + if (typeof window.applySavedTheme === "function") { + window.applySavedTheme(); + } } // Public Facing Methods @@ -203,6 +207,11 @@ class ExecutionEnvironment extends EventTarget{ let f = function(ev){ this.removeEventListener("initialized", f); this.readyForExecution = true; + + if (typeof window.applySavedTheme === "function") { + window.applySavedTheme(); + } + resolve(); } this.addEventListener("initialized", f);