diff --git a/index.js b/index.js
index 8938b97..ed75e0e 100644
--- a/index.js
+++ b/index.js
@@ -69,10 +69,40 @@ function showToast(type, title, message, duration = 5000) {
*/
function dismissToast(closeButton) {
const toast = closeButton.closest('.toast');
- toast.classList.add('is-dismissing');
-
- // Remove from DOM after animation
- setTimeout(() => {
- toast.remove();
- }, 300);
+ if (toast) {
+ toast.classList.add('is-dismissing');
+
+ // Remove from DOM after animation
+ setTimeout(() => {
+ toast.remove();
+ }, 300);
+ }
}
+
+function initializeThemeSwitcher() {
+ const themeSelector = document.getElementById("theme-selector");
+ const themeSwitcher = document.getElementById("theme-switcher");
+
+ if (!themeSwitcher) {
+ return;
+ }
+
+ function applyTheme(theme) {
+ themeSwitcher.setAttribute("href", `themes/${theme}.css`);
+ localStorage.setItem("theme", theme);
+ if (themeSelector) {
+ themeSelector.value = theme;
+ }
+ }
+
+ if (themeSelector) {
+ themeSelector.addEventListener("change", () => {
+ applyTheme(themeSelector.value);
+ });
+ }
+
+ const savedTheme = localStorage.getItem("theme") || "default";
+ applyTheme(savedTheme);
+}
+
+document.addEventListener("DOMContentLoaded", initializeThemeSwitcher);
\ No newline at end of file
diff --git a/installation.html b/installation.html
index a4ed0ff..b2d6f41 100644
--- a/installation.html
+++ b/installation.html
@@ -7,6 +7,7 @@
+
@@ -27,7 +28,22 @@
dev@localhost:~/tcss/installation
-
v0.0.3
+
+
+
+
@@ -391,6 +407,97 @@
+
+
+
+ 04.
+
Theming
+
+
+
+
+ terminal.css includes a theming system that allows you to easily switch between different color schemes. The selected theme is persisted across pages using the browser's localStorage.
+
+
+
How to use themes:
+
+
+ Include the main index.css stylesheet and then a theme stylesheet in your <head> section. The theme stylesheet must have the ID theme-switcher.
+
+ To enable theme switching and persistence, include the index.js script at the end of your <body> tag. This script contains the necessary logic to manage themes.
+
+
+
+
+ <!-- Before closing </body> tag -->
+
+
+ <script src="./index.js"></script>
+
+
+
+
+ You can then add a theme selector dropdown to your HTML, like this:
+
+
+
+
+ <select id="theme-selector" class="select">
+
+
+ <option value="default">Default</option>
+
+
+ <option value="dracula">Dracula</option>
+
+
+ <option value="light">Light</option>
+
+
+ </select>
+
+
+
+ The value attribute of each option should match the filename of the theme (e.g., default for themes/default.css).
+