From b2105c8fb0bc138669a14030bf28d426b6d575b7 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <moonloop.adult@protonmail.com>
Date: Tue, 23 Mar 2021 20:37:20 +0100
Subject: [PATCH] Refined dark theme.

---
 assets/components/actors/actors.vue       |  8 ++++----
 assets/components/actors/filter-range.vue |  8 ++++----
 assets/components/actors/gender.vue       |  8 ++++----
 assets/components/filters/filter-bar.vue  | 22 +++++++++++++---------
 assets/components/form/range.vue          |  6 ++++++
 assets/components/header/menu.vue         | 12 ++++++------
 assets/components/tooltip/tooltip.vue     |  4 ++--
 assets/components/users/stash.vue         |  2 +-
 assets/css/_theme.scss                    |  8 ++++----
 9 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/assets/components/actors/actors.vue b/assets/components/actors/actors.vue
index d772e673..abd5f483 100644
--- a/assets/components/actors/actors.vue
+++ b/assets/components/actors/actors.vue
@@ -516,7 +516,7 @@ export default {
 	display: flex;
 	justify-content: space-between;
 	padding: .75rem .5rem .5rem .5rem;
-	color: var(--darken);
+	color: var(--shadow);
 	font-weight: bold;
 	font-size: .9rem;
 
@@ -598,7 +598,7 @@ export default {
 	min-width: 1.5rem;
 	flex-shrink: 0;
 	padding: 0 .5rem;
-	color: var(--darken);
+	color: var(--shadow);
 	font-weight: bold;
 	font-size: .9rem;
 
@@ -607,7 +607,7 @@ export default {
 	}
 
 	.icon {
-		fill: var(--darken);
+		fill: var(--shadow);
 	}
 
 	&:hover {
@@ -637,7 +637,7 @@ export default {
 	height: 1.25rem;
 	appearance: none;
 	border-radius: 1rem;
-	background-color: var(--darken-hint);
+	background-color: var(--shadow-hint);
 	background-image: radial-gradient(circle, var(--shadow-weak) .3rem, transparent calc(.3rem + 1px));
 	cursor: pointer;
 
diff --git a/assets/components/actors/filter-range.vue b/assets/components/actors/filter-range.vue
index 80a7751b..384ccd91 100644
--- a/assets/components/actors/filter-range.vue
+++ b/assets/components/actors/filter-range.vue
@@ -87,14 +87,14 @@ export default {
 .filter-section {
 	width: 15rem;
 	max-width: 100%;
-	border-bottom: solid 1px var(--darken-hint);
+	border-bottom: solid 1px var(--shadow-hint);
 }
 
 .filter-label {
 	display: flex;
 	justify-content: space-between;
 	padding: .75rem .5rem .5rem .5rem;
-	color: var(--darken);
+	color: var(--shadow);
 	font-weight: bold;
 	font-size: .9rem;
 
@@ -180,7 +180,7 @@ export default {
 	min-width: 1.5rem;
 	flex-shrink: 0;
 	padding: 0 .5rem;
-	color: var(--darken);
+	color: var(--shadow);
 	font-weight: bold;
 	font-size: .9rem;
 
@@ -189,7 +189,7 @@ export default {
 	}
 
 	.icon {
-		fill: var(--darken);
+		fill: var(--shadow);
 	}
 
 	&:hover {
diff --git a/assets/components/actors/gender.vue b/assets/components/actors/gender.vue
index 52c21de8..63f0c1ec 100644
--- a/assets/components/actors/gender.vue
+++ b/assets/components/actors/gender.vue
@@ -23,19 +23,19 @@ export default {
 .gender {
     &.female .icon {
         fill: var(--female);
-        filter: drop-shadow(0 0 1px var(--shadow));
+        filter: drop-shadow(0 0 1px var(--darken));
     }
 
     &.male .icon {
         fill: var(--male);
-        filter: drop-shadow(0 0 1px var(--shadow));
+        filter: drop-shadow(0 0 1px var(--darken));
     }
 
     &.transsexual .icon {
-        fill: var(--text-contrast);
+        fill: var(--text-light);
         filter: drop-shadow(1px 0 0 var(--female)) drop-shadow(-1px 0 0 var(--female)) drop-shadow(0 1px 0 var(--female)) drop-shadow(0 -1px 0 var(--female))
             drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male))
-            drop-shadow(0 0 1px var(--shadow))
+            drop-shadow(0 0 1px var(--darken))
     }
 }
 </style>
diff --git a/assets/components/filters/filter-bar.vue b/assets/components/filters/filter-bar.vue
index 4089404f..c58ca42a 100644
--- a/assets/components/filters/filter-bar.vue
+++ b/assets/components/filters/filter-bar.vue
@@ -128,12 +128,17 @@ export default {
 
 .filter-mode {
 	width: 100%;
+	color: var(--shadow);
 	background: none;
 	padding: .75rem;
 	margin: 0 0 .5rem 0;
 	font-size: 1rem;
 	border: none;
 	border-bottom: solid 1px var(--shadow-hint);
+
+	option {
+		color: var(--text-dark);
+	}
 }
 
 .filter-clear {
@@ -141,25 +146,25 @@ export default {
 	align-items: center;
 	justify-content: space-between;
 	padding: .5rem 1rem;
-	color: var(--darken-weak);
+	color: var(--shadow-weak);
 	text-decoration: none;
 	cursor: default;
 
 	.icon {
-		fill: var(--darken-hint);
+		fill: var(--shadow-hint);
 		margin: 0 0 0 1rem;
 	}
 
 	&.active {
-		color: var(--darken);
+		color: var(--shadow);
 
 		.icon {
-			fill: var(--darken-weak);
+			fill: var(--shadow-weak);
 		}
 
 		&:hover {
 			color: var(--text);
-			background: var(--darken-hint);
+			background: var(--shadow-hint);
 			cursor: pointer;
 
 			.icon {
@@ -174,7 +179,7 @@ export default {
 	align-items: center;
 
 	&:hover {
-		background: var(--darken-hint);
+		background: var(--shadow-hint);
 		cursor: pointer;
 	}
 
@@ -202,7 +207,7 @@ export default {
 		width: 1rem;
 		height: 1rem;
 		padding: .5rem 1rem;
-		fill: var(--darken-hint);
+		fill: var(--shadow-hint);
 	}
 
 	.filter-remove {
@@ -226,7 +231,7 @@ export default {
 
 .filter-include:hover,
 .filter-name:hover {
-	background: var(--darken-hint);
+	background: var(--shadow-hint);
 }
 
 @media(max-width: $breakpoint-small) {
@@ -299,7 +304,6 @@ export default {
 	}
 }
 
-
 .filters {
 	flex-shrink: 0;
 }
diff --git a/assets/components/form/range.vue b/assets/components/form/range.vue
index 8a8b7353..e28c550a 100644
--- a/assets/components/form/range.vue
+++ b/assets/components/form/range.vue
@@ -163,6 +163,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.dark .range-container .range {
+	--slider-range: var(--lighten-weak);
+}
+</style>
+
 <style lang="scss" scoped>
 @mixin thumb {
 	appearance: none;
diff --git a/assets/components/header/menu.vue b/assets/components/header/menu.vue
index 1f5fa39f..10944b9a 100644
--- a/assets/components/header/menu.vue
+++ b/assets/components/header/menu.vue
@@ -134,20 +134,20 @@ export default {
 .menu-item {
 	display: flex;
 	padding: .75rem 1rem .75rem .75rem;
-	color: inherit;
+	color: var(--text);
 	text-decoration: none;
 
 	.icon {
-		fill: var(--darken);
+		fill: var(--shadow);
 		margin: 0 1rem 0 0;
 	}
 
 	&.disabled {
-		color: var(--darken-weak);
+		color: var(--shadow-weak);
 		cursor: default;
 
 		.icon {
-			fill: var(--darken-weak);
+			fill: var(--shadow-weak);
 		}
 	}
 
@@ -164,10 +164,10 @@ export default {
 .menu-username {
 	display: block;
 	font-weight: bold;
-	color: var(--darken-strong);
+	color: var(--shadow-strong);
 	font-size: .9rem;
 	padding: .75rem 1rem;
-	border-bottom: solid 1px var(--darken-hint);
+	border-bottom: solid 1px var(--shadow-hint);
 	text-align: center;
 	text-decoration: none;
 }
diff --git a/assets/components/tooltip/tooltip.vue b/assets/components/tooltip/tooltip.vue
index c42ea81a..28822fa3 100644
--- a/assets/components/tooltip/tooltip.vue
+++ b/assets/components/tooltip/tooltip.vue
@@ -160,7 +160,7 @@ export default {
 
 .tooltip {
 	position: relative;
-	background: var(--background-light);
+	background: var(--background);
 }
 
 .tooltip-arrow {
@@ -172,7 +172,7 @@ export default {
 	left: calc(50% - .5rem);
 	border-left: .5rem solid transparent;
 	border-right: .5rem solid transparent;
-	border-bottom: .5rem solid var(--background-light);
+	border-bottom: .5rem solid var(--background);
 	margin: 0 auto;
 	filter: drop-shadow(0 0 3px var(--darken-weak));
 }
diff --git a/assets/components/users/stash.vue b/assets/components/users/stash.vue
index 74ecb240..d8630bf6 100644
--- a/assets/components/users/stash.vue
+++ b/assets/components/users/stash.vue
@@ -139,7 +139,7 @@ export default {
 	min-width: 0;
 	height: 100%;
 	background: var(--background);
-	box-shadow: 0 0 3px var(--shadow-weak);
+	box-shadow: 0 0 3px var(--darken-weak);
 }
 
 .stash-section {
diff --git a/assets/css/_theme.scss b/assets/css/_theme.scss
index 058d683b..57fd6b4b 100644
--- a/assets/css/_theme.scss
+++ b/assets/css/_theme.scss
@@ -90,11 +90,11 @@ $breakpoint4: 1500px;
     --text: #fff;
     --text-contrast: #222;
 
-    --background: var(--background-dark);
-    --background-dim: #181818;
-    --background-soft: #111;
+    --background: #181818;
+    --background-dim: #111;
+    --background-soft: #000;
 
-    --profile: #000;
+    --profile: #0a0a0a;
     --tile: #2a2a2a;
 
     --link: #dd6688;