Update dark theme styling

karlomikus · Sep 24, 2023 · 377997b · 377997b
1 parent e4c6b9d
commit 377997b
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 13 deletions.
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -3,7 +3,8 @@
 
 :root {
     /* Base color scheme */
-    --clr-accent-50: #FAF5F8;
+    /* --clr-accent-50: #FAF5F8; */
+    --clr-accent-50: #f9f3f6;
     --clr-accent-100: #F5EAF2;
     --clr-accent-200: #ECD5E5;
     --clr-accent-300: #E1BDD5;
@@ -13,6 +14,7 @@
     --clr-accent-700: #AF5091;
     --clr-accent-800: #8F4277;
     --clr-accent-900: #693057;
+    --clr-accent-950: #411632;
 
     --clr-gray-50: #F5F4F5;
     --clr-gray-100: #EBEAEB;
@@ -46,6 +48,7 @@
     --clr-dark-main-950: #120e1a;
 
     --clr-rating: rgb(235, 133, 0);
+    --clr-rating-bg: rgb(255, 238, 216);
 
     --shadow-color: 324deg 10% 71%;
     --shadow-elevation-low:

diff --git a/src/assets/buttons.css b/src/assets/buttons.css
@@ -47,7 +47,7 @@
 }
 
 .dark-theme .button.button--dark {
-    background-color: var(--clr-dark-main-200);
+    background-color: var(--clr-accent-500);
     color: var(--clr-dark-main-800);
 }
 

diff --git a/src/assets/dialog.css b/src/assets/dialog.css
@@ -31,7 +31,7 @@
 }
 
 .dialog__overlay {
-    background-color: rgba(21, 13, 34, 0.5);
+    background-color: rgba(21, 13, 34, 0.8);
     position: fixed;
     inset: 0;
     pointer-events: auto;
@@ -54,7 +54,7 @@
 }
 
 .dark-theme .dialog__content {
-    background-color: var(--clr-dark-main-950);
+    background-color: var(--clr-dark-main-800);
     border: 1px solid var(--clr-dark-main-800);
 }
 

diff --git a/src/assets/forms.css b/src/assets/forms.css
@@ -71,7 +71,7 @@
     --form-clr-text: var(--clr-gray-100);
     --form-clr-bg: var(--clr-dark-main-700);
     --form-clr-bg-focus: var(--clr-dark-main-700);
-    --form-clr-border: var(--clr-dark-main-900);
+    --form-clr-border: var(--clr-dark-main-600);
     --form-clr-border-focus: var(--clr-accent-500);
     --form-clr-placeholder: var(--clr-gray-400);
 }

diff --git a/src/assets/main.css b/src/assets/main.css
@@ -58,7 +58,7 @@ main {
 }
 
 .dark-theme .page-subtitle {
-    --ps-clr-bg: var(--clr-dark-main-900);
+    --ps-clr-bg: rgba(0, 0, 0, .2);
 }
 
 h3.form-section-title {

diff --git a/src/components/Cocktail/CocktailRating.vue b/src/components/Cocktail/CocktailRating.vue
@@ -45,7 +45,7 @@ export default {
 
 .resource-rating__alt {
     color: var(--clr-rating);
-    background-color: rgb(255, 238, 216);
+    background-color: var(--clr-rating-bg);
     display: block;
     padding: 0 5px;
     border-radius: var(--radius-1);

diff --git a/src/components/ImageUpload.vue b/src/components/ImageUpload.vue
@@ -197,8 +197,8 @@ export default {
 }
 
 .dark-theme .image-upload__select {
-    --iu-clr-bg: linear-gradient(160deg, var(--clr-dark-main-900) 10%, var(--clr-dark-main-950) 110%);
-    --iu-clr-border: var(--clr-dark-main-800);
+    --iu-clr-bg: var(--clr-dark-main-700);
+    --iu-clr-border: var(--clr-dark-main-600);
 }
 
 @media (max-width: 450px) {
@@ -213,6 +213,10 @@ export default {
     background-color: #fff;
 }
 
+.dark-theme .image-upload__select:is(:hover, :active, :focus) {
+    background-color: var(--clr-dark-main-700);
+}
+
 .image-upload__select__icon {
     width: 60px;
     height: 60px;

diff --git a/src/components/MiniRating.vue b/src/components/MiniRating.vue
@@ -18,16 +18,16 @@ export default {
 <style scoped>
 .mini-rating {
     display: inline;
-    background-color: rgb(252, 242, 215);
+    background-color: var(--clr-rating-bg);
     font-family: var(--font-primary);
-    color: rgb(180, 108, 0);
-    font-size: 0.85rem;
+    color: var(--clr-rating);
+    font-size: 0.75rem;
     padding: 1px 5px;
     border-radius: var(--radius-2);
 }
 
 .dark-theme .mini-rating {
-    background-color: rgb(94, 52, 5);
+    background-color: rgb(167, 75, 22);
     color: rgb(255, 236, 207);
 }