mattuy/text-mosaic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 自动适配系统暗黑模式 #6

Merged
mattuy merged 1 commits from feat/dark-mode into main 2026-07-25 15:47:19 +00:00
Conversation 0 Commits 1 Files Changed 2
+81 -28
2 changed files with 81 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+10 -1
View File
@@ -7,7 +7,16 @@
name="description"
content="将中文文本侵蚀成保留少量关键词的纯文本乱码艺术。"
/>
<meta name="theme-color" content="#e9e7dd" />
<meta
name="theme-color"
content="#e9e7dd"
media="(prefers-color-scheme: light)"
/>
<meta
name="theme-color"
content="#121310"
media="(prefers-color-scheme: dark)"
/>
<title>文字马赛克</title>
</head>
<body>
src/style.css
+71 -27
View File
@@ -1,6 +1,7 @@
:root {
color: #171815;
background: #e9e7dd;
color-scheme: light dark;
font-family:
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
@@ -11,6 +12,49 @@
--acid: #d8ff52;
--muted: #6b6b63;
--line: rgba(23, 24, 21, 0.24);
--grid-row: rgba(23, 24, 21, 0.035);
--grid-column: rgba(23, 24, 21, 0.025);
--panel: rgba(244, 242, 234, 0.76);
--panel-soft: rgba(244, 242, 234, 0.7);
--shadow: var(--ink);
--focus-inset: rgba(23, 24, 21, 0.28);
--placeholder: #9b9a91;
--output: #171815;
--output-ink: #efeee6;
--output-muted: #9c9d93;
--output-empty: #77786f;
--output-line: rgba(255, 255, 255, 0.2);
--output-glow: rgba(216, 255, 82, 0.08);
--output-hover: #efeee6;
--output-hover-ink: #171815;
--acid-hover: #efffb4;
--on-acid: #171815;
--selected: var(--ink);
--selected-ink: var(--acid);
}
@media (prefers-color-scheme: dark) {
:root {
color: #efeee6;
background: #121310;
--ink: #efeee6;
--paper: #121310;
--acid: #cffa4c;
--muted: #a2a39a;
--line: rgba(239, 238, 230, 0.23);
--grid-row: rgba(239, 238, 230, 0.04);
--grid-column: rgba(239, 238, 230, 0.03);
--panel: rgba(29, 30, 26, 0.82);
--panel-soft: rgba(29, 30, 26, 0.76);
--shadow: #050604;
--focus-inset: rgba(239, 238, 230, 0.3);
--placeholder: #8e8f86;
--output: #090a08;
--output-glow: rgba(207, 250, 76, 0.11);
--acid-hover: #e7ffa0;
--selected: var(--acid);
--selected-ink: var(--on-acid);
}
}
* {
@@ -28,8 +72,8 @@ body {
min-height: 100vh;
margin: 0;
background:
linear-gradient(rgba(23, 24, 21, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(23, 24, 21, 0.025) 1px, transparent 1px),
linear-gradient(var(--grid-row) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-column) 1px, transparent 1px),
var(--paper);
background-size: 100% 48px, 48px 100%, auto;
}
@@ -52,7 +96,7 @@ input:focus-visible {
textarea:focus-visible {
outline: none;
box-shadow: inset 0 0 0 1px rgba(23, 24, 21, 0.28);
box-shadow: inset 0 0 0 1px var(--focus-inset);
}
.page-shell {
@@ -117,7 +161,7 @@ textarea:focus-visible {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
border: 1px solid var(--ink);
box-shadow: 9px 9px 0 var(--ink);
box-shadow: 9px 9px 0 var(--shadow);
}
.panel {
@@ -127,16 +171,16 @@ textarea:focus-visible {
.panel--input {
display: flex;
flex-direction: column;
background: rgba(244, 242, 234, 0.76);
background: var(--panel);
}
.panel--output {
display: flex;
flex-direction: column;
background:
radial-gradient(circle at 15% 18%, rgba(216, 255, 82, 0.08), transparent 25%),
var(--ink);
color: #efeee6;
radial-gradient(circle at 15% 18%, var(--output-glow), transparent 25%),
var(--output);
color: var(--output-ink);
border-left: 1px solid var(--ink);
}
@@ -156,7 +200,7 @@ textarea:focus-visible {
}
.panel__heading--dark {
border-color: rgba(255, 255, 255, 0.2);
border-color: var(--output-line);
}
.panel__heading h2,
@@ -175,7 +219,7 @@ textarea:focus-visible {
}
.panel--output .panel__number {
color: #9c9d93;
color: var(--output-muted);
}
.counter {
@@ -185,7 +229,7 @@ textarea:focus-visible {
}
.panel--output .counter {
color: #9c9d93;
color: var(--output-muted);
}
textarea {
@@ -204,7 +248,7 @@ textarea {
}
textarea::placeholder {
color: #9b9a91;
color: var(--placeholder);
}
.mosaic-output {
@@ -221,13 +265,13 @@ textarea::placeholder {
}
.mosaic-output--empty {
color: #77786f;
color: var(--output-empty);
}
.output-actions {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid var(--output-line);
}
.button {
@@ -244,22 +288,22 @@ textarea::placeholder {
.button--light {
background: var(--acid);
color: var(--ink);
color: var(--on-acid);
}
.button--light:hover {
background: #efffb4;
background: var(--acid-hover);
}
.button--outline {
color: #efeee6;
color: var(--output-ink);
background: transparent;
border-left: 1px solid rgba(255, 255, 255, 0.2);
border-left: 1px solid var(--output-line);
}
.button--outline:hover {
color: var(--ink);
background: #efeee6;
color: var(--output-hover-ink);
background: var(--output-hover);
}
.control-deck {
@@ -395,7 +439,7 @@ input[type="range"]::-moz-range-thumb {
min-height: 110px;
margin-top: 24px;
padding: 24px;
background: rgba(244, 242, 234, 0.7);
background: var(--panel-soft);
border: 1px solid var(--ink);
}
@@ -419,9 +463,9 @@ input[type="range"]::-moz-range-thumb {
}
.keyword-token--selected {
color: var(--acid);
background: var(--ink);
border-color: var(--ink);
color: var(--selected-ink);
background: var(--selected);
border-color: var(--selected);
}
.keyword-list__empty {
@@ -452,10 +496,10 @@ footer p {
bottom: 24px;
z-index: 10;
padding: 13px 18px;
color: var(--ink);
color: var(--on-acid);
background: var(--acid);
border: 1px solid var(--ink);
box-shadow: 5px 5px 0 var(--ink);
box-shadow: 5px 5px 0 var(--shadow);
font-size: 13px;
font-weight: 700;
opacity: 0;
@@ -498,7 +542,7 @@ footer p {
.workspace {
grid-template-columns: 1fr;
box-shadow: 6px 6px 0 var(--ink);
box-shadow: 6px 6px 0 var(--shadow);
}
.panel {