Merge pull request #53 from Oliver-Akins/theme/dark-high-contrast

Add high contrast dark theme

pnpm-lock.yaml

@@ -12,7 +12,7 @@ devDependencies:
   '@vue/cli-service': 4.5.8_vue-template-compiler@2.6.12
   babel-eslint: 10.1.0_eslint@6.8.0
   eslint: 6.8.0
-  eslint-plugin-vue: 6.2.2_eslint@6.8.0
+  eslint-plugin-vue: 7.1.0_eslint@6.8.0
   vue-template-compiler: 2.6.12
 lockfileVersion: 5.2
 packages:
@@ -3627,19 +3627,20 @@ packages:
       webpack: '>=2.0.0 <5.0.0'
     resolution:
       integrity: sha512-RLgV9hoCVsMLvOxCuNjdqOrUqIj9oJg8hF44vzJaYqsAHuY9G2YAeN3joQ9nxP0p5Th9iFSIpKo+SD8KISxXRg==
-  /eslint-plugin-vue/6.2.2_eslint@6.8.0:
+  /eslint-plugin-vue/7.1.0_eslint@6.8.0:
     dependencies:
       eslint: 6.8.0
+      eslint-utils: 2.1.0
       natural-compare: 1.4.0
-      semver: 5.7.1
+      semver: 7.3.2
-      vue-eslint-parser: 7.1.0_eslint@6.8.0
+      vue-eslint-parser: 7.1.1_eslint@6.8.0
     dev: true
     engines:
       node: '>=8.10'
     peerDependencies:
-      eslint: ^5.0.0 || ^6.0.0
+      eslint: ^6.2.0 || ^7.0.0
     resolution:
-      integrity: sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==
+      integrity: sha512-9dW7kj8/d2IkDdgNpvIhJdJ3XzU3x4PThXYMzWt49taktYnGyrTY6/bXCYZ/VtQKU9kXPntPrZ41+8Pw0Nxblg==
   /eslint-scope/4.0.3:
     dependencies:
       esrecurse: 4.3.0
@@ -3666,6 +3667,14 @@ packages:
       node: '>=6'
     resolution:
       integrity: sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
+  /eslint-utils/2.1.0:
+    dependencies:
+      eslint-visitor-keys: 1.3.0
+    dev: true
+    engines:
+      node: '>=6'
+    resolution:
+      integrity: sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
   /eslint-visitor-keys/1.3.0:
     dev: true
     engines:
@@ -7463,6 +7472,13 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+  /semver/7.3.2:
+    dev: true
+    engines:
+      node: '>=10'
+    hasBin: true
+    resolution:
+      integrity: sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
   /send/0.17.1:
     dependencies:
       debug: 2.6.9
@@ -8564,7 +8580,7 @@ packages:
       vue: ^2
     resolution:
       integrity: sha512-3vdpaOaxRpVRG5Qne8Hjb4HG+P2fxCo6t3SqyQOznMsZApKPcIvTLEMfvJ1yd3R/0DYOjdPYxCDeReMD+UGyuA==
-  /vue-eslint-parser/7.1.0_eslint@6.8.0:
+  /vue-eslint-parser/7.1.1_eslint@6.8.0:
     dependencies:
       debug: 4.2.0
       eslint: 6.8.0
@@ -8579,7 +8595,7 @@ packages:
     peerDependencies:
       eslint: '>=5.0.0'
     resolution:
-      integrity: sha512-Kr21uPfthDc63nDl27AGQEhtt9VrZ9nkYk/NTftJ2ws9XiJwzJJCnCr3AITQ2jpRMA0XPGDECxYH8E027qMK9Q==
+      integrity: sha512-8FdXi0gieEwh1IprIBafpiJWcApwrU+l2FEj8c1HtHFdNXMd0+2jUSjBVmcQYohf/E72irwAXEXLga6TQcB3FA==
   /vue-hot-reload-api/2.3.4:
     dev: true
     resolution:
@@ -9024,7 +9040,7 @@ specifiers:
   clipboard-polyfill: ^3.0.1
   core-js: ^3.6.5
   eslint: ^6.7.2
-  eslint-plugin-vue: ^6.2.2
+  eslint-plugin-vue: ^7.1.0
   v-tooltip: ^2.0.3
   vue: ^2.6.11
   vue-ellipse-progress: ^1.1.1

public/static/css/theme/dark-high-contrast.css

