Add dark theme

frontend/public/index.html

@@ -133,6 +133,9 @@
     </div>
   </div>
 
+  [{[ if .Theme -]}]
+    <link rel="stylesheet" href="/[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css" />
+  [{[ end ]}]
   [{[ if .CSS -]}]
     <link rel="stylesheet" href="/[{[ .StaticURL ]}]/custom.css" />
   [{[ end ]}]

frontend/public/themes/dark.css

@@ -0,0 +1,140 @@
+:root {
+  --background: #121212;
+  --surfacePrimary: #171819;
+  --surfaceSecondary: #212528;
+  --divider: rgba(255, 255, 255, 0.12);
+  --icon: #ffffff;
+  --textPrimary: rgba(255, 255, 255, 0.87);
+  --textSecondary: rgba(255, 255, 255, 0.6);
+}
+
+body {
+  background: var(--background);
+  color: var(--textPrimary);
+}
+
+#loading {
+  background: var(--background);
+}
+#loading .spinner div {
+  background: var(--icon);
+}
+
+#login {
+  background: var(--background);
+}
+
+header {
+  background: var(--surfacePrimary);
+}
+
+#search #input {
+  background: var(--surfaceSecondary);
+}
+#search.active #input,
+#search.active .boxes {
+  background: var(--surfacePrimary);
+}
+#search.active input {
+  color: var(--textPrimary);
+}
+#search.active #result {
+  background: var(--background);
+  color: var(--textPrimary);
+}
+#search.active .boxes h3 {
+  color: var(--textPrimary);
+}
+
+.action {
+  color: var(--textPrimary) !important;
+}
+.action i {
+  color: var(--icon) !important;
+}
+.action .counter {
+  border-color: var(--surfacePrimary);
+}
+
+nav > div {
+  border-color: var(--divider);
+}
+
+#breadcrumbs {
+  border-color: var(--divider);
+  color: var(--textPrimary) !important;
+}
+#breadcrumbs span {
+  color: var(--textPrimary) !important;
+}
+
+#listing .item {
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
+  border-color: var(--divider) !important;
+}
+#listing .item i {
+  color: var(--icon);
+}
+#listing .item .modified {
+  color: var(--textSecondary);
+}
+#listing h2,
+#listing.list .header span {
+  color: var(--textPrimary) !important;
+}
+#listing.list .header span {
+  color: var(--textPrimary);
+}
+#listing.list .header i {
+  color: var(--icon);
+}
+#listing.list .item.header {
+  background: var(--background);
+}
+
+.card {
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
+}
+.button--flat:hover {
+  background: var(--surfaceSecondary);
+}
+
+.card h3,
+.dashboard #nav,
+.dashboard p label {
+  color: var(--textPrimary);
+}
+.input {
+  background: var(--surfaceSecondary);
+  color: var(--textPrimary);
+}
+
+.dashboard #nav li,
+.collapsible {
+  border-color: var(--divider);
+}
+.collapsible > label * {
+  color: var(--textPrimary);
+}
+
+.shell {
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
+}
+
+@media (max-width: 736px) {
+  #file-selection {
+    background: var(--surfaceSecondary) !important;
+  }
+  #file-selection span {
+    color: var(--textPrimary) !important;
+  }
+  nav {
+    background: var(--surfaceSecondary) !important;
+  }
+  #dropdown {
+    background: var(--surfaceSecondary) !important;
+  }
+}