support dark mode

KawaiiZapic · Jul 24, 2023 · 5003308 · 5003308
1 parent bfead22
commit 5003308
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/static/css/loading.css b/static/css/loading.css
@@ -175,3 +175,15 @@
  flex-direction: column;
  }
 }
+
+@media (prefers-color-scheme: dark) {
+ body, .loading-mask {
+ background-color: #333;
+ }
+ .loading-text {
+ color: #ddd;
+ }
+ .loading-indicator .circle-line {
+ stroke: #fb7299;
+ }
+}
diff --git a/static/css/main.css b/static/css/main.css
@@ -476,3 +476,48 @@ body.locked, .content-container, .self-wrapper, .article-title {
  align-items: start;
  }
 }
+
+@media (prefers-color-scheme: dark) {
+ @keyframes name-out {
+ 0% {
+ transform: translateY(0);
+ opacity: 0;
+ }
+
+ 33% {
+ transform: translateY(0);
+ opacity: 0;
+ }
+
+ 66% {
+ opacity: 1;
+ color: #ddd;
+ transform: translateY(-1em);
+ text-shadow: none;
+ }
+
+ 100% {
+ transform: translateY(-1.2em);
+ opacity: 1;
+ color: white;
+ text-shadow: 4px 4px 5px rgba(0, 0, 0, .5);
+ }
+
+ }
+
+ .content-container {
+ background-color: #333;
+ }
+
+ a[href].link-item, body {
+ color: #ddd;
+ }
+
+ .background-layer {
+ filter: brightness(0.75);
+ }
+
+ .background-layer.loading {
+ filter: brightness(0.75) blur(50px);
+ }
+}