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/sidrSidr 是一款经典的 jQuery 侧边菜单插件只需引入一套主题 CSS就能快速打造响应式侧边导航。而它的主题体系非常清爽——所有外观都由 src/css/ 下的dark、light、bare三套样式文件控制。这篇指南带你从零看懂三套 CSS 的分工并手把手教你修改颜色、宽度与字体最终做出一个完全属于自己的侧边导航。三套主题 CSS 都在哪里Sidr 的样式源文件集中在src/css/目录每个入口文件只做一件事拼装主题。入口文件引入内容适合场景sidr.dark.css深色变量 通用布局深色导航最常用sidr.light.css浅色变量 通用布局浅色页面风格sidr.bare.css仅布局无配色变量想 100% 自定义外观页面中通常这样引入见 examples/jquery/simple-menu.htmllink relstylesheet hrefdist/stylesheets/sidr.dark.css换成sidr.light.css或sidr.bare.css就能切换整套外观无需改动任何 HTML。一分钟看懂主题分层结构 ️三套文件背后是「变量层 主题层 布局层」的三段式设计改哪一层完全取决于你要动什么变量层common/variables.css 定义全局尺寸例如侧边栏宽度--sidrSidebarWidth: 260px一行改动全菜单生效。主题层themes/dark.css 与 themes/light.css 各自声明一组颜色变量——背景--sidrBackground、文字--sidrTextColor、阴影--sidrBoxShadowColor、输入框底色--sidrInputBackgroundColor等。布局层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; }想要一套品牌色只需三步复制 themes/dark.css 为themes/brand.css把背景改成品牌主色如--sidrBackground: #1f2d3d;新建入口文件sidr.brand.css仿照 sidr.dark.css 用两行import引入新主题与 common/base.cssHTML 中把样式链接从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」的清晰结构选起点dark深色/light浅色/bare全自定义改颜色动themes/下的变量一行搞定改尺寸动common/variables.css的宽度变量改结构最后才考虑编辑 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考