he4et/tabswitcher
1
0
Fork 0
mirror of https://github.com/He4eT/tabswitcher.git synced 2026-05-04 17:07:23 +00:00
Code Issues Projects Releases Packages Wiki Activity

styles: dark theme

Browse source
This commit is contained in:
He4eT 2024-01-21 22:59:28 +01:00
commit d13ef1695b
2 changed files with 17 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

10
pages/css/common.css
View file

@ -28,13 +28,21 @@ html, body {
body { body {
--color-bg: var(--gray-light-10); --color-bg: var(--gray-light-10);
--color-bg-selection: var(--gray-light-30);
--color-text: var(--gray-dark-80); --color-text: var(--gray-dark-80);
--color-text-alt: var(--gray-dark-10);
--color-indicator-active: var(--green-60);
--color-indicator-inactive: var(--gray-light-50);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
--color-bg: var(--gray-dark-60); --color-bg: var(--gray-dark-60);
--color-text: var(--gray-light-40); --color-bg-selection: var(--gray-dark-30);
--color-text: var(--gray-light-20);
--color-text-alt: var(--gray-light-50);
--color-indicator-active: var(--green-40);
--color-indicator-inactive: var(--gray-light-50);
} }
} }

14
pages/search/search.css
View file

@ -10,11 +10,12 @@ header {
header > input { header > input {
border: 0; border: 0;
border-bottom: 2px solid var(--gray-light-30); border-bottom: 2px solid currentColor;
padding: var(--step); padding: var(--step);
flex: 1 1 auto; flex: 1 1 auto;
font: inherit; font: inherit;
background: inherit; background: inherit;
color: inherit;
} }
header > input#searchbox { header > input#searchbox {
@ -38,6 +39,7 @@ main {
align-items: center; align-items: center;
background: inherit; background: inherit;
color: inherit;
font: inherit; font: inherit;
border: inherit; border: inherit;
@ -57,7 +59,7 @@ main {
.tab:focus-visible { .tab:focus-visible {
outline: none; outline: none;
background-color: var(--gray-light-30); background-color: var(--color-bg-selection);
} }
.tab > .favicon { .tab > .favicon {
@ -73,21 +75,21 @@ main {
} }
.tab > .indicator.active { .tab > .indicator.active {
background-color: var(--green-60); background-color: var(--color-indicator-active);
} }
.tab > .indicator.discarded { .tab > .indicator.discarded {
background-color: var(--gray-light-50); background-color: var(--color-indicator-inactive);
} }
.tab > .label { .tab > .label {
font-family: monospace; font-family: monospace;
color: var(--gray-dark-10); color: var(--color-text-alt);
flex-shrink: 0; flex-shrink: 0;
} }
.tab > .url { .tab > .url {
color: var(--gray-dark-10); color: var(--color-text-alt);
} }
.tab > .title, .tab > .title,