diff --git a/src/App.jsx b/src/App.jsx
index 934baf53..22f44d6b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -41,7 +41,12 @@ export default class App extends React.PureComponent {
   render() {
     if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings();
 
-    const modalClassList = (localStorage.getItem('darkTheme') === 'true') ? 'Modal dark' : 'Modal'; // Modal features
+    let modalClassList = 'Modal'; // Modal features
+    let tooltipClassList = 'tooltiptext';
+    if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') {
+      modalClassList = 'Modal dark';
+      tooltipClassList = 'tooltiptext dark';
+    }
     const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay';
 
     const en = require('./translations/en.json'); // User language
@@ -70,7 +75,7 @@ export default class App extends React.PureComponent {
             <span id='credit' style={{'display': 'none'}}></span>
             <div id='backgroundCredits' className='tooltip'>
               <RoomIcon className='locationicon'/>
-              <span className='tooltiptext' id='location'/>
+              <span className={tooltipClassList} id='location'/>
             </div>
           </div>
           <Maximise/>
diff --git a/src/components/modals/Settings.jsx b/src/components/modals/Settings.jsx
index e673e695..62ef75f3 100644
--- a/src/components/modals/Settings.jsx
+++ b/src/components/modals/Settings.jsx
@@ -19,7 +19,7 @@ export default class Settings extends React.PureComponent {
     document.getElementById('greetingName').value = localStorage.getItem('greetingName');
     document.getElementById('language').value = localStorage.getItem('language');
 
-    if (localStorage.getItem('darkTheme') === 'true') {
+    if (document.getElementById('modal').classList.contains('dark')) {
       const choices = document.getElementsByClassName('choices');
       for (let i = 0; i < choices.length; i++) choices[i].style.backgroundColor = '#2f3542';
     }
@@ -102,6 +102,7 @@ export default class Settings extends React.PureComponent {
             <Checkbox name='webp' text={this.props.language.experimental.webp} />
             <Checkbox name='animations' text={this.props.language.experimental.animations} />
             <Checkbox name='voiceSearch' text={this.props.language.experimental.voicesearch} newFeature={true} />
+            <Checkbox name='brightnessTime' text='Automatic Night Mode' newFeature={true} />
           </Section>
           <LanguageSettings language={this.props.language} />
 
diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx
index 2e85c503..2c6c8ace 100644
--- a/src/components/widgets/Background.jsx
+++ b/src/components/widgets/Background.jsx
@@ -26,11 +26,13 @@ export default class Background extends React.PureComponent {
       }
     }
     const background = typeof gradientSettings === 'object' && gradientSettings !== null ? this.gradientStyleBuilder(gradientSettings) : `background-image: url(${url});`;
+    let brightness = localStorage.getItem('brightness');
+    if (localStorage.getItem('brightnessTime') && new Date().getHours() > 18) brightness = 75;
 
     document.querySelector('#backgroundImage').setAttribute(
       'style',
       `${background};
-      -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%);`
+      -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
     );
 
     if (credit === 'false') document.querySelector('#credits').style.display = 'none'; // Hide the credit
diff --git a/src/scss/modules/_credit.scss b/src/scss/modules/_credit.scss
index c6cd468f..c88082e3 100644
--- a/src/scss/modules/_credit.scss
+++ b/src/scss/modules/_credit.scss
@@ -75,6 +75,10 @@
     opacity: 0;
     transition: opacity 1s;
     box-sizing: border-box;
+    &.dark {
+      background-color: #2f3542 !important;
+      color: white !important;
+    }
   }
 
   &:hover .tooltiptext {