diff --git a/index.html b/index.html
index f64c7c6..480d9ea 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,16 @@
name="description"
content="将中文文本侵蚀成保留少量关键词的纯文本乱码艺术。"
/>
-
+
+
文字马赛克
diff --git a/src/style.css b/src/style.css
index f8121ba..3860b8b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -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 {