Greatly simplified all of the logic; moved the JS to a separate file
This commit is contained in:
Sumner Evans
parent
a18c421354
commit
582adec6a4
11 changed files with 105 additions and 121 deletions
58
static/dark_theme/dark_theme.js
Normal file
58
static/dark_theme/dark_theme.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
function ThemeManager(options) {
|
||||
var defaultTheme = options.defaultTheme;
|
||||
var enableAutoDetectTheme = options.enableAutoDetectTheme.toLowerCase() === 'true';
|
||||
|
||||
var darkThemeMatch = window.matchMedia(
|
||||
defaultTheme === 'light' ?
|
||||
'(prefers-color-scheme: dark)' :
|
||||
'(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)'
|
||||
);
|
||||
|
||||
function setEnabledAndDisableMediaQuery(elementId, enabled) {
|
||||
var element = document.getElementById(elementId);
|
||||
element.disabled = !enabled;
|
||||
element.media = '';
|
||||
}
|
||||
|
||||
function detectThemeAndSwitchStyle() {
|
||||
var theme = localStorage.getItem('themeOverride');
|
||||
if (theme !== 'light' && theme !== 'dark') {
|
||||
if (theme === 'browser' || enableAutoDetectTheme) {
|
||||
theme = darkThemeMatch.matches ? 'dark' : 'light';
|
||||
} else {
|
||||
theme = defaultTheme;
|
||||
}
|
||||
}
|
||||
|
||||
// (Dis|En)able the styles according to the user's desired theme. Get rid
|
||||
// of the media queries, since we are handling it in JS.
|
||||
setEnabledAndDisableMediaQuery('dark-theme-style', theme === 'dark');
|
||||
setEnabledAndDisableMediaQuery('pygments-dark-theme', theme === 'dark');
|
||||
setEnabledAndDisableMediaQuery('pygments-light-theme', theme === 'light');
|
||||
|
||||
if (theme === 'dark') {
|
||||
document.body.classList.add('dark-theme');
|
||||
document.body.classList.remove('light-theme');
|
||||
} else {
|
||||
document.body.classList.add('light-theme');
|
||||
document.body.classList.remove('dark-theme');
|
||||
}
|
||||
}
|
||||
|
||||
this.switch = function(themeOverride) {
|
||||
localStorage.setItem('themeOverride', themeOverride);
|
||||
detectThemeAndSwitchStyle();
|
||||
};
|
||||
|
||||
// If there's an override, then apply it, otherwise, don't incur the
|
||||
// overhead of determining whether or not to switch themes.
|
||||
var themeOverride = localStorage.getItem('themeOverride');
|
||||
if (themeOverride === 'light' || themeOverride === 'dark') {
|
||||
detectThemeAndSwitchStyle();
|
||||
}
|
||||
|
||||
// If theme auto-detection is enabled, then add a listenr on the matchMedia.
|
||||
darkThemeMatch.addListener(detectThemeAndSwitchStyle);
|
||||
}
|
||||
|
||||
window.theme = new ThemeManager(document.getElementById('dark-theme-script').dataset);
|
||||
1
static/dark_theme/dark_theme.min.js
vendored
Normal file
1
static/dark_theme/dark_theme.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
function ThemeManager(e){var t=e.defaultTheme,r="true"===e.enableAutoDetectTheme.toLowerCase(),a=window.matchMedia("light"===t?"(prefers-color-scheme: dark)":"(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)");function d(e,t){var r=document.getElementById(e);r.disabled=!t,r.media=""}function m(){var e=localStorage.getItem("themeOverride");"light"!==e&&"dark"!==e&&(e="browser"===e||r?a.matches?"dark":"light":t),d("dark-theme-style","dark"===e),d("pygments-dark-theme","dark"===e),d("pygments-light-theme","light"===e),"dark"===e?(document.body.classList.add("dark-theme"),document.body.classList.remove("light-theme")):(document.body.classList.add("light-theme"),document.body.classList.remove("dark-theme"))}this.switch=function(e){localStorage.setItem("themeOverride",e),m()};var o=localStorage.getItem("themeOverride");"light"!==o&&"dark"!==o||m(),a.addListener(m)}window.theme=new ThemeManager(document.getElementById("dark-theme-script").dataset);
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
//
|
||||
// Dark Theme CSS that gets activated when the <html> element has the
|
||||
// .dark-theme class.
|
||||
//
|
||||
// To use this, add the .dark-theme class to the <html> element, and add the
|
||||
// following <link>:
|
||||
//
|
||||
// <link rel="stylesheet" type="text/css"
|
||||
// href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-class.min.css">
|
||||
//
|
||||
|
||||
html.dark-theme {
|
||||
@import (multiple) "dark-theme-styles.less";
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
//
|
||||
// Dark Theme CSS for use inside of a media query. This will apply the dark
|
||||
// style except when overriden by a .light-theme class on the <html> tag.
|
||||
//
|
||||
// To use this, add a <link> like the following (change the media query how you
|
||||
// want):
|
||||
//
|
||||
// <link rel="stylesheet" type="text/css"
|
||||
// media="(prefers-color-scheme: dark)"
|
||||
// href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stylesheet/dark-theme-class.min.css">
|
||||
//
|
||||
|
||||
html:not(.light-theme) {
|
||||
@import (multiple) "dark-theme-styles.less";
|
||||
}
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
//
|
||||
// Dark Theme CSS styles.
|
||||
//
|
||||
// Don't directly include this file, instead, use the `dark-theme-class` or
|
||||
// `dark-theme-override` files.
|
||||
//
|
||||
|
||||
@import "variables.less";
|
||||
|
||||
1
static/stylesheet/dark-theme.min.css
vendored
Normal file
1
static/stylesheet/dark-theme.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
body{background-color:#333;color:#eee}hr{color:#222}aside,hr{background-color:#222}aside{color:#fff}aside form.navbar-search input#tipue_search_input{background-color:#1a1a1a;color:#eee}main nav{border-bottom-color:#222}main .translations a,main nav a{border-color:#222}main article kbd{background-color:#080808;color:#eee}main article blockquote,main article pre{border-left:8px solid #ffffff33}main article :not(pre)>code{background-color:#080808;border-color:#000}main article div#tipue_search_content .tipue_search_result span.tipue_search_content_bold{color:#fff}main article section#isso-thread .auth-section p.input-wrapper input,main article section#isso-thread .notification-section input,main article section#isso-thread div.textarea{background:#1a1a1a;color:#eee}main article section#isso-thread>h4{color:#eee}main article section#isso-thread .isso-postbox>.form-wrapper .preview{background:repeating-linear-gradient(-45deg,#222,#222 10px,#1a1a1a 0,#1a1a1a 20px)}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .author{color:#eee}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .note,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .spacer,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.parent,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.permalink{color:#999}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .note:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .spacer:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.parent:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.permalink:hover{color:#eee}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-footer a:hover{text-shadow:#242121 0 0 1px!important}main footer{border-top-color:#222}div.related-posts{border-color:#222}div.admonition.attention,div.admonition.caution{color:#fbda7a;background-color:#4a3900}div.admonition.danger,div.admonition.error{color:#ebadb3;background-color:#28070a}div.admonition.hint{color:#7abaff;background-color:#001933}div.admonition.important,div.admonition.note{color:#a8eab7;background-color:#122b18}div.admonition.tip{color:#7abaff;background-color:#001933}div.admonition.warning{color:#fbda7a;background-color:#4a3900}
|
||||
|
|
@ -134,10 +134,6 @@ main {
|
|||
border-right: @nav-border-color 1px solid;
|
||||
}
|
||||
|
||||
:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue