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