Sidr主题定制完全指南：如何修改dark、light、bare三套CSS打造专属侧边导航

Sidr主题定制完全指南：如何修改dark、light、bare三套CSS打造专属侧边导航

【免费下载链接】sidrSidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.项目地址: https://gitcode.com/gh_mirrors/si/sidr

Sidr 是一款经典的 jQuery 侧边菜单插件，只需引入一套主题 CSS，就能快速打造响应式侧边导航。而它的主题体系非常清爽——所有外观都由 src/css/ 下的dark、light、bare三套样式文件控制。这篇指南带你从零看懂三套 CSS 的分工，并手把手教你修改颜色、宽度与字体，最终做出一个完全属于自己的侧边导航。

三套主题 CSS 都在哪里？

Sidr 的样式源文件集中在src/css/目录，每个入口文件只做一件事：拼装主题。

页面中通常这样引入（见 examples/jquery/simple-menu.html）：

<link rel="stylesheet" href="dist/stylesheets/sidr.dark.css">

换成sidr.light.css或sidr.bare.css就能切换整套外观，无需改动任何 HTML。

一分钟看懂主题分层结构 🗂️

三套文件背后是「变量层 + 主题层 + 布局层」的三段式设计，改哪一层完全取决于你要动什么：

1. 变量层：common/variables.css 定义全局尺寸，例如侧边栏宽度--sidrSidebarWidth: 260px，一行改动全菜单生效。
2. 主题层：themes/dark.css 与 themes/light.css 各自声明一组颜色变量——背景--sidrBackground、文字--sidrTextColor、阴影--sidrBoxShadowColor、输入框底色--sidrInputBackgroundColor等。
3. 布局层：common/base.css 是最大的一份文件，负责定位、列表分割线、表单控件和悬停高亮，它只「引用」变量，不写死颜色。

💡 记住这个口诀：改颜色去 themes/，改宽度去 common/variables.css，改结构才碰 common/base.css。

修改 dark、light 主题颜色的最快方法

以深色主题为例，themes/dark.css 里的变量区长这样：

:root { --sidrBackground: #333; --sidrBackgroundShadowColor: #222; --sidrTextColor: #fff; --sidrBoxShadowColor: #000; --sidrInputBackgroundColor: #000; }

想要一套品牌色，只需三步：

1. 复制 themes/dark.css 为themes/brand.css，把背景改成品牌主色（如--sidrBackground: #1f2d3d;）；
2. 新建入口文件sidr.brand.css，仿照 sidr.dark.css 用两行@import引入新主题与 common/base.css；
3. HTML 中把样式链接从sidr.dark.css换成sidr.brand.css。

浅色主题同理，改 themes/light.css 即可——由于布局层全部读取变量，列表线、悬停内阴影会随背景自动协调，不会出现「改了一半」的尴尬。

用 bare 主题打造极致自定义侧边导航

如果品牌规范连默认排版都不想要，sidr.bare.css 是最佳起点。它只保留最核心的结构规则：position: fixed定位、width: var(--sidrSidebarWidth)宽度，以及sidr-left/sidr-right两侧滑入的隐藏逻辑——没有任何颜色、字体和边框样式。

也就是说，基于 bare 主题，你可以在自己的样式表里完整接管外观：

• 菜单项高度、分割线、内边距 → 自己定义.sidr ul li；
• 表单控件 → 复用全站 input 样式，不再受 base.css 约束；
• 圆角、毛玻璃、渐变背景等进阶效果 → 随意发挥，零冲突。

适合需要侧边导航与主站视觉完全一致的中后台项目 🎨。

自定义侧边栏宽度与字体

两个高频需求都只需改一处：

• 宽度：修改 common/variables.css 中的--sidrSidebarWidth（默认 260px），左侧、右侧菜单同步生效；
• 字体族与字号：修改 themes/dark.css 中的--sidrFontFamily和--sidrFontSize，正文、链接、标题会按层级自动缩排（标题比正文小 4px，段落小 2px，逻辑见 base.css）。

常见问题排查 🛠️

• 改完颜色页面没变化？浏览器有缓存，强制刷新；同时确认你引用的还是构建产物dist/stylesheets/下的旧文件——项目通过 postcss.config.js 以src/css为根解析@import，修改源文件后需要重新构建一次样式。
• bare 主题下菜单没有边框/背景？这是预期行为，bare 本来就不带主题变量，配色请全部写进自己的样式表。
• 想同时保留 dark 和自定义主题？完全可以，多入口文件互不干扰，页面按需在dark.css与brand.css间切换。

总结

Sidr 的主题定制之所以简单，靠的是「CSS 变量 + 分层 @import」的清晰结构：

1. 选起点：dark（深色）/light（浅色）/bare（全自定义）；
2. 改颜色：动themes/下的变量，一行搞定；
3. 改尺寸：动common/variables.css的宽度变量；
4. 改结构：最后才考虑编辑 common/base.css。

跟着这条路径，几分钟就能把默认的侧边导航变成只属于你的品牌样式 ✅。

【免费下载链接】sidrSidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.项目地址: https://gitcode.com/gh_mirrors/si/sidr