Permalink
Comparing changes
Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.
Open a pull request
Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
...
Able to merge. These branches can be automatically merged.
- 7 commits
- 2 files changed
- 1 contributor
Showing with 97 additions and 2 deletions.
- +35 −1 includes/Hooks.php
- +62 −1 resources/ext.DarkMode.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -79,6 +79,21 @@ public function onSkinAddFooterLinks( Skin $skin, string $key, array &$footerIte | ||
| ), | ||
| $this->getLinkText( $skin ) | ||
| ); | ||
| // XXX: | ||
| $syncPref = $skin->getUser()->isAnon() | ||
| ? (bool)$skin->getRequest()->getCookie( 'darkmodesync' ) | ||
| : $this->userOptionsLookup->getBoolOption( $skin->getUser(), 'darkmodesync' ); | ||
| $footerItems['darkmode-sync'] = Html::element( | ||
| 'a', | ||
| [ | ||
| 'href' => '#', | ||
| 'class' => 'ext-darkmode-sync-link', | ||
| ], | ||
| $syncPref ? 'Synced with system' : 'Not synced with system' | ||
| ); | ||
| } | ||
| /** | ||
| @@ -168,6 +183,13 @@ public function onGetPreferences( $user, &$preferences ) { | ||
| 'type' => 'api', | ||
| 'default' => 0, | ||
| ]; | ||
| // XXX: | ||
| $preferences['darkmodesync'] = [ | ||
| 'type' => 'api', | ||
| 'default' => 0, | ||
| ]; | ||
| } | ||
| /** | ||
| @@ -176,7 +198,11 @@ public function onGetPreferences( $user, &$preferences ) { | ||
| * @return bool | ||
| */ | ||
| private static function shouldHaveDarkMode( Skin $skin ): bool { | ||
| return $skin->getSkinName() !== 'minerva'; | ||
| // return $skin->getSkinName() !== 'minerva'; | ||
| // XXX: | ||
| return true; | ||
| } | ||
| /** | ||
| @@ -191,6 +217,14 @@ private function isDarkModeActive( IContextSource $context ): bool { | ||
| // On usedarkmode=0 or usedarkmode=1 overwrite the user setting. | ||
| return (bool)$var; | ||
| } | ||
| // XXX: | ||
| if ( $context->getUser()->isAnon() ) { | ||
| return (bool)$context->getRequest()->getCookie( 'darkmode' ); | ||
| } | ||
| // On no parameter use the user setting. | ||
| return $this->userOptionsLookup->getBoolOption( $context->getUser(), 'darkmode' ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -2,9 +2,34 @@ | ||
| * Some code adapted from the enwiki gadget https://w.wiki/5Ktj | ||
| */ | ||
| $( () => { | ||
| // XXX: | ||
| const isAnon = mw.user.isAnon(); | ||
| let syncPref = isAnon ? mw.cookie.get( 'darkmodesync' ) : mw.user.options.get( 'darkmodesync' ); | ||
| if ( syncPref != null ) { | ||
| syncPref = String( syncPref ); | ||
| } | ||
| const $darkModeSyncLink = $( '.ext-darkmode-sync-link' ); | ||
| const setSyncPref = ( value ) => { | ||
| if ( syncPref !== value ) { | ||
| syncPref = value; | ||
| if ( isAnon ) { | ||
| mw.cookie.set( 'darkmodesync', value ); | ||
| } else { | ||
| new mw.Api().saveOption( 'darkmodesync', value ); | ||
| } | ||
| $darkModeSyncLink.text( value === '1' ? 'Synced with system' : 'Not synced with system' ); | ||
| } | ||
| }; | ||
| const $darkModeLink = $( '.ext-darkmode-link' ); | ||
| $darkModeLink.on( 'click', ( e ) => { | ||
| $darkModeLink.on( 'click', ( e, data ) => { | ||
| e.preventDefault(); | ||
| // NOTE: this must be on <html> element because the CSS filter creates | ||
| @@ -35,5 +60,41 @@ $( () => { | ||
| // Update the mobile theme-color | ||
| $( 'meta[name="theme-color"]' ).attr( 'content', darkMode ? '#000000' : '#eaecf0' ); | ||
| // XXX: | ||
| if ( isAnon ) { | ||
| mw.cookie.set( 'darkmode', darkMode ? '1' : '0' ); | ||
| } | ||
| if ( !data?.calledFromSync ) { | ||
| setSyncPref( '0' ); | ||
| } | ||
| } ); | ||
| // XXX: | ||
| const doSync = () => { | ||
| const isDarkMode = document.documentElement.classList.contains( 'client-darkmode' ); | ||
| const prefersDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches; | ||
| if ( prefersDarkMode !== isDarkMode ) { | ||
| $darkModeLink.trigger( 'click', { calledFromSync: true } ); | ||
| } | ||
| }; | ||
| $darkModeSyncLink.on( 'click', ( e ) => { | ||
| e.preventDefault(); | ||
| if ( syncPref === '1' ) { | ||
| setSyncPref( '0' ); | ||
| } else { | ||
| doSync(); | ||
| setSyncPref( '1' ); | ||
| } | ||
| } ); | ||
| if ( syncPref === '1' ) { | ||
| doSync(); | ||
| } | ||
| } ); | ||