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

Merge pull request 'feat: 自动适配系统暗黑模式' (#6) from feat/dark-mode into main

Browse Source 
Reviewed-on: #6
This commit was merged in pull request #6.
This commit is contained in:
Haven Mattuy
2026-07-25 15:47:17 +00:00
parent 2f058981a6 6c436be847
commit 76fae3a73b
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" name="description"
content="将中文文本侵蚀成保留少量关键词的纯文本乱码艺术。" 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> <title>文字马赛克</title>
</head> </head>
<body> <body>
src/style.css
+71 -27
View File
@@ -1,6 +1,7 @@
:root { :root {
color: #171815; color: #171815;
background: #e9e7dd; background: #e9e7dd;
color-scheme: light dark;
font-family: font-family:
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif; sans-serif;
@@ -11,6 +12,49 @@
--acid: #d8ff52; --acid: #d8ff52;
--muted: #6b6b63; --muted: #6b6b63;
--line: rgba(23, 24, 21, 0.24); --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; min-height: 100vh;
margin: 0; margin: 0;
background: background:
linear-gradient(rgba(23, 24, 21, 0.035) 1px, transparent 1px), linear-gradient(var(--grid-row) 1px, transparent 1px),
linear-gradient(90deg, rgba(23, 24, 21, 0.025) 1px, transparent 1px), linear-gradient(90deg, var(--grid-column) 1px, transparent 1px),
var(--paper); var(--paper);
background-size: 100% 48px, 48px 100%, auto; background-size: 100% 48px, 48px 100%, auto;
} }
@@ -52,7 +96,7 @@ input:focus-visible {
textarea:focus-visible { textarea:focus-visible {
outline: none; 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 { .page-shell {
@@ -117,7 +161,7 @@ textarea:focus-visible {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
border: 1px solid var(--ink); border: 1px solid var(--ink);
box-shadow: 9px 9px 0 var(--ink); box-shadow: 9px 9px 0 var(--shadow);
} }
.panel { .panel {
@@ -127,16 +171,16 @@ textarea:focus-visible {
.panel--input { .panel--input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: rgba(244, 242, 234, 0.76); background: var(--panel);
} }
.panel--output { .panel--output {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: background:
radial-gradient(circle at 15% 18%, rgba(216, 255, 82, 0.08), transparent 25%), radial-gradient(circle at 15% 18%, var(--output-glow), transparent 25%),
var(--ink); var(--output);
color: #efeee6; color: var(--output-ink);
border-left: 1px solid var(--ink); border-left: 1px solid var(--ink);
} }
@@ -156,7 +200,7 @@ textarea:focus-visible {
} }
.panel__heading--dark { .panel__heading--dark {
border-color: rgba(255, 255, 255, 0.2); border-color: var(--output-line);
} }
.panel__heading h2, .panel__heading h2,
@@ -175,7 +219,7 @@ textarea:focus-visible {
} }
.panel--output .panel__number { .panel--output .panel__number {
color: #9c9d93; color: var(--output-muted);
} }
.counter { .counter {
@@ -185,7 +229,7 @@ textarea:focus-visible {
} }
.panel--output .counter { .panel--output .counter {
color: #9c9d93; color: var(--output-muted);
} }
textarea { textarea {
@@ -204,7 +248,7 @@ textarea {
} }
textarea::placeholder { textarea::placeholder {
color: #9b9a91; color: var(--placeholder);
} }
.mosaic-output { .mosaic-output {
@@ -221,13 +265,13 @@ textarea::placeholder {
} }
.mosaic-output--empty { .mosaic-output--empty {
color: #77786f; color: var(--output-empty);
} }
.output-actions { .output-actions {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
border-top: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid var(--output-line);
} }
.button { .button {
@@ -244,22 +288,22 @@ textarea::placeholder {
.button--light { .button--light {
background: var(--acid); background: var(--acid);
color: var(--ink); color: var(--on-acid);
} }
.button--light:hover { .button--light:hover {
background: #efffb4; background: var(--acid-hover);
} }
.button--outline { .button--outline {
color: #efeee6; color: var(--output-ink);
background: transparent; background: transparent;
border-left: 1px solid rgba(255, 255, 255, 0.2); border-left: 1px solid var(--output-line);
} }
.button--outline:hover { .button--outline:hover {
color: var(--ink); color: var(--output-hover-ink);
background: #efeee6; background: var(--output-hover);
} }
.control-deck { .control-deck {
@@ -395,7 +439,7 @@ input[type="range"]::-moz-range-thumb {
min-height: 110px; min-height: 110px;
margin-top: 24px; margin-top: 24px;
padding: 24px; padding: 24px;
background: rgba(244, 242, 234, 0.7); background: var(--panel-soft);
border: 1px solid var(--ink); border: 1px solid var(--ink);
} }
@@ -419,9 +463,9 @@ input[type="range"]::-moz-range-thumb {
} }
.keyword-token--selected { .keyword-token--selected {
color: var(--acid); color: var(--selected-ink);
background: var(--ink); background: var(--selected);
border-color: var(--ink); border-color: var(--selected);
} }
.keyword-list__empty { .keyword-list__empty {
@@ -452,10 +496,10 @@ footer p {
bottom: 24px; bottom: 24px;
z-index: 10; z-index: 10;
padding: 13px 18px; padding: 13px 18px;
color: var(--ink); color: var(--on-acid);
background: var(--acid); background: var(--acid);
border: 1px solid var(--ink); border: 1px solid var(--ink);
box-shadow: 5px 5px 0 var(--ink); box-shadow: 5px 5px 0 var(--shadow);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
opacity: 0; opacity: 0;
@@ -498,7 +542,7 @@ footer p {
.workspace { .workspace {
grid-template-columns: 1fr; grid-template-columns: 1fr;
box-shadow: 6px 6px 0 var(--ink); box-shadow: 6px 6px 0 var(--shadow);
} }
.panel { .panel {