Dark mode - make watch list easier to read when theres 'unviewed' entries

pull/1192/head
dgtlmoon 2 years ago
parent 2345b6b558
commit 7b94ba6f23

@ -87,7 +87,8 @@
--color-shadow-jump: var(--color-grey-500); --color-shadow-jump: var(--color-grey-500);
--color-icon-github: var(--color-black); --color-icon-github: var(--color-black);
--color-icon-github-hover: var(--color-grey-300); --color-icon-github-hover: var(--color-grey-300);
--color-watch-table-error: var(--color-dark-red); } --color-watch-table-error: var(--color-dark-red);
--color-watch-table-row-text: var(--color-grey-100); }
html[data-darkmode="true"] { html[data-darkmode="true"] {
--color-link: #59bdfb; --color-link: #59bdfb;
@ -118,9 +119,12 @@ html[data-darkmode="true"] {
--color-shadow-jump: var(--color-grey-200); --color-shadow-jump: var(--color-grey-200);
--color-icon-github: var(--color-white); --color-icon-github: var(--color-white);
--color-icon-github-hover: var(--color-grey-700); --color-icon-github-hover: var(--color-grey-700);
--color-watch-table-error: var(--color-light-red); } --color-watch-table-error: var(--color-light-red);
--color-watch-table-row-text: var(--color-grey-800); }
html[data-darkmode="true"] .watch-controls img { html[data-darkmode="true"] .watch-controls img {
opacity: 0.4; } opacity: 0.4; }
html[data-darkmode="true"] .watch-table .unviewed {
color: #fff; }
html[data-darkmode="true"] .icon-spread { html[data-darkmode="true"] .icon-spread {
filter: hue-rotate(-10deg) brightness(1.5); } filter: hue-rotate(-10deg) brightness(1.5); }
html[data-darkmode="true"] .watch-table .title-col a[target="_blank"]::after, html[data-darkmode="true"] .watch-table .title-col a[target="_blank"]::after,

@ -100,6 +100,7 @@
--color-icon-github-hover: var(--color-grey-300); --color-icon-github-hover: var(--color-grey-300);
--color-watch-table-error: var(--color-dark-red); --color-watch-table-error: var(--color-dark-red);
--color-watch-table-row-text: var(--color-grey-100);
} }
html[data-darkmode="true"] { html[data-darkmode="true"] {
@ -127,7 +128,6 @@ html[data-darkmode="true"] {
--color-text-input-description: var(--color-grey-600); --color-text-input-description: var(--color-grey-600);
--color-text-input-placeholder: var(--color-grey-600); --color-text-input-placeholder: var(--color-grey-600);
--color-text-watch-tag-list: #fa3e92; --color-text-watch-tag-list: #fa3e92;
--color-background-code: var(--color-grey-200); --color-background-code: var(--color-grey-200);
--color-background-tab: rgba(0, 0, 0, 0.2); --color-background-tab: rgba(0, 0, 0, 0.2);
@ -138,6 +138,7 @@ html[data-darkmode="true"] {
--color-icon-github: var(--color-white); --color-icon-github: var(--color-white);
--color-icon-github-hover: var(--color-grey-700); --color-icon-github-hover: var(--color-grey-700);
--color-watch-table-error: var(--color-light-red); --color-watch-table-error: var(--color-light-red);
--color-watch-table-row-text: var(--color-grey-800);
// Anything that can't be manipulated through variables follows. // Anything that can't be manipulated through variables follows.
.watch-controls { .watch-controls {
@ -145,7 +146,9 @@ html[data-darkmode="true"] {
opacity: 0.4; opacity: 0.4;
} }
} }
.watch-table .unviewed {
color: #fff;
}
.icon-spread { .icon-spread {
filter: hue-rotate(-10deg) brightness(1.5); filter: hue-rotate(-10deg) brightness(1.5);
} }

@ -121,9 +121,13 @@ code {
width: 100%; width: 100%;
font-size: 80%; font-size: 80%;
tr.unviewed { tr {
&.unviewed {
font-weight: bold; font-weight: bold;
} }
color: var(--color-watch-table-row-text);
}
.error { .error {
color: var(--color-watch-table-error); color: var(--color-watch-table-error);

@ -90,7 +90,8 @@
--color-shadow-jump: var(--color-grey-500); --color-shadow-jump: var(--color-grey-500);
--color-icon-github: var(--color-black); --color-icon-github: var(--color-black);
--color-icon-github-hover: var(--color-grey-300); --color-icon-github-hover: var(--color-grey-300);
--color-watch-table-error: var(--color-dark-red); } --color-watch-table-error: var(--color-dark-red);
--color-watch-table-row-text: var(--color-grey-100); }
html[data-darkmode="true"] { html[data-darkmode="true"] {
--color-link: #59bdfb; --color-link: #59bdfb;
@ -121,9 +122,12 @@ html[data-darkmode="true"] {
--color-shadow-jump: var(--color-grey-200); --color-shadow-jump: var(--color-grey-200);
--color-icon-github: var(--color-white); --color-icon-github: var(--color-white);
--color-icon-github-hover: var(--color-grey-700); --color-icon-github-hover: var(--color-grey-700);
--color-watch-table-error: var(--color-light-red); } --color-watch-table-error: var(--color-light-red);
--color-watch-table-row-text: var(--color-grey-800); }
html[data-darkmode="true"] .watch-controls img { html[data-darkmode="true"] .watch-controls img {
opacity: 0.4; } opacity: 0.4; }
html[data-darkmode="true"] .watch-table .unviewed {
color: #fff; }
html[data-darkmode="true"] .icon-spread { html[data-darkmode="true"] .icon-spread {
filter: hue-rotate(-10deg) brightness(1.5); } filter: hue-rotate(-10deg) brightness(1.5); }
html[data-darkmode="true"] .watch-table .title-col a[target="_blank"]::after, html[data-darkmode="true"] .watch-table .title-col a[target="_blank"]::after,
@ -335,6 +339,8 @@ code {
.watch-table { .watch-table {
width: 100%; width: 100%;
font-size: 80%; } font-size: 80%; }
.watch-table tr {
color: var(--color-watch-table-row-text); }
.watch-table tr.unviewed { .watch-table tr.unviewed {
font-weight: bold; } font-weight: bold; }
.watch-table .error { .watch-table .error {

Loading…
Cancel
Save