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

117
installation.html
View File

@@ -29,8 +29,15 @@
dev@localhost:~/tcss/installation
</div>
<div class="flex items-center gap-2">
<label for="theme-selector" class="has-text-muted text-xs">Theme:</label>
<select id="theme-selector" class="select" style="width: auto;">
<label for="theme-selector" class="has-text-muted text-xs"
>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="dracula">Dracula</option>
<option value="light">Light</option>
@@ -88,14 +95,21 @@
/&gt;</span
>
</div>
<div class="terminal-log-line">
<span class="terminal-log-message">&nbsp;</span>
<div class="terminal-log-line mt-4">
<span class="terminal-log-message has-text-muted"
>&lt;!-- [Optional: Theme] --&gt;</span
>
</div>
<div class="terminal-log-line">
<span class="terminal-log-message has-text-muted"
>&lt;!-- Before closing &lt;/body&gt; tag --&gt;</span
<span class="terminal-log-message"
>&lt;link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.3/themes/gruvbox-dark.css"
/&gt;</span
>
</div>
<div class="terminal-log-line">
<span class="terminal-log-message">&nbsp;</span>
</div>
<div class="terminal-log-line">
<span class="terminal-log-message has-text-muted"
>&lt;!-- [Optional: Only for toast, FAQ component]
@@ -407,97 +421,6 @@
</div>
</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 -->
<div class="pt-12 mt-12 border-t border-gray-800">
<div class="flex justify-between items-center">