From b7656fa951687f8fd1f76d312f7348d819eef966 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 20 Mar 2021 16:29:21 +0000 Subject: [PATCH] feat: new dark theme --- src/components/modals/Modals.jsx | 20 ++--------- src/components/modals/main/scss/index.scss | 10 +++--- .../modals/main/scss/settings/_dropdown.scss | 5 ++- .../modals/main/scss/settings/_main.scss | 30 ++--------------- src/components/modals/welcome/welcome.scss | 7 ---- .../background/scss/_photoinformation.scss | 12 +++---- .../widgets/navbar/scss/_notes.scss | 4 +-- src/scss/_themes.scss | 33 +++++++++++++++++++ src/scss/_variables.scss | 6 ++++ src/scss/index.scss | 13 +------- 10 files changed, 58 insertions(+), 82 deletions(-) create mode 100644 src/scss/_themes.scss diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx index bb5bddf9..b9a816ad 100644 --- a/src/components/modals/Modals.jsx +++ b/src/components/modals/Modals.jsx @@ -29,20 +29,6 @@ export default class Modals extends React.PureComponent { welcomeModal: true }); } - - // dark theme support for modals and info card - let modalClassList = 'Modal'; - let tooltipClassList = 'infoCard'; - - if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') { - modalClassList += ' dark'; - tooltipClassList += ' dark'; - } - - this.setState({ - modalClassList: modalClassList, - tooltipClassList: tooltipClassList - }); } closeWelcome() { @@ -57,13 +43,13 @@ export default class Modals extends React.PureComponent { this.setState({ [modal]: true })}/> - this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}> + this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
this.setState({ mainModal: false })} /> - this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}> + this.setState({ updateModal: false })} isOpen={this.state.updateModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}> this.setState({ updateModal: false })} /> - this.closeWelcome()} isOpen={this.state.welcomeModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}> + this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}> this.closeWelcome()} /> {/* this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index 950d047e..e426e877 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -6,8 +6,8 @@ @import 'settings/dropdown'; .Modal { - color: map-get($modal, 'text'); - background-color: map-get($modal, 'background'); + color: var(--modal-text); + background-color: var(--background); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); border: none; opacity: 1; @@ -113,7 +113,7 @@ ul.sidebar { margin: 0; padding-left: 0; height: 100vh; - background: #f0f0f0; + background: var(--sidebar); left: 0; border-radius: 12px 0 0 12px; text-align: left; @@ -163,7 +163,7 @@ li { } .tab-list-active { - background: rgba(219, 219, 219, 0.72); + background: var(--tab-active); } @media only screen and (max-height: 898px) { @@ -190,7 +190,7 @@ li { .tab-list-item { &:hover { - background: rgba(219, 219, 219, 0.8); + background: var(--tab-active); } } diff --git a/src/components/modals/main/scss/settings/_dropdown.scss b/src/components/modals/main/scss/settings/_dropdown.scss index d3b133a4..dab66f4d 100644 --- a/src/components/modals/main/scss/settings/_dropdown.scss +++ b/src/components/modals/main/scss/settings/_dropdown.scss @@ -2,12 +2,11 @@ select { margin-left: 10px; width: 120px; - color: map-get($modal, 'text'); - background: #f0f0f0; + color: var(--modal-text); + background: var(--sidebar); border: none; padding: 10px 10px; border-radius: 5px; - } select#language { diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index 1184dc85..2b327ca3 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -5,8 +5,8 @@ input { &[type=text] { width: 200px; - color: black; - background: #f0f0f0; + color: var(--modal-text); + background: var(--sidebar); border: none; padding: 10px 10px; border-radius: 5px; @@ -135,32 +135,6 @@ input[type=color]::-moz-color-swatch { vertical-align: middle; } -// Dark Theme -.dark { - - #blurRange, - #brightnessRange { - background-color: #535c68; - } - - #customBackground, - #backgroundAPI, - #searchEngine, - #language, - #greetingName, - #customSearchEngine { - color: white; - } - - .choices { - background-color: white; - } - - .modalLink { - color: #3498db; - } -} - .nodropdown { cursor: default; } diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss index 2f0e2df9..444a7594 100644 --- a/src/components/modals/welcome/welcome.scss +++ b/src/components/modals/welcome/welcome.scss @@ -1,12 +1,5 @@ @import '../main/scss/index.scss'; -.dark { - h2.subtitle, - svg { - color: white !important; - } -} - .welcomeModalText { line-height: 2px; diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss index d1afb10c..49cbfa5d 100644 --- a/src/components/widgets/background/scss/_photoinformation.scss +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -25,9 +25,9 @@ .infoCard { display: none; - background: #fff; + background: var(--background); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); - color: #000; + color: var(--modal-text); position: fixed; bottom: 3.25rem; left: 0.7em; @@ -64,7 +64,7 @@ hr { height: 3px; - background: #2d3436; + background: var(--photo-info); outline: none; border: none; } @@ -72,8 +72,4 @@ &:hover { display: block !important; } -} - -.dark hr { - background-color: white !important; -} +} \ No newline at end of file diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss index eff246c5..a8df8901 100644 --- a/src/components/widgets/navbar/scss/_notes.scss +++ b/src/components/widgets/navbar/scss/_notes.scss @@ -10,8 +10,8 @@ .notescontainer { padding: 15px; visibility: hidden; - background-color: #fff; - color: #000; + background-color: var(--background); + color: var(--modal-text); text-align: center; border-radius: 12px; position: absolute; diff --git a/src/scss/_themes.scss b/src/scss/_themes.scss new file mode 100644 index 00000000..2760ea93 --- /dev/null +++ b/src/scss/_themes.scss @@ -0,0 +1,33 @@ +@import 'variables'; + +$main-text: map-get($theme-colours, 'main'); +$modal-text: map-get($modal, 'text'); +$background: map-get($modal, 'background'); +$sidebar: map-get($modal, 'sidebar'); +$tab-active: map-get($modal, 'tab-active'); +$photo-info: map-get($theme-colours, 'photo-info'); + +$main-text-dark: map-get($theme-colours, 'secondary'); +$modal-text-dark: map-get($theme-colours, 'main'); +$background-dark: map-get($modal, 'background-dark'); +$sidebar-dark: map-get($modal, 'sidebar-dark'); +$tab-active-dark: map-get($modal, 'tab-active-dark'); +$photo-info-dark: map-get($theme-colours, 'photo-info-dark'); + +:root { + --main-text: #{$main-text}; + --modal-text: #{$modal-text}; + --background: #{$background}; + --sidebar: #{$sidebar}; + --tab-active: #{$tab-active}; + --photo-info: #{$photo-info}; +} + +.dark { + --main-text: #{$main-text-dark}; + --modal-text: #{$modal-text-dark}; + --background: #{$background-dark}; + --sidebar: #{$sidebar-dark}; + --tab-active: #{$tab-active-dark}; + --photo-info: #{$photo-info-dark}; +} \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index aa72d24f..fcd62d4e 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -5,6 +5,8 @@ $theme-colours: ( 'main': rgba(242, 243, 244, 1), 'secondary': rgba(0, 0, 0, 1), 'main-text-color': rgba(242, 243, 244, 1), + 'photo-info': #2d3436, + 'photo-info-dark': #ffff ); $modal: ( @@ -14,6 +16,10 @@ $modal: ( 'tab-underline': rgba(204, 204, 204, 1), 'tab-underline-active': rgba(0, 0, 0, 1), 'border-radius': 12px, + 'sidebar': #f0f0f0, + 'tab-active': rgba(219, 219, 219, 0.72), + 'sidebar-dark': #353b48, + 'tab-active-dark': rgba(65, 71, 84, .9) ); $marketplace: ( diff --git a/src/scss/index.scss b/src/scss/index.scss index cb176a3f..806936c1 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,22 +1,11 @@ @import 'variables'; @import 'mixins'; +@import 'themes'; @import 'modules/toast'; @import 'modules/marketplace'; @import 'modules/buttons'; -:root { - --main-text: map-get($theme-colours, 'main'); - --modal-text: map-get($modal, 'text'); - --background: map-get($modal, 'background'); -} - -.dark { - --main-text: map-get($theme-colours, 'secondary'); - --modal-text: map-get($theme-colours, 'main'); - --background: map-get($modal, 'background-dark'); -} - body { background: #2f3640; margin: 0;