fileserver: Browse listing supports dark mode (#4066)

* Add dark color scheme media query * Theme search box, make everything less contrasting * Further contrast tweaks
caddyserver · Mar 19, 2021 · a48c620 · a48c620
1 parent 28a4159
commit a48c620
Showing 1 changed file with 49 additions and 0 deletions.
diff --git a/modules/caddyhttp/fileserver/browsetpl.go b/modules/caddyhttp/fileserver/browsetpl.go
@@ -226,6 +226,55 @@ footer {
 		max-width: 100px;
 	}
 }
+
+@media (prefers-color-scheme: dark) {
+	body {
+		background-color: #101010;
+		color: #dddddd;
+	}
+
+	header {
+		background-color: #151515;
+	}
+
+	tbody tr:hover {
+		background-color: #252525;
+	}
+
+	header a,
+	th a {
+		color: #dddddd;
+	}
+
+	a {
+		color: #5796d1;
+		text-decoration: none;
+	}
+
+	a:hover,
+	h1 a:hover {
+		color: #62b2fd;
+	}
+
+	tr {
+		border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
+	}
+
+	#up-arrow,
+	#down-arrow {
+		fill: #dddddd;
+	}
+
+	#filter {
+		background-color: #151515;
+		color: #ffffff;
+		border: 1px solid #212121;
+	}
+
+	.meta {
+		border-bottom: 1px solid #212121
+	}
+}
 </style>
 	</head>
 	<body onload='initFilter()'>