From 88b96a08416db07f5551a2848f4cb14db24e7613 Mon Sep 17 00:00:00 2001 From: Adii0906 Date: Wed, 26 Mar 2025 20:58:49 +0530 Subject: [PATCH] Added theme toggle --- web/index.html | 116 ++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 100 insertions(+), 16 deletions(-) diff --git a/web/index.html b/web/index.html index 3dc3f6b2..3edf0275 100644 --- a/web/index.html +++ b/web/index.html @@ -1,6 +1,4 @@ - +DEALINGS IN THE SOFTWARE. --> @@ -38,7 +35,7 @@ DEALINGS IN THE SOFTWARE. - + Try Online @@ -244,6 +307,7 @@ DEALINGS IN THE SOFTWARE.
+
Light
Run
@@ -276,6 +340,9 @@ DEALINGS IN THE SOFTWARE. let code_editor = document.querySelector('#code-editor'); let code_output = document.querySelector('#code-output'); let run_button = document.querySelector('#run-button'); + let themeToggle = document.querySelector('#theme-toggle'); + let highlightTheme = document.querySelector('#highlight-theme'); + let mainElement = document.querySelector('main'); code_editor.textContent = '# A recursive fibonacci function.\ndef fib(n):\n if n < 2:\n return n\n return fib(n-1) + fib(n-2)\n\n# Prints all fibonacci from 0 to 10 exclusive.\nfor i in range(10):\n print(f"fib({i}) = {fib(i)}")\n'; @@ -285,7 +352,24 @@ DEALINGS IN THE SOFTWARE. }); highlight(code_editor); - CodeJar(code_editor, highlight); //, { indentOn: /[(\[{:]$/}); + CodeJar(code_editor, highlight); + + // Theme toggle functionality + themeToggle.addEventListener('click', function() { + if (mainElement.classList.contains('editor-light-theme')) { + // Switch to dark theme + mainElement.classList.remove('editor-light-theme'); + highlightTheme.href = 'static/highlight.js/github-dark-dimmed.min.css'; + themeToggle.textContent = 'Light'; + } else { + // Switch to light theme + mainElement.classList.add('editor-light-theme'); + highlightTheme.href = 'static/highlight.js/vs.min.css'; // Changed to VS theme + themeToggle.textContent = 'Dark'; + } + // Re-highlight the code with the new theme + highlight(code_editor); + }); window.onload = function () { run_button.onclick = function () {