mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 23:27:09 +00:00
Configure dark mode with tailwind
This commit is contained in:
Misode
@@ -1,56 +1,4 @@
|
||||
:root {
|
||||
--background-1: #1b1b1b;
|
||||
--background-2: #252525;
|
||||
--background-3: #222222;
|
||||
--background-4: #3d3d3d;
|
||||
--background-5: #383838;
|
||||
--background-6: #575757;
|
||||
--text-1: #ffffff;
|
||||
--text-2: #dcdcdc;
|
||||
--text-3: #c3c3c3;
|
||||
--accent-primary: #50baf9;
|
||||
--accent-success: #3eb84f;
|
||||
--accent-warning: #b8893e;
|
||||
--accent-danger: #cf4945;
|
||||
--accent-donate: #db61a2;
|
||||
--accent-site-1: #307328;
|
||||
--accent-site-2: #296422;
|
||||
--accent-sounds-1: #451475;
|
||||
--accent-sounds-2: #39155e;
|
||||
--accent-sounds-3: #6a08a3;
|
||||
--accent-sounds-4: #d1a5e6;
|
||||
--nav: #91908f;
|
||||
--nav-hover: #b4b3b0;
|
||||
--nav-faded: #4d4c4c;
|
||||
--nav-faded-hover: #6e6e6e;
|
||||
--selection: #445a9599;
|
||||
--errors-background: #62190f;
|
||||
--errors-background-2: #471610;
|
||||
--errors-background-3: #3f140f;
|
||||
--errors-text: #ffffffcc;
|
||||
--invalid-text: #fd7951;
|
||||
--success-background-3: #143f0f;
|
||||
--water-background-3: #0d3266;
|
||||
--lava-background-3: #662e0d;
|
||||
--text-saturation: 60%;
|
||||
--text-lightness: 45%;
|
||||
--editor-variable: #9CDCFE;
|
||||
--editor-string: #CE9178;
|
||||
--editor-constant: #569CD6;
|
||||
--editor-number: #B5CEA8;
|
||||
--diff-added: #3fb950;
|
||||
--diff-modified: #d29922;
|
||||
--diff-removed: #f85149;
|
||||
--diff-renamed: #7d8590;
|
||||
--diff-line-added: rgba(46, 160, 67, 0.15);
|
||||
--diff-line-removed: rgba(248, 81, 73, 0.1);
|
||||
--diff-line-separation: rgba(56, 139, 253, 0.1);
|
||||
--diff-numbers-added: rgba(63, 185, 80, 0.3);
|
||||
--diff-numbers-removed: rgba(248, 81, 73, 0.3);
|
||||
--diff-numbers-separation: rgba(56, 139, 253, 0.4);
|
||||
}
|
||||
|
||||
:root[data-theme=light] {
|
||||
--background-1: #fafafa;
|
||||
--background-2: #e2e2e2;
|
||||
--background-3: #d4d3d3;
|
||||
@@ -102,58 +50,56 @@
|
||||
--diff-numbers-separation: rgba(84, 174, 255, 0.4);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-theme=system] {
|
||||
--background-1: #fafafa;
|
||||
--background-2: #e2e2e2;
|
||||
--background-3: #d4d3d3;
|
||||
--background-4: #b8b8b8;
|
||||
--background-5: #bdbdbd;
|
||||
--background-6: #cecece;
|
||||
--text-1: #000000;
|
||||
--text-2: #2f2f2f;
|
||||
--text-3: #494949;
|
||||
--accent-primary: #088cdb;
|
||||
--accent-success: #1a7f37;
|
||||
--accent-warning: #a36f1c;
|
||||
--accent-danger: #bd2f2a;
|
||||
--accent-donate: #bf3989;
|
||||
--accent-site-1: #2da44e;
|
||||
--accent-site-2: #2c974b;
|
||||
--accent-sounds-1: #b481e7;
|
||||
--accent-sounds-2: #c18df5;
|
||||
--accent-sounds-3: #af72d3;
|
||||
--accent-sounds-4: #efd3fd;
|
||||
--nav: #343a40;
|
||||
--nav-hover: #565d64;
|
||||
--nav-faded: #9fa2a7;
|
||||
--nav-faded-hover: #bcbfc3;
|
||||
--selection: #6786dd99;
|
||||
--errors-background: #f66653;
|
||||
--errors-background-2: #c13b29;
|
||||
--errors-background-3: #d8503e;
|
||||
--errors-text: #000000cc;
|
||||
--invalid-text: #a32600;
|
||||
--success-background-3: #6cd83e;
|
||||
--water-background-3: #3e79d8;
|
||||
--lava-background-3: #d86f3e;
|
||||
--text-saturation: 100%;
|
||||
--text-lightness: 30%;
|
||||
--editor-variable: #0451A5;
|
||||
--editor-string: #A31515;
|
||||
--editor-constant: #0000FF;
|
||||
--editor-number: #098658;
|
||||
--diff-added: #1a7f37;
|
||||
--diff-modified: #9a6700;
|
||||
--diff-removed: #d1242f;
|
||||
--diff-renamed: #656d76;
|
||||
--diff-line-added: rgb(230, 255, 236);
|
||||
--diff-line-removed: rgb(255, 235, 233);
|
||||
--diff-line-separation: rgb(221, 244, 255);
|
||||
--diff-numbers-added: rgb(204, 255, 216);
|
||||
--diff-numbers-removed: rgb(255, 215, 213);
|
||||
--diff-numbers-separation: rgba(84, 174, 255, 0.4);
|
||||
}
|
||||
:root.dark {
|
||||
--background-1: #1b1b1b;
|
||||
--background-2: #252525;
|
||||
--background-3: #222222;
|
||||
--background-4: #3d3d3d;
|
||||
--background-5: #383838;
|
||||
--background-6: #575757;
|
||||
--text-1: #ffffff;
|
||||
--text-2: #dcdcdc;
|
||||
--text-3: #c3c3c3;
|
||||
--accent-primary: #50baf9;
|
||||
--accent-success: #3eb84f;
|
||||
--accent-warning: #b8893e;
|
||||
--accent-danger: #cf4945;
|
||||
--accent-donate: #db61a2;
|
||||
--accent-site-1: #307328;
|
||||
--accent-site-2: #296422;
|
||||
--accent-sounds-1: #451475;
|
||||
--accent-sounds-2: #39155e;
|
||||
--accent-sounds-3: #6a08a3;
|
||||
--accent-sounds-4: #d1a5e6;
|
||||
--nav: #91908f;
|
||||
--nav-hover: #b4b3b0;
|
||||
--nav-faded: #4d4c4c;
|
||||
--nav-faded-hover: #6e6e6e;
|
||||
--selection: #445a9599;
|
||||
--errors-background: #62190f;
|
||||
--errors-background-2: #471610;
|
||||
--errors-background-3: #3f140f;
|
||||
--errors-text: #ffffffcc;
|
||||
--invalid-text: #fd7951;
|
||||
--success-background-3: #143f0f;
|
||||
--water-background-3: #0d3266;
|
||||
--lava-background-3: #662e0d;
|
||||
--text-saturation: 60%;
|
||||
--text-lightness: 45%;
|
||||
--editor-variable: #9CDCFE;
|
||||
--editor-string: #CE9178;
|
||||
--editor-constant: #569CD6;
|
||||
--editor-number: #B5CEA8;
|
||||
--diff-added: #3fb950;
|
||||
--diff-modified: #d29922;
|
||||
--diff-removed: #f85149;
|
||||
--diff-renamed: #7d8590;
|
||||
--diff-line-added: rgba(46, 160, 67, 0.15);
|
||||
--diff-line-removed: rgba(248, 81, 73, 0.1);
|
||||
--diff-line-separation: rgba(56, 139, 253, 0.1);
|
||||
--diff-numbers-added: rgba(63, 185, 80, 0.3);
|
||||
--diff-numbers-removed: rgba(248, 81, 73, 0.3);
|
||||
--diff-numbers-separation: rgba(56, 139, 253, 0.4);
|
||||
}
|
||||
|
||||
::selection {
|
||||
|
||||
@@ -1,32 +1,4 @@
|
||||
:root {
|
||||
--node-border: #3f3f3f;
|
||||
--node-background-label: #1b1b1b;
|
||||
--node-background-input: #272727;
|
||||
--node-background-hover: #1f1f1f;
|
||||
--node-text: #dadada;
|
||||
--node-text-dimmed: #b4b4b4;
|
||||
--node-selected: #ad9715;
|
||||
--node-selected-hover: #a38c0a;
|
||||
--node-selected-border: #8d7a0d;
|
||||
--node-add: #487c13;
|
||||
--node-add-hover: #3e7409;
|
||||
--node-add-border: #3b6e0c;
|
||||
--node-remove: #9b341b;
|
||||
--node-remove-hover: #922d13;
|
||||
--node-remove-border: #7e1d05;
|
||||
--node-indent-border: #454749;
|
||||
--category-predicate: #306163;
|
||||
--category-predicate-border: #224849;
|
||||
--category-predicate-background: #1d3333;
|
||||
--category-function: #838383;
|
||||
--category-function-border: #6b6b6b;
|
||||
--category-function-background: #414141;
|
||||
--category-pool: #386330;
|
||||
--category-pool-border: #2e4922;
|
||||
--category-pool-background: #21331d;
|
||||
}
|
||||
|
||||
:root[data-theme=light] {
|
||||
--node-border: #bcbfc3;
|
||||
--node-background-label: #e4e4e4;
|
||||
--node-background-input: #ffffff;
|
||||
@@ -54,35 +26,34 @@
|
||||
--category-pool-background: #b1d6a6;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-theme=system] {
|
||||
--node-border: #bcbfc3;
|
||||
--node-background-label: #e4e4e4;
|
||||
--node-background-input: #ffffff;
|
||||
--node-background-hover: #e7e7e7;
|
||||
--node-text: #000000;
|
||||
--node-text-dimmed: #2c2c2c;
|
||||
--node-selected: #f0e65e;
|
||||
--node-selected-hover: #faf06c;
|
||||
--node-selected-border: #b9a327;
|
||||
--node-add: #9bd464;
|
||||
--node-add-hover: #a5dd70;
|
||||
--node-add-border: #498d09;
|
||||
--node-remove: #e76f51;
|
||||
--node-remove-hover: #f57656;
|
||||
--node-remove-border: #be4b2e;
|
||||
--node-indent-border: #b9b9b9;
|
||||
--category-predicate: #65b5b8;
|
||||
--category-predicate-border: #187e81;
|
||||
--category-predicate-background: #95c5c7;
|
||||
--category-function: #979fa7;
|
||||
--category-function-border: #788086;
|
||||
--category-function-background: #dce0e4;
|
||||
--category-pool: #76b865;
|
||||
--category-pool-border: #398118;
|
||||
--category-pool-background: #b1d6a6;
|
||||
}
|
||||
:root.dark {
|
||||
--node-border: #3f3f3f;
|
||||
--node-background-label: #1b1b1b;
|
||||
--node-background-input: #272727;
|
||||
--node-background-hover: #1f1f1f;
|
||||
--node-text: #dadada;
|
||||
--node-text-dimmed: #b4b4b4;
|
||||
--node-selected: #ad9715;
|
||||
--node-selected-hover: #a38c0a;
|
||||
--node-selected-border: #8d7a0d;
|
||||
--node-add: #487c13;
|
||||
--node-add-hover: #3e7409;
|
||||
--node-add-border: #3b6e0c;
|
||||
--node-remove: #9b341b;
|
||||
--node-remove-hover: #922d13;
|
||||
--node-remove-border: #7e1d05;
|
||||
--node-indent-border: #454749;
|
||||
--category-predicate: #306163;
|
||||
--category-predicate-border: #224849;
|
||||
--category-predicate-background: #1d3333;
|
||||
--category-function: #838383;
|
||||
--category-function-border: #6b6b6b;
|
||||
--category-function-background: #414141;
|
||||
--category-pool: #386330;
|
||||
--category-pool-border: #2e4922;
|
||||
--category-pool-background: #21331d;
|
||||
}
|
||||
|
||||
/* Node headers */
|
||||
|
||||
.node-header {
|
||||
|
||||
Reference in New Issue
Block a user