2022-04-20 04:38:24 -04:00
'use strict' ;
2019-08-15 12:29:55 -04:00
var toggle _theme = document . getElementById ( 'toggle_theme' ) ;
2022-05-05 21:46:59 -04:00
toggle _theme . href = 'javascript:void(0)' ;
2019-05-05 08:34:27 -04:00
toggle _theme . addEventListener ( 'click' , function ( ) {
2022-04-20 05:49:05 -04:00
var dark _mode = document . body . classList . contains ( 'light-theme' ) ;
2019-05-05 08:34:27 -04:00
set _mode ( dark _mode ) ;
2022-05-05 21:46:59 -04:00
helpers . storage . set ( 'dark_mode' , dark _mode ? 'dark' : 'light' ) ;
2019-06-15 11:08:06 -04:00
2022-05-05 21:46:59 -04:00
helpers . xhr ( 'GET' , '/toggle_theme?redirect=false' , { } , { } ) ;
2019-05-05 08:34:27 -04:00
} ) ;
2022-05-05 21:46:59 -04:00
// Handles theme change event caused by other tab
addEventListener ( 'storage' , function ( e ) {
2019-08-15 12:29:55 -04:00
if ( e . key === 'dark_mode' ) {
update _mode ( e . newValue ) ;
2019-05-05 08:34:27 -04:00
}
} ) ;
2022-05-05 21:46:59 -04:00
addEventListener ( 'DOMContentLoaded' , function ( ) {
2021-12-26 07:53:32 -05:00
const dark _mode = document . getElementById ( 'dark_mode_pref' ) . textContent ;
2022-05-05 21:46:59 -04:00
// Update storage if dark mode preference changed on preferences page
helpers . storage . set ( 'dark_mode' , dark _mode ) ;
2021-12-26 07:53:32 -05:00
update _mode ( dark _mode ) ;
2019-08-15 12:29:55 -04:00
} ) ;
2020-03-02 10:33:47 -05:00
2022-05-05 21:46:59 -04:00
var darkScheme = matchMedia ( '(prefers-color-scheme: dark)' ) ;
var lightScheme = matchMedia ( '(prefers-color-scheme: light)' ) ;
2020-03-02 10:33:47 -05:00
darkScheme . addListener ( scheme _switch ) ;
lightScheme . addListener ( scheme _switch ) ;
function scheme _switch ( e ) {
2022-05-05 21:46:59 -04:00
// ignore this method if we have a preference set
if ( helpers . storage . get ( 'dark_mode' ) ) return ;
if ( ! e . matches ) return ;
2022-04-20 05:49:05 -04:00
if ( e . media . includes ( 'dark' ) ) {
2022-05-05 21:46:59 -04:00
set _mode ( true ) ;
2022-04-20 05:49:05 -04:00
} else if ( e . media . includes ( 'light' ) ) {
2022-05-05 21:46:59 -04:00
set _mode ( false ) ;
2020-03-02 10:33:47 -05:00
}
}
2019-08-15 12:29:55 -04:00
function set _mode ( bool ) {
2019-05-05 08:34:27 -04:00
if ( bool ) {
2020-11-15 22:19:41 -05:00
// dark
2019-05-05 08:34:27 -04:00
toggle _theme . children [ 0 ] . setAttribute ( 'class' , 'icon ion-ios-sunny' ) ;
2020-11-15 22:19:41 -05:00
document . body . classList . remove ( 'no-theme' ) ;
document . body . classList . remove ( 'light-theme' ) ;
document . body . classList . add ( 'dark-theme' ) ;
2019-05-05 08:34:27 -04:00
} else {
2020-11-15 22:19:41 -05:00
// light
2019-05-05 08:34:27 -04:00
toggle _theme . children [ 0 ] . setAttribute ( 'class' , 'icon ion-ios-moon' ) ;
2020-11-15 22:19:41 -05:00
document . body . classList . remove ( 'no-theme' ) ;
document . body . classList . remove ( 'dark-theme' ) ;
document . body . classList . add ( 'light-theme' ) ;
2019-05-05 08:34:27 -04:00
}
}
2019-08-15 12:29:55 -04:00
function update _mode ( mode ) {
if ( mode === 'true' /* for backwards compatibility */ || mode === 'dark' ) {
// If preference for dark mode indicated
set _mode ( true ) ;
}
2022-04-27 08:01:34 -04:00
else if ( mode === 'false' /* for backwards compatibility */ || mode === 'light' ) {
// If preference for light mode indicated
set _mode ( false ) ;
}
2022-05-05 21:46:59 -04:00
else if ( document . getElementById ( 'dark_mode_pref' ) . textContent === '' && matchMedia ( '(prefers-color-scheme: dark)' ) . matches ) {
2019-08-15 12:29:55 -04:00
// If no preference indicated here and no preference indicated on the preferences page (backend), but the browser tells us that the operating system has a dark theme
set _mode ( true ) ;
}
// else do nothing, falling back to the mode defined by the `dark_mode` preference on the preferences page (backend)
}