mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-22 00:07:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Automatic night mode and dark theme location tooltip

Browse Source
This commit is contained in:
David Ralph
2020-10-14 14:56:56 +01:00
parent 26f5e0b0e5
commit 205a56f086
4 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.jsx
View File

@@ -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/>

3
src/components/modals/Settings.jsx
View File

@@ -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} />

4
src/components/widgets/Background.jsx
View File

@@ -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

4
src/scss/modules/_credit.scss
View File

@@ -75,6 +75,10 @@
opacity: 0;
transition: opacity 1s;
box-sizing: border-box;
&.dark {
background-color: #2f3542 !important;
color: white !important;
}
}
&:hover .tooltiptext {