add dark theme

src/components/Content.vue

@@ -69,6 +69,7 @@ import '../css/style.css'
 import '../css/contentview.css'
 import '../css/content_scale.css'
 import '../css/menu.css'
+import '../css/dark_theme.css'
 import utils from "@/js/utils";
 import IconBase from "@/icons/IconBase";
 import IconSideBar from "@/icons/IconSideBar";

src/components/Sidebar.vue

@@ -47,6 +47,7 @@
 import '../css/style.css';
 import '../css/sidebar.css';
 import '../css/mobile_optimize.css'
+import '../css/dark_theme.css'
 import utils from "@/js/utils";
 import IconBase from "@/icons/IconBase";
 import IconSideBar from "@/icons/IconSideBar";

src/css/content_scale.css

@@ -1,5 +1,9 @@
 /* this file contains styles for scale function */
 
+.photo.box {
+    transition: width 0.2s;
+}
+
 /*  default: width > 1100px */
 .box.scale-ratio-ratio--6 {  width:    10%;           }
 .box.scale-ratio-ratio--5 {  width:    10%;           }

src/css/contentview.css

@@ -113,7 +113,6 @@ div.photo {
     background-size:cover;
 }
 
-
 @media screen and (max-width: 1100px) {
     div.cnav .back {
         position: absolute;

src/css/dark_theme.css

@@ -0,0 +1,52 @@
+@media (prefers-color-scheme: dark) {
+    /* Main Container */
+    .content-container {
+        background-color: #111 !important;
+    }
+
+    /* Nav bar */
+    div.navbar {
+        background-color: rgba(0, 0, 0,0.8);
+        border-bottom: 1px solid #222;
+        color: white;
+    }
+
+    /* Side bar */
+    .sidebar-container {
+        background: #000 !important;
+        color: #fff;
+    }
+
+    .list_img {
+        background-color: black;
+    }
+
+    .listview a,
+    .listview a.selected {
+        color: white !important;
+    }
+
+    /* Menu */
+    .context-menu {
+        border:   1px solid #777 !important;
+        background: rgba(80, 80, 80, 0.8) !important;
+    }
+
+    .context-menu a {
+        color: #fff !important;
+    }
+
+    .context-menu a[aria-disabled] {
+        color: #888 !important;
+    }
+
+    /* Elements */
+    .cnav button {
+        background: rgba(80, 80, 80, 0.8) !important;
+        border-bottom: 1px solid #222 !important;
+    }
+
+    .preview-with-navbar {
+        background: #000 !important;
+    }
+}

src/css/menu.css

@@ -16,6 +16,7 @@
 
     border-radius: 5px;
     border: 1px solid #aaa;
+
     background: rgba(200, 200, 200, 0.8);
     backdrop-filter: blur(10px);
     padding: 5px 3px 5px 3px;
@@ -57,5 +58,11 @@
 
 .context-menu hr {
     border: none;
-    border-bottom: 1px solid #888;
+    border-bottom: 1px solid #aaa;
+}
+
+@media (prefers-color-scheme: dark) {
+    .context-menu hr {
+        border-bottom: 1px solid #555;
+    }
 }

src/css/mobile_optimize.css

@@ -3,14 +3,19 @@
 .listview a:hover {
     background: rgba(255, 255, 255, 0.3);
 }
+@media (prefers-color-scheme: dark) {
+    .listview a:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
+}
 .listview.normal-menu-ui a:active {
     background: #5555ff;
     color: white;
 }
 
 @media screen and (max-width: 500px) {
     .listview a.selected {
-        background: aliceblue !important;
+        background: transparent !important;
         color: black !important;
     }