106 lines
4.8 KiB
JavaScript
106 lines
4.8 KiB
JavaScript
//判断系统深色模式变化，修改切换按钮
|
|
var matchMedia = window.matchMedia(('(prefers-color-scheme: dark)'));
|
|
matchMedia.addEventListener('change', function () {
|
|
var mode = this.matches ? 'dark' : 'light';
|
|
//只有当cookie中无手动定义值时才进行操作
|
|
if (document.cookie.indexOf("thememode=") === -1 && Config.darktheme.mode === 'auto') {
|
|
$("body").toggleClass("darktheme", mode === "dark");
|
|
}
|
|
});
|
|
|
|
if (typeof Config.darktheme !== 'undefined' && Config.darktheme.switchbtn) {
|
|
|
|
// 切换模式
|
|
var switchMode = function (mode) {
|
|
// 获取当前深色模式
|
|
if (mode === 'auto') {
|
|
var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
mode = isDarkMode ? 'dark' : 'light';
|
|
}
|
|
|
|
if (mode === 'auto') {
|
|
} else if (mode === 'dark') {
|
|
$("body").addClass("darktheme");
|
|
$(".darktheme-link").removeAttr("media");
|
|
} else {
|
|
$("body").removeClass("darktheme");
|
|
$(".darktheme-link").attr("media", "(prefers-color-scheme: dark)");
|
|
}
|
|
};
|
|
|
|
// 创建Cookie
|
|
var createCookie = function (name, value) {
|
|
var date = new Date();
|
|
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
|
|
var url = Config.moduleurl.replace(location.origin, "");
|
|
var path = url ? url.substring(url.lastIndexOf("/")) : "/";
|
|
document.cookie = encodeURIComponent(Config.cookie.prefix + name) + "=" + encodeURIComponent(value) + "; path=" + path + "; expires=" + date.toGMTString();
|
|
};
|
|
|
|
if (Config.controllername === 'index' && Config.actionname === 'index') {
|
|
var mode = Config.darktheme.mode;
|
|
if (mode === 'auto') {
|
|
var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
mode = isDarkMode ? 'dark' : 'light';
|
|
}
|
|
var html = '<li class="theme-li">' +
|
|
'<button type="button" title="切换' + (mode === 'dark' ? '浅色' : '深色') + '模式" data-mode="' + (mode === 'dark' ? 'light' : 'dark') + '" class="theme-toggle">' +
|
|
'<svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">\n' +
|
|
' <circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />\n' +
|
|
' <g class="sun-beams" stroke="currentColor">\n' +
|
|
' <line x1="12" y1="1" x2="12" y2="3" />\n' +
|
|
' <line x1="12" y1="21" x2="12" y2="23" />\n' +
|
|
' <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />\n' +
|
|
' <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />\n' +
|
|
' <line x1="1" y1="12" x2="3" y2="12" />\n' +
|
|
' <line x1="21" y1="12" x2="23" y2="12" />\n' +
|
|
' <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />\n' +
|
|
' <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />\n' +
|
|
' </g>\n' +
|
|
' <mask class="moon" id="moon-mask">\n' +
|
|
' <rect x="0" y="0" width="100%" height="100%" fill="white" />\n' +
|
|
' <circle cx="24" cy="10" r="6" fill="black" />\n' +
|
|
' </mask>\n' +
|
|
' </svg>' +
|
|
'</button>' +
|
|
'</li>';
|
|
$(html).prependTo("#firstnav > div > ul");
|
|
|
|
//点击切换按钮
|
|
$(document).on("click", ".theme-toggle", function () {
|
|
var mode = $(this).attr("data-mode");
|
|
switchMode(mode);
|
|
createCookie("thememode", mode);
|
|
$("iframe").each(function () {
|
|
try {
|
|
$(this)[0].contentWindow.$("body").trigger("swithmode", [mode]);
|
|
} catch (e) {
|
|
|
|
}
|
|
});
|
|
$(this).attr("data-mode", mode === 'dark' ? 'light' : 'dark').attr("title", '切换' + (mode === 'dark' ? '浅色' : '深色') + '模式');
|
|
});
|
|
|
|
//判断系统深色模式变化，修改切换按钮
|
|
var matchMedia = window.matchMedia(('(prefers-color-scheme: dark)'));
|
|
matchMedia.addEventListener('change', function () {
|
|
var mode = this.matches ? 'dark' : 'light';
|
|
//只有当cookie中无手动定义值时才切换
|
|
if (document.cookie.indexOf("thememode=") === -1 && Config.darktheme.mode === 'auto') {
|
|
$(".theme-toggle").attr("data-mode", mode === 'dark' ? 'light' : 'dark').attr("title", '切换' + (mode === 'dark' ? '浅色' : '深色') + '模式');
|
|
}
|
|
});
|
|
} else {
|
|
//添加事件
|
|
$("body").on("swithmode", function (e, mode) {
|
|
switchMode(mode);
|
|
$("iframe").each(function () {
|
|
try {
|
|
$(this)[0].contentWindow.$("body").trigger("swithmode", [mode]);
|
|
} catch (e) {
|
|
|
|
}
|
|
});
|
|
});
|
|
}
|
|
} |