From ed3d7d72018ae5397028646761675bf5a624e539 Mon Sep 17 00:00:00 2001 From: reeshi-18 Date: Wed, 7 Dec 2022 01:41:20 +0530 Subject: [PATCH 1/9] added dark theme variable --- src/App.vue | 2 +- src/styles/modules/_navbar.scss | 2 +- src/styles/partials/_variables.scss | 49 ++++++++++++++++++++++++++++- 3 files changed, 50 insertions(+), 3 deletions(-) diff --git a/src/App.vue b/src/App.vue index e6aad19..ffd1080 100644 --- a/src/App.vue +++ b/src/App.vue @@ -38,7 +38,7 @@ export default { z-index: 1; min-height: 100%; display: flex; - background-color: #fcfcfc; + background-color: $theme-color-white; } @media only screen and (max-width: 1280) { diff --git a/src/styles/modules/_navbar.scss b/src/styles/modules/_navbar.scss index b083cf8..04ea3c2 100644 --- a/src/styles/modules/_navbar.scss +++ b/src/styles/modules/_navbar.scss @@ -1,5 +1,5 @@ .navbar { - background-color: #fcfcfc; + background-color: $theme-color-white; width: 100%; height: 2rem; display: flex; diff --git a/src/styles/partials/_variables.scss b/src/styles/partials/_variables.scss index 5ed1fb6..5926883 100644 --- a/src/styles/partials/_variables.scss +++ b/src/styles/partials/_variables.scss @@ -1,3 +1,5 @@ +$dark-theme: true; + $root-font-size: 0.8982vw; // $root-font-size-small: ; // $root-font-size-large: ; @@ -7,8 +9,9 @@ $root-base-size: 16; $primary-font-family: "Nunito Sans", sans-serif; $secondary-font-family: "Open Sans", sans-serif; + // colors variables -$theme-color-white: #ffffff; +$theme-color-white: #fcfcfc; $theme-color-offwhite: #f2f2f2; $theme-color-dark-white: #e7e7e7; $theme-color-black: #000000; @@ -47,6 +50,50 @@ $theme-color-violet-med-transp: rgba(89, 60, 143, 0.57); $theme-color-dark-black-low-transp: rgba(0, 0, 0, 0.15); $theme-color-dark-blue-high-transp: rgba(76, 128, 165, 0.75); + +@if $dark-theme { + $theme-color-white: #000000; + $theme-color-offwhite: #120f0f; + $theme-color-dark-white: #0c0b0e; + $theme-color-black: #fcfcfe; + $theme-color-black19: #d7d6d7; + $theme-color-blue: #355dc5; + $theme-color-orange: #ff9458; + $theme-color-dark-orange: #e44f26; + $theme-color-light-orange: #cc652b; + $theme-color-grey57: #575757; + $theme-color-grey39: #393939; + $theme-color-grey: #555555; + $theme-color-dark-grey: #444444; + $theme-color-light-grey: #999999; + $theme-color-off-white: #dddddd; + $theme-color-light-grey-d7: #d7d7d7; + $theme-color-white-grey: #b3b3b3; + $theme-color-dark-blue: #2e9cca; + $theme-color-light-blue: #808cad; + $theme-color-red: #aa3126; + $theme-color-violet: #411396; + $theme-color-white-low-transp: rgba(0,0,0,0.05); + $theme-color-black-low-transp: rgba(41, 40, 40, 0.5); + $theme-color-black-med-transp: rgba(57, 57, 57, 0.57); + $theme-color-black-high-transp: rgba(44, 43, 42, 0.8); + $theme-color-green-high-transp: rgba(7, 60, 23, 1); + $theme-color-yellow-high-transp: rgba(88, 75, 6, 1); + $theme-color-red-high-transp: rgba(87, 18, 17, 1); + $theme-color-dark-red-med-transp: rgba(255, 103, 0, 0.3); + $theme-color-grey-low-transp: rgba(87, 87, 87, 0.07); + $theme-color-grey-med-transp: rgba(87, 87, 87, 0.2); + $theme-color-grey-high-transp: rgba(87, 87, 87, 0.35); + $theme-color-blue-low-transp: rgba(37, 85, 124, 0.2); + $theme-color-light-black-low-transp: rgba(221, 221, 221, 0.1); + $theme-color-light-black-med-transp: rgba(138, 138, 138, 0.57); + $theme-color-violet-med-transp: rgba(89, 60, 143, 0.57); + $theme-color-dark-black-low-transp: rgba(255, 255, 255, 0.15); + $theme-color-dark-blue-high-transp: rgba(76, 128, 165, 0.35); +} + + + $primary-font-color: $theme-color-black; $primary-theme-color: $theme-color-blue; $secondary-theme-color: $theme-color-orange; From 562e4b512a5beeab6d711606946711f0aa093095 Mon Sep 17 00:00:00 2001 From: reeshi-18 Date: Wed, 7 Dec 2022 18:32:19 +0530 Subject: [PATCH 2/9] iteration2 changes --- src/App.vue | 2 +- src/styles/modules/_footer.scss | 2 +- src/styles/modules/_previewModal.scss | 4 +++- src/styles/partials/_variables.scss | 9 +++++---- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/App.vue b/src/App.vue index ffd1080..98c7dd8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -32,7 +32,7 @@ export default { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; - color: #2c3e50; + color: $theme-color-grey-blue; font-size: 1vw; overflow: hidden; z-index: 1; diff --git a/src/styles/modules/_footer.scss b/src/styles/modules/_footer.scss index 0017975..3a4040b 100644 --- a/src/styles/modules/_footer.scss +++ b/src/styles/modules/_footer.scss @@ -17,7 +17,7 @@ } .adminFooterTitle { - color: #191919 !important; + color: $theme-color-black19 !important; text-align: left; vertical-align: middle; font-family: $primary-font-family; diff --git a/src/styles/modules/_previewModal.scss b/src/styles/modules/_previewModal.scss index 35da568..88cde51 100644 --- a/src/styles/modules/_previewModal.scss +++ b/src/styles/modules/_previewModal.scss @@ -45,15 +45,17 @@ font-family: $primary-font-family; font-size: 1.5rem; border-bottom: 0.0625rem solid rgba(87, 87, 87, 0.7); + background-color: $theme-color-white; } .modal-close-button { outline: none; border: none; - background-color: white; + background-color: $theme-color-white; } .modal-body { padding: 4rem calc(10rem * 1440 / 1980); + background-color: $theme-color-white; } \ No newline at end of file diff --git a/src/styles/partials/_variables.scss b/src/styles/partials/_variables.scss index 5926883..614b99d 100644 --- a/src/styles/partials/_variables.scss +++ b/src/styles/partials/_variables.scss @@ -28,6 +28,7 @@ $theme-color-light-grey: #999999; $theme-color-off-white: #dddddd; $theme-color-light-grey-d7: #d7d7d7; $theme-color-white-grey: #b3b3b3; +$theme-color-grey-blue: #2c3e50; $theme-color-dark-blue: #355dc5; $theme-color-light-blue: #d6def3; $theme-color-red: #b83428; @@ -61,14 +62,14 @@ $theme-color-dark-blue-high-transp: rgba(76, 128, 165, 0.75); $theme-color-orange: #ff9458; $theme-color-dark-orange: #e44f26; $theme-color-light-orange: #cc652b; - $theme-color-grey57: #575757; - $theme-color-grey39: #393939; + $theme-color-grey57: #747474; + $theme-color-grey39: #a5a5a5; $theme-color-grey: #555555; $theme-color-dark-grey: #444444; $theme-color-light-grey: #999999; $theme-color-off-white: #dddddd; - $theme-color-light-grey-d7: #d7d7d7; - $theme-color-white-grey: #b3b3b3; + $theme-color-light-grey-d7: #3d3d3d; + $theme-color-white-grey: #909090; $theme-color-dark-blue: #2e9cca; $theme-color-light-blue: #808cad; $theme-color-red: #aa3126; From 37181a4cddc4938dc8bc447c0f00324ca5c692e5 Mon Sep 17 00:00:00 2001 From: reeshi-18 Date: Thu, 8 Dec 2022 01:23:09 +0530 Subject: [PATCH 3/9] iteration3 changes made --- src/assets/labs-logo-dark.svg | 4 ++++ src/assets/main-logo-dark.svg | 3 +++ src/assets/sdslabs-logo-dark.svg | 4 ++++ src/assets/sdslabs-logo-dark.svg:Zone.Identifier | 3 +++ src/components/Footer.vue | 10 +++++++++- src/components/Navbar.vue | 5 ++--- src/constants/images.js | 3 +++ src/layouts/Auth.vue | 12 +++++------- src/styles/modules/_adminNotifications.scss | 3 ++- src/styles/modules/_statsNavbar.scss | 2 +- src/styles/partials/_variables.scss | 16 ++++++++++------ 11 files changed, 46 insertions(+), 19 deletions(-) create mode 100644 src/assets/labs-logo-dark.svg create mode 100644 src/assets/main-logo-dark.svg create mode 100644 src/assets/sdslabs-logo-dark.svg create mode 100644 src/assets/sdslabs-logo-dark.svg:Zone.Identifier diff --git a/src/assets/labs-logo-dark.svg b/src/assets/labs-logo-dark.svg new file mode 100644 index 0000000..d0e9cc7 --- /dev/null +++ b/src/assets/labs-logo-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/main-logo-dark.svg b/src/assets/main-logo-dark.svg new file mode 100644 index 0000000..461b3d7 --- /dev/null +++ b/src/assets/main-logo-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/sdslabs-logo-dark.svg b/src/assets/sdslabs-logo-dark.svg new file mode 100644 index 0000000..bc98fb6 --- /dev/null +++ b/src/assets/sdslabs-logo-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/sdslabs-logo-dark.svg:Zone.Identifier b/src/assets/sdslabs-logo-dark.svg:Zone.Identifier new file mode 100644 index 0000000..a857cc9 --- /dev/null +++ b/src/assets/sdslabs-logo-dark.svg:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=https://files.slack.com/files-pri/T025QJXB7-F04E1278NNA/download/labs.svg?origin_team=T025QJXB7 diff --git a/src/components/Footer.vue b/src/components/Footer.vue index 9856d18..11bf695 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -10,7 +10,10 @@
- + + + +
@@ -23,15 +26,20 @@