Zxc200611/pocketpy
1
0
Fork 0
mirror of https://github.com/pocketpy/pocketpy synced 2025-10-20 11:30:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added theme toggle

Browse Source
This commit is contained in:
Adii0906 2025-03-26 20:58:49 +05:30
parent 2336d22666
commit 88b96a0841
1 changed files with 100 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
web/index.html
View File

@ -1,6 +1,4 @@
<!-- <!-- Note:
Note:
This site was created by modifying code pen https://codepen.io/antonmedv/pen/PoPoGwg This site was created by modifying code pen https://codepen.io/antonmedv/pen/PoPoGwg
written by 'Anton Medvedev' the license can be found bellow. written by 'Anton Medvedev' the license can be found bellow.
@ -24,8 +22,7 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE. DEALINGS IN THE SOFTWARE. -->
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@ -38,7 +35,7 @@ DEALINGS IN THE SOFTWARE.
<script src="static/codejar/codejar.js"></script> <script src="static/codejar/codejar.js"></script>
<script src="static/codejar/linenumbers.js"></script> <script src="static/codejar/linenumbers.js"></script>
<script src="static/highlight.js/highlight.min.js"></script> <script src="static/highlight.js/highlight.min.js"></script>
<link rel="stylesheet" href="static/highlight.js/github-dark-dimmed.min.css"> <link rel="stylesheet" href="static/highlight.js/github-dark-dimmed.min.css" id="highlight-theme">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style> <style>
@ -48,7 +45,7 @@ DEALINGS IN THE SOFTWARE.
display: block; display: block;
overflow-x: auto; overflow-x: auto;
padding: .5em; padding: .5em;
background: #282a36 background: #282a36;
} }
.hljs-keyword, .hljs-keyword,
@ -56,12 +53,12 @@ DEALINGS IN THE SOFTWARE.
.hljs-literal, .hljs-literal,
.hljs-section, .hljs-section,
.hljs-link { .hljs-link {
color: #73cbde color: #73cbde;
} }
.hljs, .hljs,
.hljs-subst { .hljs-subst {
color: #f8f8f2 color: #f8f8f2;
} }
.hljs-string, .hljs-string,
@ -75,14 +72,14 @@ DEALINGS IN THE SOFTWARE.
.hljs-variable, .hljs-variable,
.hljs-template-tag, .hljs-template-tag,
.hljs-template-variable { .hljs-template-variable {
color: #f1fa8c color: #f1fa8c;
} }
.hljs-comment, .hljs-comment,
.hljs-quote, .hljs-quote,
.hljs-deletion, .hljs-deletion,
.hljs-meta { .hljs-meta {
color: #6272a4 color: #6272a4;
} }
.hljs-keyword, .hljs-keyword,
@ -94,15 +91,20 @@ DEALINGS IN THE SOFTWARE.
.hljs-type, .hljs-type,
.hljs-name, .hljs-name,
.hljs-strong { .hljs-strong {
font-weight: bold font-weight: bold;
} }
.hljs-emphasis { .hljs-emphasis {
font-style: italic font-style: italic;
} }
:root { :root {
--window-width: 80%; --window-width: 80%;
--editor-bg: #282a36;
--editor-text: #f8f8f2;
--output-bg: #282a36;
--output-text: #ffffff;
--editor-line-highlight: rgba(255, 255, 255, 0.07);
} }
body { body {
@ -184,6 +186,8 @@ DEALINGS IN THE SOFTWARE.
padding: 10px; padding: 10px;
resize: none !important; resize: none !important;
tab-size: 4; tab-size: 4;
background-color: var(--editor-bg);
color: var(--editor-text);
} }
#run-button { #run-button {
@ -193,6 +197,14 @@ DEALINGS IN THE SOFTWARE.
cursor: pointer; cursor: pointer;
} }
#theme-toggle {
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
cursor: pointer;
margin-right: 10px;
}
#code-editor.hljs { #code-editor.hljs {
padding: 10px; padding: 10px;
} }
@ -201,10 +213,10 @@ DEALINGS IN THE SOFTWARE.
font-family: "PT Mono", monospace; font-family: "PT Mono", monospace;
width: var(--window-width); width: var(--window-width);
min-height: 50px; min-height: 50px;
background-color: #282a36; background-color: var(--output-bg);
border-radius: 6px; border-radius: 6px;
padding: 10px; padding: 10px;
color: white; color: var(--output-text);
margin: 0 !important; margin: 0 !important;
} }
@ -231,6 +243,57 @@ DEALINGS IN THE SOFTWARE.
font-size: 16px; font-size: 16px;
margin-bottom: 30px; margin-bottom: 30px;
} }
/* VS Code Light+ theme styles */
.editor-light-theme {
--editor-bg: #FFFFFF;
--editor-text: #000000;
--output-bg: #FFFFFF;
--output-text: #000000;
--editor-line-highlight: rgba(0, 0, 0, 0.07);
}
.editor-light-theme .hljs {
background: #FFFFFF;
color: #000000;
}
/* Syntax colors matching VS Code Light+ */
.editor-light-theme .hljs-keyword,
.editor-light-theme .hljs-selector-tag,
.editor-light-theme .hljs-literal {
color: #0000FF; /* Blue for keywords */
}
.editor-light-theme .hljs-string {
color: #A31515; /* Maroon for strings */
}
.editor-light-theme .hljs-comment {
color: #008000; /* Green for comments */
font-style: italic;
}
.editor-light-theme .hljs-number {
color: #098658; /* Green for numbers */
}
.editor-light-theme .hljs-built_in,
.editor-light-theme .hljs-title {
color: #795E26; /* Brown for built-ins */
}
.editor-light-theme .hljs-params {
color: #001080; /* Dark blue for parameters */
}
.editor-light-theme .hljs-function {
color: #000000; /* Black for function names */
}
.editor-light-theme .hljs-meta {
color: #AF00DB; /* Purple for meta tags */
}
</style> </style>
<title>Try Online</title> <title>Try Online</title>
@ -244,6 +307,7 @@ DEALINGS IN THE SOFTWARE.
<div class="window-header"> <div class="window-header">
<div class="action-buttons"></div> <div class="action-buttons"></div>
<div class="controls"> <div class="controls">
<div id="theme-toggle">Light</div>
<div id="run-button">Run</div> <div id="run-button">Run</div>
</div> </div>
</div> </div>
@ -276,6 +340,9 @@ DEALINGS IN THE SOFTWARE.
let code_editor = document.querySelector('#code-editor'); let code_editor = document.querySelector('#code-editor');
let code_output = document.querySelector('#code-output'); let code_output = document.querySelector('#code-output');
let run_button = document.querySelector('#run-button'); 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'; 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); 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 () { window.onload = function () {
run_button.onclick = function () { run_button.onclick = function () {