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

Write Preview
Loading…
Cancel
Save