From a20db654175a87df60256d96a0226f9848eae637 Mon Sep 17 00:00:00 2001 From: letieu Date: Wed, 10 Dec 2025 06:26:53 +0700 Subject: [PATCH] theme --- index.html | 7 ++- index.js | 74 +++++++++-------------------- installation.html | 117 ++++++++-------------------------------------- showcase.html | 11 ++++- 4 files changed, 58 insertions(+), 151 deletions(-) diff --git a/index.html b/index.html index d3085c9..c82fb80 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,12 @@
dev@localhost:~/
- diff --git a/index.js b/index.js index ed75e0e..9f3ad01 100644 --- a/index.js +++ b/index.js @@ -10,16 +10,16 @@ */ function toggleFaq(element) { const faqItem = element.parentElement; - const wasActive = faqItem.classList.contains('is-active'); - + const wasActive = faqItem.classList.contains("is-active"); + // Close all FAQ items - document.querySelectorAll('.faq-item').forEach(item => { - item.classList.remove('is-active'); + document.querySelectorAll(".faq-item").forEach((item) => { + item.classList.remove("is-active"); }); - + // Open clicked item if it wasn't active if (!wasActive) { - faqItem.classList.add('is-active'); + faqItem.classList.add("is-active"); } } @@ -31,35 +31,35 @@ function toggleFaq(element) { * @param {number} duration - Duration in milliseconds (default: 5000) */ function showToast(type, title, message, duration = 5000) { - const container = document.getElementById('toastContainer'); - + const container = document.getElementById("toastContainer"); + // Create toast element - const toast = document.createElement('div'); + const toast = document.createElement("div"); toast.className = `toast is-${type}`; - + // Icon mapping const icons = { - primary: '▸', - success: '✓', - danger: '✕', - warning: '⚠', - info: 'ℹ' + primary: "▸", + success: "✓", + danger: "✕", + warning: "⚠", + info: "ℹ", }; - + toast.innerHTML = ` -
${icons[type] || '▸'}
+
${icons[type] || "▸"}
${title}
${message}
`; - + container.appendChild(toast); - + // Auto dismiss after duration setTimeout(() => { - dismissToast(toast.querySelector('.toast-close')); + dismissToast(toast.querySelector(".toast-close")); }, duration); } @@ -68,41 +68,13 @@ function showToast(type, title, message, duration = 5000) { * @param {HTMLElement} closeButton - The close button element that was clicked */ function dismissToast(closeButton) { - const toast = closeButton.closest('.toast'); + const toast = closeButton.closest(".toast"); if (toast) { - toast.classList.add('is-dismissing'); - + 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 b2d6f41..00264b6 100644 --- a/installation.html +++ b/installation.html @@ -29,8 +29,15 @@ dev@localhost:~/tcss/installation
- - @@ -88,14 +95,21 @@ />
-
-   +
+ <!-- [Optional: Theme] -->
- <!-- Before closing </body> tag --><link rel="stylesheet" + href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.3/themes/gruvbox-dark.css" + />
+
+   +
<!-- [Optional: Only for toast, FAQ component] @@ -407,97 +421,6 @@
- -
-
- 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:

-
    -
  1. - Include the main index.css stylesheet and then a theme stylesheet in your <head> section. The theme stylesheet must have the ID theme-switcher. -
    2. -
- -
-
- <!-- In your <head> section --> -
-
- <link rel="stylesheet" href="./index.css" /> -
-
- <link rel="stylesheet" href="themes/default.css" 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). -

-
-
-
diff --git a/showcase.html b/showcase.html index 2bc6c5e..1101d9a 100644 --- a/showcase.html +++ b/showcase.html @@ -63,8 +63,15 @@
Get Started
- -