如何修改网站后台字体大小和颜色_后台主题_CSS定制_视力友好
修改网站后台字体大小和颜色，通过CSS自定义实现，适合视力不佳或品牌定制需求。
找到后台CSS： - PbootCMS：`apps/admin/view/default/css/style.css` - 易优CMS：`static/admin/css/admin.css` - WordPress：用插件（Admin Color Schemes、Uber Login）或改wp-admin/css。 - 用F12点选后台元素，看CSS类名，精准定位。
修改字体大小： 在CSS文件末尾加： ``` /* 全局字体 */ body, .layui-body, .layui-table, .layui-input, .layui-textarea { font-size: 15px !important; line-height: 1.6 !important; } /* 导航菜单 */ .layui-nav-item a { font-size: 16px !important; } /* 表格内容 */ .layui-table td, .layui-table th { font-size: 14px !important; padding: 12px 8px !important; } /* 标题 */ .layui-card-header, h1, h2, h3 { font-size: 17px !important; font-weight: bold !important; } /* 按钮文字 */ .layui-btn { font-size: 15px !important; } ``` 15-16px比默认14px大，需要更大设17-18px。 !important确保覆盖默认样式。
修改字体类型： ``` body, .layui-body, .layui-table, .layui-input { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important; } ``` - 微软雅黑（Windows）、苹方（Mac）、黑体，都是清晰易读的字体。 - 不要用艺术字体，后台是工作界面，清晰最重要。
修改颜色主题： ``` /* 主色调（按钮、高亮、链接） */ .layui-btn-normal, .layui-nav .layui-this, .layui-tab-brief>.layui-tab-title .layui-this { background-color: #2c7be5 !important; } a { color: #2c7be5 !important; } a:hover { color: #1a5fbf !important; } /* 输入框聚焦 */ .layui-input:focus, .layui-textarea:focus { border-color: #2c7be5 !important; box-shadow: 0 0 0 2px rgba(44,123,229,0.2) !important; } /* 侧边栏背景 */ .layui-side, .layui-nav { background-color: #1e293b !important; } /* 顶部导航 */ .layui-header { background-color: #ffffff !important; border-bottom: 1px solid #e2e8f0; } /* 卡片背景 */ .layui-card { background-color: #ffffff !important; } /* 文字颜色 */ body, .layui-body { color: #1a202c !important; } ``` 品牌色选公司Logo主色，保持一致性。
修改登录页： - PbootCMS：`apps/admin/view/default/login.html` - 改背景：`body {background: linear-gradient(135deg, #667eea, #764ba2);}` - 改Logo：替换img src。 - 改登录框：`.login-box {background:#fff; border-radius:12px; box-shadow:0 0 30px rgba(0,0,0,0.1);}` - 改按钮：`.btn-login {background:#品牌色;}`
浏览器插件方式（个人用）： - Chrome装"Stylus"或"Stylebot"插件。 - 新建样式，输入后台域名，写CSS规则。 - 只改自己浏览器看到的，不影响其他用户。 - 适合个人偏好，不用改服务器文件。 - 换电脑或清浏览器数据，插件配置还在（登录Chrome同步）。
浏览器缩放（最简单）： - Ctrl+加号放大整个页面，Ctrl+0恢复。 - Chrome记住每个网站的缩放比例。 - 110%-120%通常够用，太大布局可能错位。 - 不用任何技术操作，新手首选。
自定义CSS文件（推荐）： - 不修改原style.css，新建custom.css。 - 把覆盖样式写在custom.css。 - 在后台模板header里引入：``。 - 升级CMS时原CSS被覆盖，custom.css不受影响。
注意事项： - 改前备份原CSS和模板。 - 不要删功能元素（表单、按钮、隐藏域），只改样式。 - 字体不要太大（超过18px），一屏显示内容少，效率低。 - 颜色对比度要够（文字和背景比4.5:1），否则看不清。 - 测试所有后台页面，不只是首页。 - 团队使用的后台，改前和同事沟通。 - 升级CMS可能覆盖后台模板，修改前备份，升级后重新应用。
后台定制提升工作效率和舒适度，简单的CSS修改就能实现。视力不好的用户调大字体，品牌化需求改颜色，按需定制。
更新时间：2026-08-26 17:49:47
上一篇：PbootCMS视频播放失败排查实录：从编码转换到播放器配置的完整方案