Date: Wed, 11 Jun 2025 11:01:07 +0530
Subject: [PATCH 4/4] feat: add support for switching between light, dark, and
high-contrast themes
---
dev-dist/sw.js | 2 +-
index.html | 7 ++++++-
main.js | 28 ++++++++++++++++++++++++++++
style.css | 33 +++++++++++++++++++++++++++------
4 files changed, 62 insertions(+), 8 deletions(-)
diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index 0d6e43e3..0874e3c7 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -91,7 +91,7 @@ define(['./workbox-d9a5ed57'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
- "revision": "0.if05erel418"
+ "revision": "0.l55pteosdog"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/index.html b/index.html
index 1dceabb2..86a42c8b 100644
--- a/index.html
+++ b/index.html
@@ -190,11 +190,16 @@
+
diff --git a/main.js b/main.js
index 9957d274..f83c4aa9 100644
--- a/main.js
+++ b/main.js
@@ -2692,3 +2692,31 @@ function setupAutoValueBehavior(workspace) {
}
});
}
+
+function applyTheme(theme) {
+ document.body.classList.remove('theme-light', 'theme-dark', 'theme-high-contrast');
+ document.body.classList.add('theme-' + theme);
+ localStorage.setItem('theme', theme);
+ // Update Blockly theme if available
+ if (window.Blockly && window.workspace) {
+ if (theme === 'dark') {
+ window.workspace.setTheme(Blockly.Themes.Dark);
+ } else if (theme === 'high-contrast') {
+ window.workspace.setTheme(Blockly.Themes.HighContrast);
+ } else {
+ window.workspace.setTheme(Blockly.Themes.Classic);
+ }
+ }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+ const themeSwitcher = document.getElementById('themeSwitcher');
+ if (themeSwitcher) {
+ const savedTheme = localStorage.getItem('theme') || 'light';
+ themeSwitcher.value = savedTheme;
+ applyTheme(savedTheme);
+ themeSwitcher.addEventListener('change', function(e) {
+ applyTheme(e.target.value);
+ });
+ }
+});
diff --git a/style.css b/style.css
index cedcc182..92ce80a5 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,25 @@
+:root {
+ --background: #fff;
+ --foreground: #000;
+ --menu-bg: #fff;
+ --button-bg: #f0f0f0;
+ --button-fg: #000;
+}
+.theme-dark {
+ --background: #181818;
+ --foreground: #f0f0f0;
+ --menu-bg: #222;
+ --button-bg: #333;
+ --button-fg: #fff;
+}
+.theme-high-contrast {
+ --background: #000;
+ --foreground: #fff;
+ --menu-bg: #000;
+ --button-bg: #ff0;
+ --button-fg: #000;
+}
+
#info-panel {
margin-top: 15px;
margin-left: 10px;
@@ -47,9 +69,8 @@ body {
-webkit-tap-highlight-color: transparent;
height: 100vh;
width: 100vw;
-}
-
-body {
+ background: var(--background);
+ color: var(--foreground);
display: flex;
gap: 0;
box-sizing: border-box;
@@ -159,7 +180,7 @@ path.blocklyPath.blockly-ws-search-highlight.blockly-ws-search-current {
max-width: 100vw;
gap: 5px;
z-index: 10;
- background-color: rgba(255, 255, 255, 0.9);
+ background-color: var(--menu-bg);
padding: 0;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
@@ -186,8 +207,8 @@ path.blocklyPath.blockly-ws-search-highlight.blockly-ws-search-current {
margin: 0;
padding: 5px;
font-size: 18px;
- background-color: #f0f0f0;
- color: black;
+ background-color: var(--button-bg);
+ color: var(--button-fg);
border: none;
border-radius: 15px;
cursor: pointer;