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

feat: implement theming system with persistence and add new themes

Browse Source
This commit is contained in:
letieu
2025-12-10 06:08:01 +07:00
parent db618b99fc
commit 2e91f3a1c1
16 changed files with 457 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
installation.html
View File

@@ -7,6 +7,7 @@
<!-- terminal.css Components (Bulma-style) -->
<link rel="stylesheet" href="./index.css" />
<link rel="stylesheet" href="themes/default.css" id="theme-switcher" />
<!-- Tailwind for layout (optional) -->
<script src="https://cdn.tailwindcss.com"></script>
@@ -27,7 +28,22 @@
<div class="has-text-muted text-sm font-bold">
dev@localhost:~/tcss/installation
</div>
<div class="has-text-muted text-xs" style="opacity: 0.5">v0.0.3</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;">
<option value="default">Default</option>
<option value="dracula">Dracula</option>
<option value="light">Light</option>
<option value="gruvbox-dark">Gruvbox Dark</option>
<option value="gruvbox-light">Gruvbox Light</option>
<option value="ayu-dark">Ayu Dark</option>
<option value="ayu-light">Ayu Light</option>
<option value="rose-pine">Rosé Pine</option>
<option value="rose-pine-light">Rosé Pine Light</option>
<option value="catppuccin-mocha">Catppuccin Mocha</option>
<option value="catppuccin-latte">Catppuccin Latte</option>
</select>
</div>
</div>
<!-- BODY -->
@@ -391,6 +407,97 @@
</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">