Ark/terminal.css
1
0
Fork 0
mirror of https://github.com/letieu/terminal.css.git synced 2026-03-15 02:04:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

theme

Browse Source
This commit is contained in:
letieu
2025-12-10 06:26:53 +07:00
parent 2e91f3a1c1
commit a20db65417
4 changed files with 58 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@@ -28,7 +28,12 @@
<div class="has-text-muted text-sm font-bold">dev@localhost:~/</div> <div class="has-text-muted text-sm font-bold">dev@localhost:~/</div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<label for="theme-selector" class="has-text-muted text-xs">Theme:</label> <label for="theme-selector" class="has-text-muted text-xs">Theme:</label>
<select id="theme-selector" class="select" style="width: auto;"> <select
id="theme-selector"
class="select"
style="width: auto;"
onchange="document.getElementById('theme-switcher').setAttribute('href', 'themes/' + this.value + '.css');"
>
<option value="default">Default</option> <option value="default">Default</option>
<option value="dracula">Dracula</option> <option value="dracula">Dracula</option>
<option value="light">Light</option> <option value="light">Light</option>

58
index.js
View File

@@ -10,16 +10,16 @@
*/ */
function toggleFaq(element) { function toggleFaq(element) {
const faqItem = element.parentElement; const faqItem = element.parentElement;
const wasActive = faqItem.classList.contains('is-active'); const wasActive = faqItem.classList.contains("is-active");
// Close all FAQ items // Close all FAQ items
document.querySelectorAll('.faq-item').forEach(item => { document.querySelectorAll(".faq-item").forEach((item) => {
item.classList.remove('is-active'); item.classList.remove("is-active");
}); });
// Open clicked item if it wasn't active // Open clicked item if it wasn't active
if (!wasActive) { if (!wasActive) {
faqItem.classList.add('is-active'); faqItem.classList.add("is-active");
} }
} }
@@ -31,23 +31,23 @@ function toggleFaq(element) {
* @param {number} duration - Duration in milliseconds (default: 5000) * @param {number} duration - Duration in milliseconds (default: 5000)
*/ */
function showToast(type, title, message, duration = 5000) { function showToast(type, title, message, duration = 5000) {
const container = document.getElementById('toastContainer'); const container = document.getElementById("toastContainer");
// Create toast element // Create toast element
const toast = document.createElement('div'); const toast = document.createElement("div");
toast.className = `toast is-${type}`; toast.className = `toast is-${type}`;
// Icon mapping // Icon mapping
const icons = { const icons = {
primary: '▸', primary: "▸",
success: '✓', success: "✓",
danger: '✕', danger: "✕",
warning: '⚠', warning: "⚠",
info: 'ℹ' info: "ℹ",
}; };
toast.innerHTML = ` toast.innerHTML = `
<div class="toast-icon">${icons[type] || '▸'}</div> <div class="toast-icon">${icons[type] || "▸"}</div>
<div class="toast-content"> <div class="toast-content">
<div class="toast-title">${title}</div> <div class="toast-title">${title}</div>
<div class="toast-message">${message}</div> <div class="toast-message">${message}</div>
@@ -59,7 +59,7 @@ function showToast(type, title, message, duration = 5000) {
// Auto dismiss after duration // Auto dismiss after duration
setTimeout(() => { setTimeout(() => {
dismissToast(toast.querySelector('.toast-close')); dismissToast(toast.querySelector(".toast-close"));
}, duration); }, duration);
} }
@@ -68,9 +68,9 @@ function showToast(type, title, message, duration = 5000) {
* @param {HTMLElement} closeButton - The close button element that was clicked * @param {HTMLElement} closeButton - The close button element that was clicked
*/ */
function dismissToast(closeButton) { function dismissToast(closeButton) {
const toast = closeButton.closest('.toast'); const toast = closeButton.closest(".toast");
if (toast) { if (toast) {
toast.classList.add('is-dismissing'); toast.classList.add("is-dismissing");
// Remove from DOM after animation // Remove from DOM after animation
setTimeout(() => { setTimeout(() => {
@@ -78,31 +78,3 @@ function dismissToast(closeButton) {
}, 300); }, 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);

117
installation.html
View File

@@ -29,8 +29,15 @@
dev@localhost:~/tcss/installation dev@localhost:~/tcss/installation
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<label for="theme-selector" class="has-text-muted text-xs">Theme:</label> <label for="theme-selector" class="has-text-muted text-xs"
<select id="theme-selector" class="select" style="width: auto;"> >Theme:</label
>
<select
id="theme-selector"
class="select"
style="width: auto"
onchange="document.getElementById('theme-switcher').setAttribute('href', 'themes/' + this.value + '.css');"
>
<option value="default">Default</option> <option value="default">Default</option>
<option value="dracula">Dracula</option> <option value="dracula">Dracula</option>
<option value="light">Light</option> <option value="light">Light</option>
@@ -88,14 +95,21 @@
/&gt;</span /&gt;</span
> >
</div> </div>
<div class="terminal-log-line"> <div class="terminal-log-line mt-4">
<span class="terminal-log-message">&nbsp;</span> <span class="terminal-log-message has-text-muted"
>&lt;!-- [Optional: Theme] --&gt;</span
>
</div> </div>
<div class="terminal-log-line"> <div class="terminal-log-line">
<span class="terminal-log-message has-text-muted" <span class="terminal-log-message"
>&lt;!-- Before closing &lt;/body&gt; tag --&gt;</span >&lt;link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.3/themes/gruvbox-dark.css"
/&gt;</span
> >
</div> </div>
<div class="terminal-log-line">
<span class="terminal-log-message">&nbsp;</span>
</div>
<div class="terminal-log-line"> <div class="terminal-log-line">
<span class="terminal-log-message has-text-muted" <span class="terminal-log-message has-text-muted"
>&lt;!-- [Optional: Only for toast, FAQ component] >&lt;!-- [Optional: Only for toast, FAQ component]
@@ -407,97 +421,6 @@
</div> </div>
</section> </section>
<!-- SECTION 4: THEMEING -->
<section class="section">
<div class="flex items-center gap-2 mb-6">
<span class="has-text-primary text-xl font-bold">04.</span>
<h2 class="text-xl font-bold">Theming</h2>
</div>
<div class="space-y-4">
<p class="has-text-muted">
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 <code>localStorage</code>.
</p>
<h4 class="has-text-muted text-sm mb-3">How to use themes:</h4>
<ol class="content">
<li class="mb-2">
Include the main <code>index.css</code> stylesheet and then a theme stylesheet in your <code>&lt;head&gt;</code> section. The theme stylesheet must have the ID <code>theme-switcher</code>.
</li>
</ol>
<div class="terminal-log">
<div class="terminal-log-line">
<span class="terminal-log-message has-text-muted"
>&lt;!-- In your &lt;head&gt; section --&gt;</span
>
</div>
<div class="terminal-log-line">
<span class="terminal-log-message"
>&lt;link rel="stylesheet" href="./index.css" /&gt;</span
>
</div>
<div class="terminal-log-line">
<span class="terminal-log-message"
>&lt;link rel="stylesheet" href="themes/default.css" id="theme-switcher" /&gt;</span
>
</div>
</div>
<p class="has-text-muted text-sm mt-4">
To enable theme switching and persistence, include the <code>index.js</code> script at the end of your <code>&lt;body&gt;</code> tag. This script contains the necessary logic to manage themes.
</p>
<div class="terminal-log">
<div class="terminal-log-line">
<span class="terminal-log-message has-text-muted"
>&lt;!-- Before closing &lt;/body&gt; tag --&gt;</span
>
</div>
<div class="terminal-log-line">
<span class="terminal-log-message"
>&lt;script src="./index.js"&gt;&lt;/script&gt;</span
>
</div>
</div>
<p class="has-text-muted text-sm mt-4">
You can then add a theme selector dropdown to your HTML, like this:
</p>
<div class="terminal-log">
<div class="terminal-log-line">
<span class="terminal-log-message"
>&lt;select id="theme-selector" class="select"&gt;</span
>
</div>
<div class="terminal-log-line">
<span class="terminal-log-message"
>&nbsp;&nbsp;&lt;option value="default"&gt;Default&lt;/option&gt;</span
>
</div>
<div class="terminal-log-line">
<span class="terminal-log-message"
>&nbsp;&nbsp;&lt;option value="dracula"&gt;Dracula&lt;/option&gt;</span
>
</div>
<div class="terminal-log-line">
<span class="terminal-log-message"
>&nbsp;&nbsp;&lt;option value="light"&gt;Light&lt;/option&gt;</span
>
</div>
<div class="terminal-log-line">
<span class="terminal-log-message"
>&lt;/select&gt;</span
>
</div>
</div>
<p class="has-text-muted text-sm mt-4">
The <code>value</code> attribute of each option should match the filename of the theme (e.g., <code>default</code> for <code>themes/default.css</code>).
</p>
</div>
</section>
<!-- FOOTER --> <!-- FOOTER -->
<div class="pt-12 mt-12 border-t border-gray-800"> <div class="pt-12 mt-12 border-t border-gray-800">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">

11
showcase.html
View File

@@ -63,8 +63,15 @@
<div class="flex gap-3 justify-center items-center"> <div class="flex gap-3 justify-center items-center">
<a href="./index.html" class="button is-primary">Get Started</a> <a href="./index.html" class="button is-primary">Get Started</a>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<label for="theme-selector" class="has-text-muted text-xs">Theme:</label> <label for="theme-selector" class="has-text-muted text-xs"
<select id="theme-selector" class="select" style="width: auto;"> >Theme:</label
>
<select
id="theme-selector"
class="select"
style="width: auto"
onchange="document.getElementById('theme-switcher').setAttribute('href', 'themes/' + this.value + '.css');"
>
<option value="default">Default</option> <option value="default">Default</option>
<option value="dracula">Dracula</option> <option value="dracula">Dracula</option>
<option value="light">Light</option> <option value="light">Light</option>