如果出现layuiadmin相关隐私,管理员请删除或帮我修正
只是看到很多人在问layuiadmin的深色模式 都想等心姐发布,这是我之前项目写的,顺手复制给大家参考。
只有单面页版本!
深色模式截图:
非深色模式截图:
采用#I74MWP:🌗 Layui 官网增加深色主题切换的深色主题模式
将该主题文件下载到目录:style/ 内
若该主题模式下 出现未适配的css,可以单独在面页内写下css 例如:
<style>
//非深色主题模式下
.layui-elem-quote {background-color: #D5E7FF;color: #0046B9;}
//深色主题模式下
.theme-dark .layui-elem-quote {background-color: var(--lay-color-bg-3);color: unset;}
</style>
注意一定要写在模版文件面页内,或者必须在themedark.css文件加载后
1=layout.html文件 右上角,按钮模型
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<div class="layui-form header-theme" lay-filter="form-theme-mode">
<script type="text/html" template lay-done="layui.form.render('checkbox');">
<input type="checkbox" name="themeMode" lay-filter="header-theme-mode" lay-skin="switch"
{{# layui.admin.isThemeDark(()=>{ }} checked="" {{# }); }} />
</script>
<div lay-checkbox>
<i class="layui-icon layui-icon-moon"></i>|
<i class="layui-icon layui-icon-light"></i>
</div>
</div>
</li>
layout.html截图:
2=admin.js文件 内置模块,获取当前模式
//获取当前模式
isThemeDark: (call)=>{
let themedark = layui.data(setter.tableName).themeMode;
if (themedark) {
$.isFunction(call) && call();
return true;
}
}
admin.js截图:
3=index.js文件 与admin.js同级目录,在最底部 //初始主体结构 一定要在layui.link加载admin.css后
//监听深色模式开关
layui.form.on('switch(header-theme-mode)', (data)=>{
if (data.elem.checked) {
//写入本地表
layui.data(setter.tableName, {
key: 'themeMode'
,value: 'dark'
});
//加载深色主题文件
layui.link('style/themedark.css?v=' + layui.cache.version, 'theme-dark');
//body标签追加class=theme-dark
if (!$('body').hasClass('theme-dark')) $('body').addClass('theme-dark');
layui.layer.msg('已开启强制深色模式');
} else {
//删除本地表
layui.data(setter.tableName, {
key: 'themeMode'
,remove: true
});
//移除深色主题文件
$('#layuicss-theme-dark').remove();
//移除body标签class=theme-dark
if ($('body').hasClass('theme-dark')) $('body').removeClass('theme-dark');
layui.layer.msg('已关闭强制深色模式');
}
});
//初始面页加载深色主题文件
admin.isThemeDark(()=>{ //如果本地表有储存 则加载文件
layui.link('style/themedark.css?v=' + layui.cache.version, 'theme-dark');
if (!$('body').hasClass('theme-dark')) $('body').addClass('theme-dark');
});
index.js截图:
4=admin.css文件
.header-theme {position: relative;top: 1px;min-width: 44px;padding: 0 6px;}
.header-theme .layui-icon {font-size: 16px}
.header-theme .layui-form-switch {top: -1px;margin: 0;line-height: 20px;box-sizing: border-box;border-radius: 20px;}
.header-theme .layui-form-switch>div {margin-left: 16px}
.header-theme .layui-form-onswitch>div {margin-left: 0;margin-right: 16px}
.header-theme .layui-form-switch>i {top: 3px;width: 14px;height: 14px}
.header-theme .layui-form-onswitch>i {margin-left: -18px}
admin.css截图:
如果出现layuiadmin相关隐私,管理员请删除或帮我修正
只是看到很多人在问layuiadmin的深色模式 都想等心姐发布,这是我之前项目写的,顺手复制给大家参考。
另外如果截图上代码有出入,请以代码为准。
另外,截图中有部分代码不同(因为是在项目中直接截图的),请以本面页的代码为准,直接复制即可。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
好人啊,就喜欢白嫖,只是动了核心代码,不方便升级
<script type="text/html" template lay-done="layui.form.render('checkbox');">
<input type="checkbox" name="themeMode" lay-filter="header-theme-mode" lay-skin="switch"
{{# layui.admin.isThemeDark(()=>{ }} checked="" {{# }); }} />
</script>
这个是什么写法?
我按教程从头复制了一遍,layout.html文件就报错了,
大概意思就是 layui.admin.isThemeDark is not function
还有采用#I74MWP:🌗 Layui 官网增加深色主题切换:🌗 Layui 深色主题模式的深色主题模式
将该主题文件下载到目录:style/ 内 这里包含哪些文件也没写清楚
layTpl Error:TypeError:
ayui.admin.isThemeDark is not function
<input type="checkbox" name="themeMode" lay-filter="header-theme-mode" lay-skin="switch"
{{# layui.admin.isThemeDark(()=>{ }} checked="" {{# }); }} />
你这个报错大致是缺少第二步,2=admin.js文件 内置模块,获取当前模式,admin.js这个文件没复制进去。
然后下载主题文件地址:https://github.com/Sight-wcg/layui-theme-dark/blob/master/dist/layui-theme-dark.css 下载这一个文件即可
该分享已与另外一个置顶 Issue 关联:#I74MWP:🌗 Layui 官网增加深色主题切换
大佬您好,admin.js是这样的,加在哪里都会报错Laytpl Error: TypeError: layui.admin.isThemeDark is not a function
<input type="checkbox" name="themeMode" lay-filter="header-theme-mode" lay-skin="switch"
{{# layui.admin.isThemeDark(()=>{ }} checked="" {{# }); }} />
`/** The Web UI Theme-v2.2.0 */
;layui.define("view", function (e) {
function t(e) {
e.attr("lay-id");
var a = e.attr("lay-attr"), t = e.index();
T.tabsBodyChange(t, {url: a, title: e.children("span").text()})
}
var o = layui.jquery, s = layui.laytpl, a = layui.table, i = layui.element, l = layui.util, n = layui.upload,
r = (layui.form, layui.setter), u = layui.view, d = layui.device(), c = o(window), y = o(document),
m = o("body"), f = o("#" + r.container), h = "layui-show", p = "layui-this", b = "layui-disabled",
v = "#LAY_app_body", g = "LAY_app_flexible", x = "layadmin-layout-tabs", C = "layadmin-side-spread-sm",
k = "layadmin-tabsbody-item", P = "layui-icon-shrink-right", F = "layui-icon-spread-left",
A = "layadmin-side-shrink", T = {
v: "2.2.0", mode: "iframe", req: u.req, exit: u.exit, escape: l.escape, on: function (e, a) {
return layui.onevent.call(this, r.MOD_NAME, e, a)
}, sendAuthCode: function (i) {
function l(e) {
--n < 0 ? (t.removeClass(b).html("\u83b7\u53d6\u9a8c\u8bc1\u7801"), n = i.seconds, clearInterval(a)) : t.addClass(b).html(n + "\u79d2\u540e\u91cd\u83b7"), e || (a = setInterval(function () {
l(!0)
}, 1e3))
}
var a, n = (i = o.extend({seconds: 60, elemPhone: "#LAY_phone", elemVercode: "#LAY_vercode"}, i)).seconds,
t = o(i.elem);
i.elemPhone = o(i.elemPhone), i.elemVercode = o(i.elemVercode), t.on("click", function () {
var a, e = i.elemPhone, t = e.val();
if (n === i.seconds && !o(this).hasClass(b)) {
if (!/^1\d{10}$/.test(t)) return e.focus(), layer.msg("\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u624b\u673a\u53f7");
"object" == typeof i.ajax && (a = i.ajax.success, delete i.ajax.success), T.req(o.extend(!0, {
url: "/auth/code",
type: "get",
data: {phone: t},
success: function (e) {
layer.msg("\u9a8c\u8bc1\u7801\u5df2\u53d1\u9001\u81f3\u4f60\u7684\u624b\u673a\uff0c\u8bf7\u6ce8\u610f\u67e5\u6536", {
icon: 1,
shade: 0
}), i.elemVercode.focus(), l(), a && a(e)
}
}, i.ajax))
}
})
}, screen: function () {
var e = c.width();
return 1200 < e ? 3 : 992 < e ? 2 : 768 < e ? 1 : 0
}, sideFlexible: function (e) {
var a = f, t = o("#" + g), i = T.screen();
"spread" === e ? (t.removeClass(F).addClass(P), i < 2 ? a.addClass(C) : a.removeClass(C), a.removeClass(A)) : (t.removeClass(P).addClass(F), i < 2 ? a.removeClass(A) : a.addClass(A), a.removeClass(C)), layui.event.call(this, r.MOD_NAME, "side({*})", {status: e})
}, popup: u.popup, popupRight: function (e) {
return T.popup.index = layer.open(o.extend({
type: 1,
id: "LAY_adminPopupR",
anim: -1,
title: !1,
closeBtn: !1,
offset: "r",
shade: .1,
shadeClose: !0,
skin: "layui-anim layui-anim-rl layui-layer-adminRight",
area: "300px"
}, e))
}, theme: function (e) {
r.theme;
var t = layui.data(r.tableName), a = "LAY_layadmin_theme", i = document.getElementById(a),
l = document.createElement("style");
if (e.CLEAR) return o(i).remove(), layui.data(r.tableName, {key: "theme", remove: !0});
var n = s([".layui-side-menu,", ".layui-layer-admin .layui-layer-title,", ".layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child", "{background-color:{{d.color.main}} !important;}", ".layadmin-pagetabs .layui-tab-title li:after,", ".layadmin-pagetabs .layui-tab-title li.layui-this:after,", ".layui-nav-tree .layui-this,", ".layui-nav-tree .layui-this>a,", ".layui-nav-tree .layui-nav-child dd.layui-this,", ".layui-nav-tree .layui-nav-child dd.layui-this a,", ".layui-nav-tree .layui-nav-bar", "{background-color:{{d.color.selected}} !important;}", ".layadmin-pagetabs .layui-tab-title li:hover,", ".layadmin-pagetabs .layui-tab-title li.layui-this", "{color: {{d.color.selected}} !important;}", ".layui-layout-admin .layui-logo{background-color:{{d.color.logo || d.color.main}} !important;}", "{{# if(d.color.header){ }}", ".layui-layout-admin .layui-header{background-color:{{ d.color.header }};}", ".layui-layout-admin .layui-header a,", ".layui-layout-admin .layui-header a cite{color: #f8f8f8;}", ".layui-layout-admin .layui-header a:hover{color: #fff;}", ".layui-layout-admin .layui-header .layui-nav .layui-nav-more{border-top-color: #fbfbfb;}", ".layui-layout-admin .layui-header .layui-nav .layui-nav-mored{border-color: transparent; border-bottom-color: #fbfbfb;}", ".layui-layout-admin .layui-header .layui-nav .layui-this:after, .layui-layout-admin .layui-header .layui-nav-bar{background-color: #fff; background-color: rgba(255,255,255,.5);}", ".layadmin-pagetabs .layui-tab-title li:after{display: none;}", "{{# } }}"].join("")).render(e = o.extend({}, t.theme, e));
"styleSheet" in l ? (l.setAttribute("type", "text/css"), l.styleSheet.cssText = n) : l.innerHTML = n, l.id = a, i && m[0].removeChild(i), m[0].appendChild(l), e.color && m.attr("layadmin-themealias", e.color.alias), t.theme = t.theme || {}, layui.each(e, function (e, a) {
t.theme[e] = a
}), layui.data(r.tableName, {key: "theme", value: t.theme})
}, initTheme: function (e) {
var a = r.theme;
a.color[e = e || 0] && (a.color[e].index = e, T.theme({color: a.color[e]}))
}, tabsPage: {}, tabsBody: function (e) {
return o(v).find("." + k).eq(e || 0)
}, tabsBodyChange: function (e, a) {
a = a || {}, T.tabsBody(e).addClass(h).siblings().removeClass(h), _.rollPage("auto", e), T.recordURL(a), layui.event.call(this, r.MOD_NAME, "tabsPage({*})", a)
}, recordURL: function (e) {
var a;
(r.record || {}).url && e.url && (/^(\w*:)*\/\/.+/.test(e.url) && (e.url = ""), location.hash = T.correctRouter(e.url), e.url && e.title && ((a = {})[e.url] = e.title, layui.data(r.tableName, {
key: "record",
value: a
})))
}, resize: function (e) {
var a = layui.router().path.join("-");
T.resizeFn[a] && (c.off("resize", T.resizeFn[a]), delete T.resizeFn[a]), "off" !== e && (e(), T.resizeFn[a] = e, c.on("resize", T.resizeFn[a]))
}, resizeFn: {}, runResize: function () {
var e = layui.router().path.join("-");
T.resizeFn[e] && T.resizeFn[e]()
}, delResize: function () {
this.resize("off")
}, closeThisTabs: function () {
T.tabsPage.index && o(L).eq(T.tabsPage.index).find(".layui-tab-close").trigger("click")
}, fullScreen: function () {
var e = document.documentElement,
a = e.requestFullscreen || e.webkitRequestFullScreen || e.mozRequestFullScreen || e.msRequestFullscreen;
void 0 !== a && a && a.call(e)
}, exitScreen: function () {
document.documentElement;
document.exitFullscreen ? document.exitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitCancelFullScreen ? document.webkitCancelFullScreen() : document.msExitFullscreen && document.msExitFullscreen()
}, correctRouter: function (e) {
return (e = /^\//.test(e) ? e : "/" + e).replace(/^(\/+)/, "/").replace(new RegExp("/" + r.entry + "$"), "/")
}
}, _ = T.events = {
flexible: function (e) {
e = e.find("#" + g).hasClass(F);
T.sideFlexible(e ? "spread" : null)
}, refresh: function () {
var e = o("." + k).length;
T.tabsPage.index >= e && (T.tabsPage.index = e - 1), T.tabsBody(T.tabsPage.index).find(".layadmin-iframe")[0].contentWindow.location.reload(!0)
}, serach: function (t) {
t.off("keypress").on("keypress", function (e) {
var a;
this.value.replace(/\s/g, "") && 13 === e.keyCode && (e = t.attr("lay-action"), a = t.attr("lay-title") || t.attr("lay-text") || "\u641c\u7d22", e += this.value, a = a + ": " + T.escape(this.value), T.openTabsPage({
url: e,
title: a,
highlight: "color: #FF5722;"
}), _.serach.keys || (_.serach.keys = {}), _.serach.keys[T.tabsPage.index] = this.value, this.value === _.serach.keys[T.tabsPage.index] && _.refresh(t), this.value = "")
})
}, message: function (e) {
e.find(".layui-badge-dot").remove()
}, theme: function () {
T.popupRight({
id: "LAY_adminPopupTheme", success: function () {
u(this.id).render("system/theme")
}
})
}, note: function (e) {
var a = T.screen() < 2, t = layui.data(r.tableName).note;
_.note.index = T.popup({
title: "\u672c\u5730\u4fbf\u7b7e",
shade: 0,
offset: ["41px", a ? null : e.offset().left - 250 + "px"],
anim: -1,
id: "LAY_adminNote",
skin: "layadmin-note layui-anim layui-anim-upbit",
content: '<textarea placeholder="\u5185\u5bb9"></textarea>',
resize: !1,
success: function (e, a) {
e.find("textarea").val(void 0 === t ? "\u4fbf\u7b7e\u4e2d\u7684\u5185\u5bb9\u4f1a\u5b58\u50a8\u5728\u672c\u5730\uff0c\u8fd9\u6837\u5373\u4fbf\u4f60\u5173\u6389\u4e86\u6d4f\u89c8\u5668\uff0c\u5728\u4e0b\u6b21\u6253\u5f00\u65f6\uff0c\u4f9d\u7136\u4f1a\u8bfb\u53d6\u5230\u4e0a\u4e00\u6b21\u7684\u8bb0\u5f55\u3002\u662f\u4e2a\u975e\u5e38\u5c0f\u5de7\u5b9e\u7528\u7684\u672c\u5730\u5907\u5fd8\u5f55" : t).focus().on("keyup", function () {
layui.data(r.tableName, {key: "note", value: this.value})
})
}
})
}, fullscreen: function (e, a) {
function t(e) {
e ? n.addClass(l).removeClass(i) : n.addClass(i).removeClass(l)
}
var i = "layui-icon-screen-full", l = "layui-icon-screen-restore", n = e.children("i"), e = n.hasClass(i);
if (a) return t(a.status);
t(e), e ? T.fullScreen() : T.exitScreen()
}, about: function () {
T.popupRight({
id: "LAY_adminPopupAbout", success: function () {
u(this.id).render("system/about")
}
})
}, more: function () {
T.popupRight({
id: "LAY_adminPopupMore", success: function () {
u(this.id).render("system/more")
}
})
}, back: function () {
history.back()
}, setTheme: function (e) {
var a = e.data("index");
e.siblings(".layui-this").data("index");
e.hasClass(p) || (e.addClass(p).siblings(".layui-this").removeClass(p), T.initTheme(a), u("LAY_adminPopupTheme").render("system/theme"))
}, rollPage: function (e, a) {
var t, i = o("#LAY_app_tabsheader"), l = i.children("li"), n = (i.prop("scrollWidth"), i.outerWidth()),
s = parseFloat(i.css("left"));
if ("left" === e) !s && s <= 0 || (t = -s - n, l.each(function (e, a) {
a = o(a).position().left;
if (t <= a) return i.css("left", -a), !1
})); else if ("auto" === e) {
var r, e = l.eq(a);
if (e[0]) {
if ((a = e.position().left) < -s) return void i.css("left", -a);
a + e.outerWidth() >= n - s && (r = a + e.outerWidth() - (n - s), l.each(function (e, a) {
a = o(a).position().left;
if (0 < a + s && r < a - s) return i.css("left", -a), !1
}))
}
} else l.each(function (e, a) {
var a = o(a), t = a.position().left;
if (t + a.outerWidth() >= n - s) return i.css("left", -t), !1
})
}, leftPage: function () {
_.rollPage("left")
}, rightPage: function () {
_.rollPage()
}, closeThisTabs: function () {
(parent === self ? T : parent.layui.admin).closeThisTabs()
}, closeOtherTabs: function (e) {
var t = "LAY-system-pagetabs-remove";
"all" === e ? (o(L + ":gt(0)").remove(), o(v).find("." + k + ":gt(0)").remove(), o(L).eq(0).trigger("click")) : (o(L).each(function (e, a) {
e && e != T.tabsPage.index && (o(a).addClass(t), T.tabsBody(e).addClass(t))
}), o("." + t).remove())
}, closeAllTabs: function () {
_.closeOtherTabs("all")
}, shade: function () {
T.sideFlexible()
}, im: function () {
T.popup({
id: "LAY-popup-layim-demo",
shade: 0,
area: ["800px", "300px"],
title: "\u9762\u677f\u5916\u7684\u64cd\u4f5c\u793a\u4f8b",
offset: "lb",
success: function () {
layui.view(this.id).render("layim/demo").then(function () {
layui.use("im")
})
}
})
},
},
L = ("pageTabs" in layui.setter || (layui.setter.pageTabs = !0), r.pageTabs || (o("#LAY_app_tabs").addClass("layui-hide"), f.addClass("layadmin-tabspage-none")), d.ie && d.ie < 10 && u.error("IE" + d.ie + "\u4e0b\u8bbf\u95ee\u53ef\u80fd\u4e0d\u4f73\uff0c\u63a8\u8350\u4f7f\u7528\uff1aChrome / Firefox / Edge \u7b49\u9ad8\u7ea7\u6d4f\u89c8\u5668", {
offset: "auto",
id: "LAY_errorIE"
}), (l = layui.data(r.tableName)).theme ? T.theme(l.theme) : r.theme && T.initTheme(r.theme.initColorIndex), i.on("tab(" + x + ")", function (e) {
T.tabsPage.index = e.index;
var currentTabBody = T.tabsBody(e.index);
var iframe = currentTabBody.find(".layadmin-iframe")[0];
if (iframe && iframe.contentWindow) {
setTimeout(function () {
iframe.contentWindow.location.reload(true);
}, 500);
}
}), T.on("tabsPage(setMenustatus)", function (e) {
function n(e) {
return {list: e.children(".layui-nav-child"), a: e.children("*[lay-href]")}
}
var s = e.url, e = o("#LAY-system-side-menu"), r = "layui-nav-itemed";
e.find("." + p).removeClass(p), T.screen() < 2 && T.sideFlexible(), e.children("li").each(function (e, a) {
var a = o(a), t = n(a), i = t.list.children("dd"), l = s === t.a.attr("lay-href");
if (i.each(function (e, a) {
var a = o(a), t = n(a), i = t.list.children("dd"), l = s === t.a.attr("lay-href");
if (i.each(function (e, a) {
var a = o(a), t = n(a);
if (s === t.a.attr("lay-href")) return t = t.list[0] ? r : p, a.addClass(t).siblings().removeClass(t), !1
}), l) return i = t.list[0] ? r : p, a.addClass(i).siblings().removeClass(i), !1
}), l) return i = t.list[0] ? r : p, a.addClass(i).siblings().removeClass(i), !1
})
}), i.on("nav(layadmin-system-side-menu)", function (e) {
e.siblings(".layui-nav-child")[0] && f.hasClass(A) && (T.sideFlexible("spread"), layer.close(e.data("index"))), T.tabsPage.type = "nav"
}), i.on("nav(layadmin-pagetabs-nav)", function (e) {
e = e.parent();
e.removeClass(p), e.parent().removeClass(h)
}), "#LAY_app_tabsheader>li"), z = (m.on("click", L, function () {
var e = o(this), a = e.index();
T.tabsPage.type = "tab", T.tabsPage.index = a, t(e)
}), i.on("tabDelete(" + x + ")", function (e) {
var a = o(L + ".layui-this");
e.index && T.tabsBody(e.index).remove(), t(a), T.delResize()
}), m.on("click", "*[lay-href]", function () {
var e = o(this), a = e.attr("lay-href"), t = e.attr("lay-title") || e.attr("lay-text") || e.text();
T.tabsPage.elem = e, (parent === self ? layui : r.parentLayui || top.layui).admin.openTabsPage({
url: a,
title: t
}), r.pageTabs && r.refreshCurrPage && a === T.tabsBody(T.tabsPage.index).find("iframe").attr("src") && T.events.refresh()
}), m.on("click", "*[layadmin-event]", function () {
var e = o(this), a = e.attr("layadmin-event");
_[a] && _[a].call(this, e)
}), m.on("mouseenter", "*[lay-tips]", function () {
var t, e, a, i = o(this);
i.parent().hasClass("layui-nav-item") && !f.hasClass(A) || (a = i.attr("lay-tips"), t = i.attr("lay-offset"), e = i.attr("lay-direction"), a = layer.tips(a, this, {
tips: e || 1,
time: -1,
success: function (e, a) {
t && e.css("margin-left", t + "px")
}
}), i.data("index", a))
}).on("mouseleave", "*[lay-tips]", function () {
layer.close(o(this).data("index"))
}), layui.data.resizeSystem = function () {
layer.closeAll("tips"), z.lock || setTimeout(function () {
T.sideFlexible(T.screen() < 2 ? "" : "spread"), delete z.lock
}, 100), z.lock = !0
});
c.on("resize", layui.data.resizeSystem), y.on("fullscreenchange", function () {
_.fullscreen(o('[layadmin-event="fullscreen"]'), {status: document.fullscreenElement})
}), (d = r.request).tokenName && ((l = {})[d.tokenName] = layui.data(r.tableName)[d.tokenName] || "", a.set({
headers: l,
where: l
}), n.set({headers: l, data: l})), e("admin", T)
});`
登录 后才可以发表评论