Spotify/top-lists
0
0
Fork 0
Code Issues Activity

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

Browse source 
Add high contrast dark theme
This commit is contained in:
Oliver 2020-10-30 23:47:21 -06:00 • committed by GitHub
commit 2c229e65c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 123 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

34
pnpm-lock.yaml generated
View file

@ -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
vue-eslint-parser: 7.1.0_eslint@6.8.0
semver: 7.3.2
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

76
public/static/css/theme/dark-high-contrast.css Normal file
View file

@ -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);
}

3
public/static/css/theme/dark.css
View file

@ -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;

3
public/static/css/theme/halloween.css
View file

@ -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;

3
public/static/css/theme/light.css
View file

@ -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);

4
src/components/cards/Artist.vue
View file

@ -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;

4
src/components/cards/Track.vue
View file

@ -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;

8
src/components/modals/ThemeModal.vue
View file

@ -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 },
}
]
}},