2021-04-21 03:42:45 +00:00
|
|
|
/**
|
2021-04-21 15:32:44 +00:00
|
|
|
* @param {Window} window
|
2021-04-21 03:42:45 +00:00
|
|
|
* @return {void}
|
|
|
|
*/
|
|
|
|
function initThemeSettings( window ) {
|
|
|
|
const userTheme = window.mw.user.options.get( 'CitizenThemeUser' ),
|
|
|
|
setLocalStorage = ( theme ) => {
|
|
|
|
try {
|
|
|
|
localStorage.setItem( 'skin-citizen-theme', theme );
|
|
|
|
} catch ( e ) {}
|
|
|
|
};
|
|
|
|
|
|
|
|
let theme = ( userTheme !== null ) ? userTheme : 'auto';
|
|
|
|
|
|
|
|
if ( theme === 'auto' ) {
|
|
|
|
const prefersDark = window.matchMedia( '(prefers-color-scheme: dark)' );
|
|
|
|
theme = prefersDark.matches ? 'dark' : 'light';
|
|
|
|
|
|
|
|
// Monitor prefers-color-scheme changes
|
|
|
|
prefersDark.addEventListener( 'change', ( event ) => {
|
|
|
|
setLocalStorage( event.matches ? 'dark' : 'light' );
|
|
|
|
} );
|
|
|
|
}
|
|
|
|
|
|
|
|
setLocalStorage( theme );
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2021-04-21 15:32:44 +00:00
|
|
|
* @param {Window} window
|
2021-04-21 03:42:45 +00:00
|
|
|
* @return {void}
|
|
|
|
*/
|
|
|
|
function initTheme( window ) {
|
|
|
|
if ( typeof window.mw !== 'undefined' ) {
|
|
|
|
if ( window.localStorage.getItem( 'skin-citizen-theme' ) === null ) {
|
|
|
|
initThemeSettings( window );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
init: initTheme
|
|
|
|
};
|