mirror of
https://github.com/hkalexling/Mango.git
synced 2025-08-03 03:15:31 -04:00
Add dark mode support
This commit is contained in:
Alex Ling
parent
c6c908953b
commit
36e2b2bfaf
@ -60,6 +60,7 @@ $('#page-select').change(function(){
|
||||
function showControl(idx) {
|
||||
$('#page-select').val(idx);
|
||||
UIkit.modal($('#modal-sections')).show();
|
||||
styleModal();
|
||||
}
|
||||
function jumpTo(page) {
|
||||
var ary = window.location.pathname.split('/');
|
||||
|
||||
76
public/js/theme.js
Normal file
76
public/js/theme.js
Normal file
@ -0,0 +1,76 @@
|
||||
const getTheme = () => {
|
||||
var theme = localStorage.getItem('theme');
|
||||
if (!theme) theme = 'light';
|
||||
return theme;
|
||||
};
|
||||
|
||||
const saveTheme = theme => {
|
||||
localStorage.setItem('theme', theme);
|
||||
};
|
||||
|
||||
const toggleTheme = () => {
|
||||
const theme = getTheme();
|
||||
const newTheme = theme === 'dark' ? 'light' : 'dark';
|
||||
setTheme(newTheme);
|
||||
saveTheme(newTheme);
|
||||
};
|
||||
|
||||
// https://stackoverflow.com/a/28344281
|
||||
const hasClass = (ele,cls) => {
|
||||
return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
|
||||
};
|
||||
const addClass = (ele,cls) => {
|
||||
if (!hasClass(ele,cls)) ele.className += " "+cls;
|
||||
};
|
||||
const removeClass = (ele,cls) => {
|
||||
if (hasClass(ele,cls)) {
|
||||
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
|
||||
ele.className=ele.className.replace(reg,' ');
|
||||
}
|
||||
};
|
||||
|
||||
const addClassToClass = (targetCls, newCls) => {
|
||||
const elements = document.getElementsByClassName(targetCls);
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
addClass(elements[i], newCls);
|
||||
}
|
||||
};
|
||||
|
||||
const removeClassFromClass = (targetCls, newCls) => {
|
||||
const elements = document.getElementsByClassName(targetCls);
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
removeClass(elements[i], newCls);
|
||||
}
|
||||
};
|
||||
|
||||
const setTheme = themeStr => {
|
||||
if (themeStr === 'dark') {
|
||||
document.getElementsByTagName('html')[0].style.background = 'rgb(20, 20, 20)';
|
||||
addClass(document.getElementsByTagName('body')[0], 'uk-light');
|
||||
addClassToClass('uk-card', 'uk-card-secondary');
|
||||
removeClassFromClass('uk-card', 'uk-card-default');
|
||||
}
|
||||
else {
|
||||
document.getElementsByTagName('html')[0].style.background = '';
|
||||
removeClass(document.getElementsByTagName('body')[0], 'uk-light');
|
||||
removeClassFromClass('uk-card', 'uk-card-secondary');
|
||||
addClassToClass('uk-card', 'uk-card-default');
|
||||
}
|
||||
};
|
||||
|
||||
const styleModal = () => {
|
||||
const color = getTheme() === 'dark' ? '#222' : '';
|
||||
$('.uk-modal-header').css('background', color);
|
||||
$('.uk-modal-body').css('background', color);
|
||||
$('.uk-modal-footer').css('background', color);
|
||||
};
|
||||
|
||||
// do it before document is ready to prevent the initial flash of white
|
||||
setTheme(getTheme());
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// because this script is attached at the top of HTML, the style on uk-card
|
||||
// won't be applied because the elements are not available yet. We have to
|
||||
// apply the theme again for it to take effect
|
||||
setTheme(getTheme());
|
||||
}, false);
|
||||
@ -30,6 +30,7 @@ function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTi
|
||||
});
|
||||
|
||||
UIkit.modal($('#modal')).show();
|
||||
styleModal();
|
||||
}
|
||||
function updateProgress(titleID, entryID, page) {
|
||||
$.post('/api/progress/' + titleID + '/' + entryID + '/' + page, function(data) {
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="/js/theme.js"></script>
|
||||
<div class="uk-offcanvas-content">
|
||||
<div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
|
||||
<div id="mobile-nav" uk-offcanvas="overlay: true">
|
||||
@ -22,7 +23,7 @@
|
||||
<li><a href="/admin">Admin</a></li>
|
||||
<li><a href="/download">Download</a></li>
|
||||
<hr uk-divider>
|
||||
<li><a><i class="fas fa-adjust"></i></a></li>
|
||||
<li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
|
||||
<li><a href="/logout">Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -44,15 +45,15 @@
|
||||
</div>
|
||||
<div class="uk-navbar-right uk-visible@s">
|
||||
<ul class="uk-navbar-nav">
|
||||
<li><a><i class="fas fa-adjust"></i></a></li>
|
||||
<li><a onclick="toggleTheme()"><i class="fas fa-adjust"></i></a></li>
|
||||
<li><a href="/logout">Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-section uk-section-default uk-section-small">
|
||||
<div class="uk-section uk-section-small">
|
||||
</div>
|
||||
<div class="uk-section uk-section-default uk-section-small">
|
||||
<div class="uk-section uk-section-small">
|
||||
<div class="uk-container uk-container-small">
|
||||
<div id="alert"></div>
|
||||
<%= content %>
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/css/uikit.min.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="uk-section uk-section-muted uk-flex uk-flex-middle uk-animation-fade" uk-height-viewport="">
|
||||
<script src="/js/theme.js"></script>
|
||||
<div class="uk-section uk-flex uk-flex-middle uk-animation-fade" uk-height-viewport="">
|
||||
<div class="uk-width-1-1">
|
||||
<div class="uk-container">
|
||||
<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="/js/theme.js"></script>
|
||||
<div class="uk-section uk-section-default uk-section-small reader-bg">
|
||||
<div class="uk-container uk-container-small">
|
||||
<%- urls.each_with_index do |url, i| -%>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user