CTT
/
libmonoformat
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(theme): switch between light and dark

Browse Source
backup
flop 3 weeks ago
parent 45617022f7
commit d1c042922b
1 changed files with 222 additions and 78 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 300
      ts/index.html

300
ts/index.html
Unescape View File

@ -5,7 +5,121 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>MonoDisplay Editor</title> <title>MonoDisplay Editor</title>
<script>!function(){var t=localStorage.getItem('theme');t&&document.documentElement.setAttribute('data-theme',t)}();</script>
<style> <style>
:root {
--bg: #111;
--bg-bar: #1a1a1a;
--bg-raised: #161616;
--bg-hover: #1b1b1b;
--bg-hover2: #222;
--bg-sunken: #141414;
--bg-accent: #141e14;
--bg-active: #182018;
--bg-deep: #0f0f0f;
--bg-input: #0a0a0a;
--bg-canvas: #000;
--bg-xhover: #1e1010;
--bg-overlay: rgba(0,0,0,.6);
--bd: #2a2a2a;
--bd-inner: #1e1e1e;
--bd-deep: #1c1c1c;
--bd-card: #222;
--bd-btn: #2d2d2d;
--bd-type: #252525;
--bd-active: #2b3d2b;
--bd-hover: #444;
--bd-strong: #333;
--tx: #ccc;
--tx-hover: #bbb;
--tx-sub: #888;
--tx-label: #777;
--tx-meta: #666;
--tx-dim: #555;
--tx-faint: #444;
--tx-ghost: #333;
--tx-file: #3a3a3a;
--tx-empty: #2e2e2e;
--ac: #33ff66;
--dirty: #886622
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--bg: #f5f5f5;
--bg-bar: #e8e8e8;
--bg-raised: #efefef;
--bg-hover: #e5e5e5;
--bg-hover2: #e0e0e0;
--bg-sunken: #ebebeb;
--bg-accent: #e8f5e8;
--bg-active: #dff0df;
--bg-deep: #f0f0f0;
--bg-input: #fff;
--bg-canvas: #fff;
--bg-xhover: #ffe8e8;
--bg-overlay: rgba(0,0,0,.4);
--bd: #d0d0d0;
--bd-inner: #ddd;
--bd-deep: #e0e0e0;
--bd-card: #ddd;
--bd-btn: #ccc;
--bd-type: #d8d8d8;
--bd-active: #7dc87d;
--bd-hover: #bbb;
--bd-strong: #ccc;
--tx: #222;
--tx-hover: #333;
--tx-sub: #555;
--tx-label: #666;
--tx-meta: #777;
--tx-dim: #888;
--tx-faint: #999;
--tx-ghost: #aaa;
--tx-file: #aaa;
--tx-empty: #bbb;
--ac: #1a9940;
--dirty: #b37a00
}
}
[data-theme="light"] {
--bg: #f5f5f5;
--bg-bar: #e8e8e8;
--bg-raised: #efefef;
--bg-hover: #e5e5e5;
--bg-hover2: #e0e0e0;
--bg-sunken: #ebebeb;
--bg-accent: #e8f5e8;
--bg-active: #dff0df;
--bg-deep: #f0f0f0;
--bg-input: #fff;
--bg-canvas: #fff;
--bg-xhover: #ffe8e8;
--bg-overlay: rgba(0,0,0,.4);
--bd: #d0d0d0;
--bd-inner: #ddd;
--bd-deep: #e0e0e0;
--bd-card: #ddd;
--bd-btn: #ccc;
--bd-type: #d8d8d8;
--bd-active: #7dc87d;
--bd-hover: #bbb;
--bd-strong: #ccc;
--tx: #222;
--tx-hover: #333;
--tx-sub: #555;
--tx-label: #666;
--tx-meta: #777;
--tx-dim: #888;
--tx-faint: #999;
--tx-ghost: #aaa;
--tx-file: #aaa;
--tx-empty: #bbb;
--ac: #1a9940;
--dirty: #b37a00
}
*, *,
*::before, *::before,
*::after { *::after {
@ -15,8 +129,8 @@
} }
body { body {
background: #111; background: var(--bg);
color: #ccc; color: var(--tx);
font-family: monospace; font-family: monospace;
height: 100vh; height: 100vh;
display: flex; display: flex;
@ -27,8 +141,8 @@
#topbar { #topbar {
height: 36px; height: 36px;
background: #1a1a1a; background: var(--bg-bar);
border-bottom: 1px solid #2a2a2a; border-bottom: 1px solid var(--bd);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@ -37,7 +151,7 @@
} }
#topbar .app-name { #topbar .app-name {
color: #555; color: var(--tx-dim);
font-size: 11px; font-size: 11px;
letter-spacing: .12em; letter-spacing: .12em;
text-transform: uppercase; text-transform: uppercase;
@ -45,9 +159,9 @@
} }
.tb-btn { .tb-btn {
background: #161616; background: var(--bg-raised);
color: #888; color: var(--tx-sub);
border: 1px solid #2d2d2d; border: 1px solid var(--bd-btn);
border-radius: 3px; border-radius: 3px;
padding: 3px 10px; padding: 3px 10px;
font-family: monospace; font-family: monospace;
@ -60,9 +174,9 @@
} }
.tb-btn:hover { .tb-btn:hover {
background: #222; background: var(--bg-hover2);
color: #bbb; color: var(--tx-hover);
border-color: #444 border-color: var(--bd-hover)
} }
.tb-btn svg { .tb-btn svg {
@ -81,7 +195,7 @@
} }
#filename { #filename {
color: #3a3a3a; color: var(--tx-file);
font-size: 11px; font-size: 11px;
margin-left: 2px; margin-left: 2px;
max-width: 200px; max-width: 200px;
@ -93,11 +207,11 @@
.tb-sep { .tb-sep {
width: 1px; width: 1px;
height: 18px; height: 18px;
background: #2a2a2a background: var(--bd)
} }
.dirty { .dirty {
color: #886622 !important color: var(--dirty) !important
} }
#main { #main {
@ -108,7 +222,7 @@
#left { #left {
width: 48%; width: 48%;
border-right: 1px solid #1e1e1e; border-right: 1px solid var(--bd-inner);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 14px; padding: 14px;
@ -120,8 +234,8 @@
#display-box { #display-box {
width: 100%; width: 100%;
aspect-ratio: 2/1; aspect-ratio: 2/1;
background: #000; background: var(--bg-canvas);
border: 1px solid #2a2a2a; border: 1px solid var(--bd);
border-radius: 3px; border-radius: 3px;
overflow: hidden overflow: hidden
} }
@ -136,7 +250,7 @@
.pv-label { .pv-label {
font-size: 10px; font-size: 10px;
color: #333; color: var(--tx-ghost);
letter-spacing: .1em; letter-spacing: .1em;
text-transform: uppercase text-transform: uppercase
} }
@ -149,8 +263,8 @@
} }
#sec-meta { #sec-meta {
background: #141414; background: var(--bg-sunken);
border: 1px solid #1e1e1e; border: 1px solid var(--bd-inner);
border-radius: 3px; border-radius: 3px;
padding: 8px 10px; padding: 8px 10px;
display: flex; display: flex;
@ -166,16 +280,16 @@
} }
.meta-row label { .meta-row label {
color: #444; color: var(--tx-faint);
min-width: 90px min-width: 90px
} }
.meta-val { .meta-val {
color: #666 color: var(--tx-meta)
} }
.green { .green {
color: #33ff66 color: var(--ac)
} }
.flag-check { .flag-check {
@ -183,12 +297,12 @@
align-items: center; align-items: center;
gap: 5px; gap: 5px;
font-size: 11px; font-size: 11px;
color: #555; color: var(--tx-dim);
cursor: pointer cursor: pointer
} }
.flag-check input { .flag-check input {
accent-color: #33ff66; accent-color: var(--ac);
cursor: pointer cursor: pointer
} }
@ -202,8 +316,8 @@
#right-hdr { #right-hdr {
height: 36px; height: 36px;
background: #141414; background: var(--bg-sunken);
border-bottom: 1px solid #1e1e1e; border-bottom: 1px solid var(--bd-inner);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 10px; padding: 0 10px;
@ -213,7 +327,7 @@
#right-hdr .rh-title { #right-hdr .rh-title {
flex: 1; flex: 1;
color: #444; color: var(--tx-faint);
font-size: 11px; font-size: 11px;
letter-spacing: .08em; letter-spacing: .08em;
text-transform: uppercase text-transform: uppercase
@ -226,7 +340,7 @@
} }
.empty-state { .empty-state {
color: #2e2e2e; color: var(--tx-empty);
font-size: 11px; font-size: 11px;
padding: 28px 16px; padding: 28px 16px;
text-align: center; text-align: center;
@ -235,14 +349,14 @@
/* section card */ /* section card */
.sec-card { .sec-card {
border: 1px solid #222; border: 1px solid var(--bd-card);
border-radius: 3px; border-radius: 3px;
margin-bottom: 5px; margin-bottom: 5px;
overflow: hidden overflow: hidden
} }
.sec-card.active { .sec-card.active {
border-color: #2b3d2b border-color: var(--bd-active)
} }
.sec-hdr { .sec-hdr {
@ -252,20 +366,20 @@
padding: 6px 8px; padding: 6px 8px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
background: #161616; background: var(--bg-raised);
position: relative position: relative
} }
.sec-hdr:hover { .sec-hdr:hover {
background: #1b1b1b background: var(--bg-hover)
} }
.sec-card.active .sec-hdr { .sec-card.active .sec-hdr {
background: #182018 background: var(--bg-active)
} }
.sec-arrow { .sec-arrow {
color: #333; color: var(--tx-ghost);
font-size: 13px; font-size: 13px;
line-height: 1; line-height: 1;
transition: transform .12s; transition: transform .12s;
@ -278,15 +392,15 @@
.sec-label { .sec-label {
flex: 1; flex: 1;
color: #777; color: var(--tx-label);
font-size: 11px font-size: 11px
} }
.sec-badge { .sec-badge {
font-size: 10px; font-size: 10px;
color: #33ff66; color: var(--ac);
border: 1px solid #2b3d2b; border: 1px solid var(--bd-active);
background: #141e14; background: var(--bg-accent);
border-radius: 2px; border-radius: 2px;
padding: 1px 6px; padding: 1px 6px;
flex-shrink: 0 flex-shrink: 0
@ -296,7 +410,7 @@
.x-btn { .x-btn {
background: none; background: none;
border: none; border: none;
color: #2a2a2a; color: var(--bd);
cursor: pointer; cursor: pointer;
font-size: 15px; font-size: 15px;
line-height: 1; line-height: 1;
@ -308,26 +422,26 @@
.x-btn:hover { .x-btn:hover {
color: #ff4444; color: #ff4444;
background: #1e1010 background: var(--bg-xhover)
} }
/* element */ /* element */
.el-list { .el-list {
background: #0f0f0f; background: var(--bg-deep);
border-top: 1px solid #1c1c1c; border-top: 1px solid var(--bd-deep);
padding: 6px padding: 6px
} }
.el-item { .el-item {
border: 1px solid #1e1e1e; border: 1px solid var(--bd-inner);
border-radius: 3px; border-radius: 3px;
background: #141414; background: var(--bg-sunken);
margin-bottom: 4px; margin-bottom: 4px;
overflow: hidden overflow: hidden
} }
.el-item.active { .el-item.active {
border-color: #33ff66 border-color: var(--ac)
} }
.el-item-hdr { .el-item-hdr {
@ -339,26 +453,26 @@
} }
.el-item-hdr:hover { .el-item-hdr:hover {
background: #1a1a1a background: var(--bg-hover)
} }
.el-type { .el-type {
font-size: 10px; font-size: 10px;
color: #666; color: var(--tx-meta);
border: 1px solid #252525; border: 1px solid var(--bd-type);
border-radius: 2px; border-radius: 2px;
padding: 1px 6px; padding: 1px 6px;
flex-shrink: 0 flex-shrink: 0
} }
.el-item.active .el-type { .el-item.active .el-type {
color: #33ff66; color: var(--ac);
border-color: #2b3d2b border-color: var(--bd-active)
} }
.el-name { .el-name {
flex: 1; flex: 1;
color: #555; color: var(--tx-dim);
font-size: 11px; font-size: 11px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -368,7 +482,7 @@
.el-fields { .el-fields {
padding: 6px 8px 8px; padding: 6px 8px 8px;
border-top: 1px solid #1a1a1a; border-top: 1px solid var(--bg-bar);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px gap: 5px
@ -392,16 +506,16 @@
.field>label { .field>label {
font-size: 10px; font-size: 10px;
color: #444 color: var(--tx-faint)
} }
.field input[type=text], .field input[type=text],
.field input[type=number], .field input[type=number],
.field select, .field select,
.field textarea { .field textarea {
background: #0a0a0a; background: var(--bg-input);
color: #999; color: var(--tx-sub);
border: 1px solid #222; border: 1px solid var(--bd-card);
border-radius: 2px; border-radius: 2px;
padding: 3px 6px; padding: 3px 6px;
font-family: monospace; font-family: monospace;
@ -413,8 +527,8 @@
.field input:focus, .field input:focus,
.field select:focus, .field select:focus,
.field textarea:focus { .field textarea:focus {
border-color: #33ff66; border-color: var(--ac);
color: #ccc color: var(--tx)
} }
.field textarea { .field textarea {
@ -424,8 +538,8 @@
} }
.field select option { .field select option {
background: #1a1a1a; background: var(--bg-bar);
color: #aaa color: var(--tx-ghost)
} }
.flags-row { .flags-row {
@ -437,8 +551,8 @@
.add-el { .add-el {
background: transparent; background: transparent;
color: #333; color: var(--tx-ghost);
border: 1px dashed #222; border: 1px dashed var(--bd-card);
border-radius: 3px; border-radius: 3px;
padding: 5px 8px; padding: 5px 8px;
font-family: monospace; font-family: monospace;
@ -450,8 +564,8 @@
} }
.add-el:hover { .add-el:hover {
color: #888; color: var(--tx-sub);
border-color: #444 border-color: var(--bd-hover)
} }
/* confirm dialog */ /* confirm dialog */
@ -459,7 +573,7 @@
display: none; display: none;
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0, 0, 0, .6); background: var(--bg-overlay);
z-index: 100; z-index: 100;
align-items: center; align-items: center;
justify-content: center justify-content: center
@ -470,8 +584,8 @@
} }
#confirm-box { #confirm-box {
background: #1a1a1a; background: var(--bg-bar);
border: 1px solid #333; border: 1px solid var(--bd-strong);
border-radius: 4px; border-radius: 4px;
padding: 20px 24px; padding: 20px 24px;
max-width: 340px; max-width: 340px;
@ -482,7 +596,7 @@
} }
#confirm-msg { #confirm-msg {
color: #aaa; color: var(--tx-ghost);
font-size: 12px; font-size: 12px;
line-height: 1.6 line-height: 1.6
} }
@ -494,9 +608,9 @@
} }
.cb { .cb {
background: #161616; background: var(--bg-raised);
color: #888; color: var(--tx-sub);
border: 1px solid #2d2d2d; border: 1px solid var(--bd-btn);
border-radius: 3px; border-radius: 3px;
padding: 4px 14px; padding: 4px 14px;
font-family: monospace; font-family: monospace;
@ -505,17 +619,17 @@
} }
.cb:hover { .cb:hover {
background: #222; background: var(--bg-hover2);
color: #bbb color: var(--tx-hover)
} }
.cb.primary { .cb.primary {
border-color: #2b3d2b; border-color: var(--bd-active);
color: #33ff66 color: var(--ac)
} }
.cb.primary:hover { .cb.primary:hover {
background: #182018 background: var(--bg-active)
} }
</style> </style>
</head> </head>
@ -551,6 +665,9 @@
Add section Add section
</button> </button>
<span id="filename">untitled</span> <span id="filename">untitled</span>
<div style="flex:1"></div>
<div class="tb-sep"></div>
<button class="tb-btn" id="theme-toggle" onclick="cycleTheme()">⊙ auto</button>
</div> </div>
<div id="main"> <div id="main">
@ -1032,6 +1149,33 @@
a.click(); markClean(); a.click(); markClean();
} }
// ─── Theme ────────────────────────────────────────────────────────────────────
var _THEMES = ['dark', 'light', 'auto'];
function _getTheme() { return document.documentElement.getAttribute('data-theme') || 'auto'; }
function _applyTheme(t) {
if (t === 'auto') { document.documentElement.removeAttribute('data-theme'); localStorage.removeItem('theme'); }
else { document.documentElement.setAttribute('data-theme', t); localStorage.setItem('theme', t); }
_updateThemeBtn();
}
function cycleTheme() {
var cur = _getTheme(), idx = _THEMES.indexOf(cur);
_applyTheme(_THEMES[(idx + 1) % _THEMES.length]);
}
function _detectDR() {
return !!(document.querySelector('meta[name="darkreader"]') ||
document.querySelector('style[data-darkreader-style]') ||
document.documentElement.getAttribute('data-darkreader-mode'));
}
function _updateThemeBtn() {
var btn = document.getElementById('theme-toggle');
if (!btn) return;
var t = _getTheme(), dr = _detectDR();
var lbl = { dark: '☾ dark', light: '☀ light', auto: '⊙ auto' };
btn.textContent = (dr ? 'DR · ' : '') + (lbl[t] || lbl.auto);
btn.title = dr ? 'DarkReader active — controlling theme' : ('Theme: ' + t + ' (click to cycle)');
}
window.addEventListener('DOMContentLoaded', _updateThemeBtn);
// ─── Init ───────────────────────────────────────────────────────────────────── // ─── Init ─────────────────────────────────────────────────────────────────────
render(); render();
if (window.MonoDisplay) { initDemos(); } if (window.MonoDisplay) { initDemos(); }
@ -1039,4 +1183,4 @@
</script> </script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save