added themes and the theme command

This commit is contained in:
Stefan Friese 2025-02-05 17:06:04 +00:00
parent 1144be1c1c
commit 16f1bec6f2
3 changed files with 87 additions and 7 deletions

View File

@ -1,6 +1,15 @@
:root {
--bg-color: #222;
--text-color: #eee;
--command-color: #75df0b;
--error-color: #ff5555;
--directory-color: #1bc9e7;
}
/* Default is pwny theme */
body { body {
background-color: #222; background-color: var(--bg-color);
color: #eee; color: var(--text-color);
font-family: monospace; font-family: monospace;
font-size: 14pt; font-size: 14pt;
margin: 0; margin: 0;
@ -21,8 +30,8 @@ body {
} }
input { input {
font-size: 14pt; font-size: 14pt;
background: #222; background: var(--bg-color);
color: #eee; color: var(--text-color);
border: none; border: none;
width: 80%; width: 80%;
font-family: monospace; font-family: monospace;
@ -31,11 +40,35 @@ input:focus {
outline: none; outline: none;
} }
span.command { span.command {
color: #75df0b; color: var(--command-color);
} }
span.error { span.error {
color: #ff5555; color: var(--error-color);
} }
span.directory { span.directory {
color: #1bc9e7; color: var(--directory-color);
}
.light-theme {
--bg-color: #fff;
--text-color: #222;
--command-color: #007700;
--error-color: #cc0000;
--directory-color: #0044cc;
}
.catppuccin-theme {
--bg-color: #363a4f;
--text-color: #cad3f5;
--command-color: #a6da95;
--error-color: #ed8796;
--directory-color: #7dc4e4;
}
.doom1-theme {
--bg-color: #0a0a0a;
--text-color: #f8f8f2;
--command-color: #50fa7b;
--error-color: #ff5555;
--directory-color: #8be9fd;
} }

46
static/switch-themes.js Normal file
View File

@ -0,0 +1,46 @@
document.addEventListener("DOMContentLoaded", function () {
const input = document.getElementById("command-input");
const terminal = document.getElementById("terminal");
const availableThemes = ["pwny", "light", "catppuccin", "doom1"];
// Load the saved theme from localStorage, defaulting to "pwny"
let currentTheme = localStorage.getItem("theme") || "pwny";
applyTheme(currentTheme);
input.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
const command = input.value.trim();
if (command.startsWith("theme")) {
event.preventDefault();
const parts = command.split(" ");
if (parts.length === 1) {
addLogEntry(`Available themes: ${availableThemes.join(', ')}. Current theme: ${currentTheme}`, 'info');
} else {
const theme = parts[1];
applyTheme(theme);
addLogEntry(`Theme changed to: ${theme}`, 'info');
}
input.value = ''; // Clear input
}
}
});
function applyTheme(themeName) {
if (availableThemes.includes(themeName)) {
document.body.className = ""; // Clear all theme classes
document.body.classList.add(`${themeName}-theme`); // Add the new theme class
localStorage.setItem("theme", themeName);
currentTheme = themeName;
} else {
addLogEntry(`Error: Theme "${themeName}" not found. Available themes: ${availableThemes.join(', ')}`, 'error');
}
}
function addLogEntry(message, type) {
const logEntry = document.createElement("div");
logEntry.classList.add(type === 'error' ? 'error' : 'info');
logEntry.textContent = message;
terminal.appendChild(logEntry);
terminal.scrollTop = terminal.scrollHeight;
}
});

View File

@ -6,6 +6,7 @@
<title>Go Web Shell</title> <title>Go Web Shell</title>
<script type="text/javascript" src="static/keyboard-shortcuts.js"></script> <script type="text/javascript" src="static/keyboard-shortcuts.js"></script>
<script type="text/javascript" src="static/download-command.js"></script> <script type="text/javascript" src="static/download-command.js"></script>
<script type="text/javascript" src="static/switch-themes.js"></script>
<link rel="stylesheet" type="text/css" href="static/stylesheet.css"> <link rel="stylesheet" type="text/css" href="static/stylesheet.css">
</head> </head>
<body> <body>