mirrors/ArchiveBox
1
0
Fork 0
mirror of https://github.com/ArchiveBox/ArchiveBox.git synced 2025-05-17 00:24:26 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add prefers-color-scheme: dark support

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-05-14 23:54:17 +01:00
parent 500534f4be
commit 3b0236b087
No known key found for this signature in database
GPG key ID: 1BE5172E637709C2
1 changed files with 38 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

46
archivebox/templates/index.html
View file

@ -3,6 +3,34 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Archived Sites</title> <title>Archived Sites</title>
<style> <style>
:root {
--accent-1: #aa1e55;
--accent-2: #ffebeb;
--accent-3: #efefef;
--bg-main: #efefef;
--text-main: black;
--text-1: #1a1a1a;
--text-2: #eaeaea;
}
@media (prefers-color-scheme: dark) {
:root {
--accent-2: hsl(160, 100%, 96%);
--text-1: #eaeaea;
--text-2: #1a1a1a;
--bg-main: #101010;
}
#table-bookmarks_wrapper,
#table-bookmarks_wrapper img,
tbody td:nth-child(3),
tbody td:nth-child(3) span,
footer {
filter: invert(100%);
}
}
html, body { html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -12,10 +40,12 @@
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-family: "Gill Sans", Helvetica, sans-serif; font-family: "Gill Sans", Helvetica, sans-serif;
background: var(--bg-main);
color: var(--text-main);
} }
header { header {
background-color: #aa1e55; background-color: var(--accent-1);
color: #1a1a1a; color: var(--text-1);
padding: 10px; padding: 10px;
padding-top: 0px; padding-top: 0px;
padding-bottom: 15px; padding-bottom: 15px;
@ -25,7 +55,7 @@
margin: 7px 0px; margin: 7px 0px;
font-size: 35px; font-size: 35px;
font-weight: 300; font-weight: 300;
color: #1a1a1a; color: var(--text-1);
} }
header h1 img { header h1 img {
height: 44px; height: 44px;
@ -33,7 +63,7 @@
} }
header a { header a {
text-decoration: none !important; text-decoration: none !important;
color: #1a1a1a; color: var(--text-1);
} }
.header-center { .header-center {
margin: auto; margin: auto;
@ -42,7 +72,7 @@
padding-top: 6px; padding-top: 6px;
} }
.header-center small { .header-center small {
color: #eaeaea; color: var(--text-2);
opacity: 0.7; opacity: 0.7;
} }
.header-left { .header-left {
@ -54,7 +84,7 @@
padding-right: 10px; padding-right: 10px;
} }
header + div { header + div {
margin-top: 10px; padding-top: 10px;
} }
#table-bookmarks_length, #table-bookmarks_filter { #table-bookmarks_length, #table-bookmarks_filter {
padding: 0px 15px; padding: 0px 15px;
@ -70,7 +100,7 @@
height: 35px; height: 35px;
} }
tbody tr:nth-child(odd) { tbody tr:nth-child(odd) {
background-color: #ffebeb !important; background-color: var(--accent-2) !important;
} }
table tr td { table tr td {
white-space: nowrap; white-space: nowrap;
@ -127,7 +157,7 @@
color:black; color:black;
} }
tr td a.title small { tr td a.title small {
background-color: #efefef; background-color: var(--accent-3);
border-radius: 4px; border-radius: 4px;
float:right float:right
} }