自定义主题
给侧边栏、导航栏和页脚挑一个颜色模式和背景。 每选一项都会立刻应用到本页面上, 要复制的标记就印在取色器旁边 —— AdminLTE 4 里的所谓“主题”,
其实就是在元素上加一个背景工具类再 加
data-bs-theme,不需要额外的 CSS。
每个取色器里的 扩展调色板 分组 (orange,
amber, olive, teal, sky, indigo, violet, fuchsia, pink, navy, steel, slate,
graphite, midnight) 需要可选的
css/adminlte-colors.css,本页面已经加载了它。
本页面已经加载了它。这些颜色每一个都配白色文字, 所以要搭配
暗黑(深色)模式使用—— 取色器会帮你自动配好。
调色板、预设,以及如何加入你自己的品牌色:
颜色文档
·
颜色演示。
预设
后台常见几大类里的侧边栏 + 导航栏组合 点一下即可应用到本页面, 并自动填入下方的取色器;然后再微调。
Light
白色界面;颜色由组件和当前激活项来承担。
Semi-dark
深色侧边栏、浅色头部 —— 最常见的后台布局,也是 AdminLTE 的默认布局。
Full dark
深色侧边栏加深色头部;除非访客自己选了深色模式,否则主体保持浅色。
Coloured & gradient
偏品牌感的界面:用一种强烈的色相,或者用 v3 那种渐变光泽。
Dark sidebar
skin-blue、skin-purple、skin-green、skin-red、skin-yellow、skin-black —— 彩色头部配 v3 的深色侧边栏。
Light sidebar
"-light" 那一类:同样的头部配白色侧边栏。
侧边栏主题
导航栏主题
底部主题
主色
Bootstrap 把
$primary 直接烤进了它的组件里,
所以不管你怎么设置 --bs-primary,
.btn-primary
都还是蓝色的。调色板样式表把它们重新接了线: 在
<html> 上加上
data-lte-primary,
按钮、链接、分页、复选框、进度条和焦点圈 就会跟着你选的颜色走。