@@ -0,0 +1,76 @@
+:root {
+	--spotify-green: #1DB954;
+	--spotify-white: #FFFFFF;
+	--spotify-black: #000000;
+
+	--accent1: #7289da;
+	--accent2: #00aa00;
+
+	--error: #ff0000;
+	--error-background: #ff00005d;
+	--error-text: #FFFFFF;
+	--error-accent: var(--error);
+
+	--success: var(--accent2);
+	--success-background: #00aa002f;
+	--success-text: var(--card-text);
+	--success-accent: #00aa00;
+
+	--background: black;
+	--background-text: white;
+
+	--card-border-colour: white;
+	--card-border-style: solid;
+	--card-border-width: 2px;
+	--card-colour: black;
+	--card-text: white;
+
+	--on-card-colour: black;
+	--on-card-text: white;
+
+	--modal-container-background: #0e0f10eb;
+	--modal-background: var(--card-colour);
+	--modal-close-button: var(--card-text);
+	--modal-text: var(--card-text);
+
+	--fonts: 'Open Sans', sans-serif;
+
+	--corner-rounding: 7px;
+
+	--input-background: var(--spotify-black);
+	--input-text: var(--spotify-green);
+	--input-active-border: var(--accent2);
+
+	--button-hover-background: var(--accent2);
+	--button-background: var(--spotify-green);
+	--button-disabled-background: #09682a;
+	--button-text: var(--spotify-black);
+	--button-disabled-text: var(--spotify-black);
+
+	--textarea-background: var(--spotify-black);
+	--textarea-text-colour: var(--spotify-green);
+	--textarea-border-colour: var(--accent2);
+
+	--missing-picture-background: var(--background);
+	--missing-picture-foreground: var(--accent2);
+
+	--tooltip-colour: white;
+	--tooltip-text: black;
+
+	--percent-filled: var(--accent2);
+	--percent-empty: var(--on-card-colour);
+	--percent-text: var(--on-card-text);
+
+	--scrollbar-background: #0f0f0f;
+	--scrollbar-handle: #4d4d4d;
+	--scrollbar-handle-hover: #5e5e5e;
+
+	--card-bottom-row-text-colour: var(--accent2);
+	--card-bottom-row-background: var(--on-card-colour);
+	--card-bottom-row-hover-background: #1d1d1d;
+	--card-bottom-row-divider-colour: #000000;
+	--card-bottom-row-icon-colour: var(--card-bottom-row-text-colour);
+
+	--icon-primary: var(--accent2);
+	--icon-secondary: var(--accent1);
+}

public/static/css/theme/dark.css

@@ -19,6 +19,9 @@
 	--background: #23272A;
 	--background-text: var(--spotify-white);
 
+	--card-border-colour: transparent;
+	--card-border-style: none;
+	--card-border-width: 0px;
 	--card-colour: #2C2F33;
 	--card-text: #ffffff80;
 

public/static/css/theme/halloween.css

@@ -19,6 +19,9 @@
 	--background: #FF8C00;
 	--background-text: var(--spotify-white);
 
+	--card-border-colour: transparent;
+	--card-border-style: none;
+	--card-border-width: 0px;
 	--card-colour: #794200;
 	--card-text: white;
 

public/static/css/theme/light.css

@@ -19,6 +19,9 @@
 	--background: white;
 	--background-text: dimgray;
 
+	--card-border-colour: transparent;
+	--card-border-style: none;
+	--card-border-width: 0px;
 	--card-colour: #dddddd;
 	--card-text: var(--background-text);
 

src/components/cards/Artist.vue

@@ -76,13 +76,15 @@ export default {
 
 <style scoped>
 .card {
+	border-color: var(--card-border-colour);
+	border-style: var(--card-border-style);
+	border-width: var(--card-border-width);
 	border-radius: var(--corner-rounding);
 	background-color: var(--card-colour);
 	padding: 10px 10px 1.75em;
 	color: var(--card-text);
 	flex-direction: column;
 	align-items: center;
-	border-style: none;
 	position: relative;
 	margin: 5px auto;
 	display: flex;

src/components/cards/Track.vue

@@ -138,12 +138,14 @@ export default {
 
 <style scoped>
 .card {
+	border-color: var(--card-border-colour);
+	border-style: var(--card-border-style);
+	border-width: var(--card-border-width);
 	border-radius: var(--corner-rounding);
 	background-color: var(--card-colour);
 	color: var(--card-text);
 	flex-direction: column;
 	align-items: center;
-	border-style: none;
 	position: relative;
 	margin: 5px auto;
 	display: flex;

src/components/modals/ThemeModal.vue

@@ -57,11 +57,17 @@ export default {
 			{
 				name: `Halloween`,
 				filename: `halloween`,
-				description: `This exlusive theme only shows up around Halloween, make sure to use it while you can!`,
+				description: `This elusive theme only shows up around Halloween, make sure to use it while you can!`,
 				show() {
 					let date = new Date();
 					return date.getMonth() == 9;
 				},
+			},
+			{
+				name: `High Contrast (Dark)`,
+				filename: `dark-high-contrast`,
+				description: `This theme is designed to be as high contrast as possible for those who need it.`,
+				show() { return true },
 			}
 		]
 	}},