feat: new dark theme

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 {
       <React.Fragment>
         <Navbar openModal={(modal) => this.setState({ [modal]: true })}/>
         <React.Suspense fallback={renderLoader()}>
-          <Modal closeTimeoutMS={300} id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
+          <Modal closeTimeoutMS={300} id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
             <Main modalClose={() => this.setState({ mainModal: false })} />
           </Modal>
-          <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
+          <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
             <Update modalClose={() => this.setState({ updateModal: false })} />
          </Modal>
-         <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className={this.state.modalClassList} overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
+         <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
             <Welcome modalClose={() => this.closeWelcome()} />
           </Modal>
           {/* <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>

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

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 {

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

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;
 

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;
-}
+}

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;