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 () {