把网站做成深色，和让网站「支持深色模式」，是两件不同的事。
前者是一个设计决定：品牌就长这样，谁来看都是黑底。后者是一项功能：用户系统设成什么，页面就跟着变什么，还得给一个手动切换的开关。这两条路的开发量、维护成本和适用行业都不一样，可模板列表页上都写着「深色」两个字。
更容易被忽略的是第三种：模板附了一套深色版首页，但它不能切换——你在建站的时候选定深色那一套，网站从此就是深色的，跟浏览器偏好没关系。这三种买回来之后能做的事差得很远，改起来的代价也差好几倍。
下面 14 款就按这条线分四组：深色即品牌的、深浅双主题可切换的、深色只是其中一套版本的，以及深色最站得住脚的两个专业场景。文章最后一节讲深色模式真正的技术坑，都是模板文档里不会写、但上线后一定会遇到的。
怎么一眼分清是哪一种
不用问客服，打开演示站做两件事就够了：第一，在导航栏里找有没有一个太阳/月亮图标的开关；有开关的是双主题。第二，把你电脑的系统外观切到深色，刷新页面。页面跟着变了，说明它写了 prefers-color-scheme；没变，说明深色是写死的。两件事都不成立、演示站本身就是黑的，那就是第一种。
第一组 · 深色即品牌，没有浅色版（01 - 04）
01. 荧光黄 + 纯黑，这一组里最有辨识度的一套
Bootstrap v5.3.3 2 套首页 12+ 内页 GSAP + ScrollTrigger
深色背景配荧光黄（#EEFB13）点缀，是这 14 款里视觉记忆点最强的一套。2 套首页、12 个以上内页，覆盖服务详情、项目案例、团队、博客、联系。交互给得很足：GSAP 加 ScrollTrigger 的滚动触发动画、Swiper 轮播、Magnific Popup 视频灯箱、作品集分类筛选、全屏搜索遮罩、跑马灯文字、自定义鼠标效果。
它的价值在于配色本身就是品牌资产。数字营销和创意机构这一行，客户上门前先看的是「你自己的网站长什么样」，一套能被记住的配色比多写三页服务介绍管用。荧光黄在纯黑上的对比度也够高，不至于为了好看牺牲可读性。
代价有两条。一是这个黄太挑内容——它适合承载短标题和数字，一旦拿去做长段落的强调色，满屏都是刺眼的黄块，得克制着用。二是它没有浅色版，如果你的客户群里有大量需要打印页面或者在强光环境下阅读的场景（比如做政企项目的机构），深色底反而是障碍。选它之前先确认你的客户是不是同一类审美。
02. 黑色主题的数字机构站，鼠标跟随与滚动文字是它的抓手
Bootstrap v5.3.0-alpha1 2 套首页 12+ 内页 鼠标跟随
面向数字营销、平台推广、建站与网页设计公司，2 套首页加 12 个以上内页，产品页和博客页各给了两种布局。交互重心放在悬浮效果、鼠标跟随和滚动文字上，导航栏做过专门设计。
产品与博客各两套布局是这款容易被忽略的实用点。一家设计公司的作品既有需要大图铺满的品牌案例，也有更适合列表密排的小项目，同一个站里能用两种密度呈现，比强行统一成一种要合理。
要注意的是它的框架版本标的是 Bootstrap v5.3.0-alpha1，也就是 5.3 正式版之前的预览版。实际使用上和 5.3 正式版差异不大，但如果你打算在它基础上引入依赖 Bootstrap 的第三方组件，建议自己把 Bootstrap 换成当前稳定版再开发，免得踩到 alpha 阶段遗留的行为差异。
03. 黑红配色的游戏与软件下载站
Bootstrap 5.x 5 个页面 下载排行 直播热度榜
「赛博格」用黑底配红色，定位是游戏下载、软件下载与直播类站点。它专门定制了这一行需要的组件：下载排行榜、直播热度排行，而不是把通用企业模板的卡片改个名字。技术栈是 Bootstrap 5 加 jQuery、OwlCarousel、FontAwesome，粘性导航栏和标题搜索框都有。
游戏和影音这一类，深色几乎是行业默认而不是可选项——用户多在晚上使用，内容本身又以视频和封面图为主，浅色底会把注意力从内容抢走。这一点上它不需要提供浅色版，反而省了一半维护成本。
短板是页面数量：只有 5 个预定义页面，跟本文其他动辄二三十页的模板不在一个量级。它更像一个起点而不是成品，下载详情、分类列表、用户中心这些页面都得自己扩。另外它仍带 jQuery 依赖，如果你打算做成纯现代栈，OwlCarousel 这一层要换掉。
04. 一页纸的黑色企业站，最轻的一款
Bootstrap 5.x 单页设计 附内页 加载特效可选
「多途」是稳重黑底的一页纸企业站，滚动动效、留言表单、移动端菜单都有，另附内页和详情页。代码结构清晰、模块划分和注释都做得比较细，作者还专门标注了：模板自带加载特效，对应的 class/id 是 preloader，默认注释掉了，需要就放开。
这种把「可选功能怎么开」直接写进说明的做法，比多给两套首页更有价值——单页模板最常见的麻烦就是想删掉某个区块却不知道会牵连什么，注释详尽的代码能省下大量试错时间。
它的定位就是轻：不要指望它承载复杂的信息架构。一页纸适合业务线单一、内容量小的团队，一旦你有三条以上产品线要分别展开，单页会被撑得很长，导航锚点也失去意义。这时应该换多页模板，而不是在它上面加页。
第二组 · 深浅双主题，带切换开关（05 - 08）
这一组才是严格意义上的「支持深色模式」。它们至少维护了两套颜色变量，用户能自己选，页面也能跟随系统偏好。代价是所有自定义样式都得写两遍——这一点在你二次开发的时候才会真正感受到。
05. AI 从业者的个人作品集，双主题加动态网格背景
Bootstrap v5.3.8 深浅双主题 动态网格背景 W3C 验证
面向 AI 工程师、数据科学家和技术创作者的个人作品集站。深浅两套主题一键切换，配一层科技感的网格背景动画。代码模块化分层，替换内容和调整布局不需要太多前端经验，页面通过 W3C 标准验证。
作品集是最该做双主题的一类站。你不知道招聘方会在什么环境下打开它——白天在办公室，还是晚上在手机上。把选择权交给对方，比你替他决定要稳妥。而且对技术岗来说，网站上有一个能正常工作的主题切换器，本身就是一次小小的能力展示。
缺点是那层网格背景动画在低端设备上是持续开销。它是常驻动画，不像滚动触发的效果那样只在特定时刻跑。如果你的作品集里还嵌了视频或大量高清图，建议给背景动画加一个 prefers-reduced-motion 的降级分支，或者在移动端直接关掉。
06. 18 套首页，每套都配深浅两版，本文体量最大的一款
Bootstrap v5.0.0 18+ 套首页 40+ 页面 无 jQuery 依赖
18 套以上首页，每套都配深色与浅色两个版本，40 多个 HTML 页面，300 多个可拼装的组件模块。覆盖 AI 咨询、神经网络、机器人、内容生成器等细分方向。功能面铺得很开：
8 种以上导航头部样式，含吸顶固定导航与多级 Mega 菜单
7 种客户评价布局、6 种定价表、15 种数字计数器
完整电商页面：商品列表、详情、购物车、结账
会员体系：登录、注册、忘记密码
画廊支持网格与瀑布流两种布局
最值得说的一条是它完全移除了 jQuery 依赖，动效交给 GSAP、轮播交给 Swiper。这在深色模式的语境下有额外意义：主题切换本质上是操作 :root 上的一个属性，不需要 jQuery，多背一个库只是白白增加首屏的阻塞时间。
它的问题是选择成本。18 套首页乘以深浅两版等于 36 个可能性，真正落地时你只会用一套，剩下的都是要么删掉、要么留在服务器上占空间的死代码。建议上线前先做一次目录清理，只保留在用的那一套及其依赖的组件文件。另外它的 Bootstrap 标的是 v5.0.0，相对偏早，深色相关的官方变量体系是 5.3 才引入的，所以它这套深浅切换应该是模板自己实现的，二次开发时不要直接套 Bootstrap 5.3 的文档写法。
07. 网络安全公司站，深浅切换加 RTL 排版
Bootstrap v5.3.3 3 套首页 29+ 内页 支持 RTL
「思锐木」面向网络防护公司、信息安全顾问与数据加密服务商，3 套首页配 29 个以上内页，支持暗黑与亮色模式切换。除了常规的服务、团队、评价、博客，它还带完整的商品展示、购物车与结算流程，联系表单自带验证，图标用的是 Remixicon。另外它支持 RTL 排版，做中东市场的可以直接用。
安全服务商配深色几乎是这一行的视觉共识，但这款把切换开关也给了，等于两头都不得罪：面向技术买家时用深色显专业，面向企业采购负责人时切浅色更中性。这种「一套代码两副面孔」的能力，在做多市场投放时很实用。
它的框架是 Bootstrap 5.3.3，正好是引入官方深色模式支持的版本线，二次开发时可以直接用 data-bs-theme 那一套写法扩展新组件，不用自己再造一遍变量体系。要留意的是电商那部分只有前端页面，购物车和结算全是静态演示，真要卖东西还得接后端。
08. AI 产品的仪表盘界面，SCSS 写的双主题
Bootstrap v5.0.2 20+ 内页 SCSS 含移动端 App UI
这是一套 AI 产品的仪表盘风格界面，涵盖图像生成、聊天机器人和 AI 后台三个方向，内置深浅两套主题，20 多个功能内页。功能模块按 AI 产品的实际形态划分：文本创作、图像生成、图像增强、视频创作、代码生成。技术栈是语义化 HTML5 加 Bootstrap 5 加 SCSS，另外附了一整套移动端 App 的 UI 界面。
用 SCSS 而不是纯 CSS 写，是这款在双主题上的真正优势。两套主题意味着每个颜色都要定义两遍，用 SCSS 变量和 map 管理能把这件事收敛成一处修改；纯 CSS 手写的双主题，改一次品牌色要在几十个地方搜索替换。如果你打算长期迭代，这一点比多给两页界面重要得多。
提醒两点。一是它是界面不是系统——AI 生成的功能全靠后端接模型，模板只给你前端壳子。二是要用 SCSS 就得配构建流程（Node 环境 + Sass 编译），如果你的团队习惯直接改 CSS 上传，这套的优势反而变成了门槛。
第三组 · 深色只是其中一套 Demo，选定即固定（09 - 12）
这一组最容易被误解。它们的深色是「另一套首页设计」，不是「另一个主题状态」——你建站时挑深色那一套，站就是深色的，用户切不了，系统偏好也影响不到。买之前一定要看清楚，别把它当成第二组来用。
09. 9 套首页，多页版 / 单页版 / 深色版三种形式
Bootstrap v5.3.8 9 套首页 单页 / 多页 AJAX 表单
面向商业咨询、IT 解决方案、数字营销机构与科技创业公司，9 套首页同时覆盖多页版、单页版和深色版三种形式。功能层面给的是实用件：可直接收信的 AJAX 联系表单、平滑滚动导航与吸顶菜单、视差背景，图标用 Font Awesome Pro，代码经 W3C 验证。
「同一套设计既有多页版又有单页版」这个组合的价值在于业务扩张时不用换皮。咨询类公司起步时往往一页纸就够，业务线多起来再拆成多页站——用同一套模板的两种形态，视觉是连贯的，客户不会觉得换了家公司。
它的深色版就属于典型的第三种：那是 9 套首页里的一套，不是一个开关。你要是想让访客自己切换，得自己把两套配色抽成 CSS 变量再写切换逻辑，工作量不小。好消息是它基于 Bootstrap 5.3.8，可以直接用官方的 data-bs-theme 机制来改造，比从零写省事。
10. 物流货运站，多页 / 单页 / 深色各 3 套，另带 RTL
Bootstrap v5.0.2 多页/单页/深色各 3 套 29+ 页面 含 RTL
面向货运、仓储、快递与搬家业务，首页方案按多页版、单页版、深色版三种形式各给 3 套，另内置一套 RTL 反向布局，29 个以上功能页面。插件配置偏重：Revolution Slider 轮播、Menuzord 响应式超级菜单、视差滚动、带验证的 Ajax 询价表单，Google Maps 通过数据属性配置网点位置。
深色在物流这一行不是常见选择，但用在「专业沉稳」这个方向上是成立的——尤其是做跨境和大宗运输的公司，深色配一张全球航线图，比浅色更容易传达规模感。
有两条必须提醒。第一，它的功能页面是 PHP 文件而不是纯 HTML，意味着你的服务器需要 PHP 环境，直接当静态站丢到对象存储上是跑不起来的。第二，Revolution Slider 和 Menuzord 都是较重的商业插件，会显著拖慢首屏，而物流客户查运单时最在意的恰恰是速度。如果你的站不需要那么花哨的首屏轮播，上线前把 Revolution Slider 换成 Swiper 或者干脆用静态大图，收益会很直接。
11. 保洁家政站，7 套首页里含 1 套深色和 1 套 RTL
Bootstrap v5.0.0 7 套首页 49+ 内页 Swiper + Owl
覆盖家庭保洁、商业清洁、深度清洁、消毒除菌与布艺清洗，7 套首页里包含 1 套深色风格和 1 套 RTL 阿拉伯语排版版本，配 49 个以上内页。轮播同时内置了 Swiper 和 Owl 两款组件。
49 个内页对家政这一行来说是超配，而这恰恰是它的用法所在：保洁公司真正需要的是「每个服务项目一个独立落地页」——家庭保洁、开荒保洁、地毯清洗各自有不同的价格逻辑和搜索词，分开做页面才能各自去承接长尾流量。页面多在这里不是负担，是原料。
深色那一套在保洁行业其实是本文里最不推荐使用的一个组合。清洁服务卖的是「干净、明亮、放心」，深色底天然和这个心理预期相反，除非你做的是高端商业空间保洁那种偏 B 端的定位。它更实用的价值是那套 RTL 版本，以及内置了两套轮播组件——上线前应该删掉没用的那一套，两个轮播库同时加载纯属浪费。
12. 精品酒店与度假村，深色 UI 变体是为夜生活场景准备的
Bootstrap v5.3.5 3 套 Demo 230+ 区块 GSAP
本文里完成度最高的一款。3 套差异化 Demo 配 3 套页头页脚方案，230 多个模块化区块，撑起 22 个以上完整页面：房型、房型详情、服务、服务详情、预订、支付、搜索结果、博客、图库、FAQ、404 都有。技术上是 Bootstrap 5 加 GSAP 动画、全屏视差滑块、平滑滚动，代码通过 W3C 校验，字体用的是 Playfair Display 配 Poppins 这组经典搭配。
深色 UI 变体在酒店这一行有明确的适用面：精品酒店、酒吧与夜生活场景。度假型和亲子型酒店应该用浅色——家长在挑房间时想看到的是阳光和泳池，不是暗调的高级感。同一套模板能覆盖这两端，是它 230 多个区块换来的灵活度。
它的说明里提到兼容范围从 IE10/11 到 Chrome/Edge。IE 系列早已停止支持，这项兼容承诺现在只意味着代码里可能留有为老浏览器准备的兼容层，如果你追求极致的包体积，值得进去清理一遍。另外 230 多个区块虽然灵活，但也意味着你得先花时间读文档才知道有哪些积木可用，不是打开就能上手的类型。
第四组 · 深色最站得住脚的两个专业场景（13 - 14）
13. 律师事务所，深色调加金属质感
Bootstrap v5.3.5 2 套首页 16 个页面 案例库
深色调配金属质感点缀，专业感和分量感都在。它的结构完全按法律行业的信息逻辑组织，共 16 个页面：
业务领域拆成「执业方向」网格页加详情页，业务范围分门别类
已办案件独立成案例库，可逐案展开
律师团队有列表页和个人详情页，能写清执业年限、专长与代表案例
顶栏常驻办公地址、邮箱与工作时间，配一个突出的咨询入口
方案页、客户评价页、常见问题页，回应咨询前的普遍疑虑
新闻网格加文章详情——普法内容正是律所做长尾流量最有效的方式
深色在专业服务业里的作用和在科技行业完全不同。科技行业用深色是为了显得前沿，律所用深色是为了显得稳重、有分量——同样一个黑底，配荧光色是科技感，配金属灰和衬线字体就是权威感。这款走的是后者，选它之前先确认你的品牌想传达哪一种。
它的短板是没有多语言与地区分所的结构。跨城执业的律所通常需要按办公室拆分团队和联系方式，这套只有一个顶栏地址位，要扩展得自己改。另外「已办案件」这块在国内使用时要注意脱敏，涉及当事人信息的内容不能照搬到公开页面。
14. 后台仪表盘，7 种主题风格加深浅模式
Bootstrap v5.3.0 70+ 页面 400+ 组件 SCSS 变量
「瓦里克」是本文体量最大的一款：70 多个预构建页面、400 多个 UI 组件、7 种仪表盘主题风格，浅色与深色模式都支持，颜色通过 SCSS 变量集中管理。布局给了垂直、水平、流体、盒式几种选项，RTL 与 LTR 都能切。表单、图表、地图、分级菜单、5000 多个图标、错误页与定价页一应俱全。
后台是深色模式需求最刚性的场景，没有之一。运营和客服人员每天要盯着同一个界面七八个小时，深色能实打实地降低长时间注视的疲劳；而这类系统又常常是 7×24 有人在用，夜班同事的诉求和白班完全不同。给他们一个开关，比你替所有人选一种配色要好。
它的注意事项和第 08 款一致但更严重：它融合了 jQuery，在今天的新项目里是个包袱；而 400 多个组件、5000 多个图标如果全量引入，首屏体积会非常可观。务必按需引入——只把你实际用到的图标子集打包，别把整个图标库挂上去。另外它同样只是界面，所有数据都要自己对接后端。
做深色模式，模板文档不会告诉你的几件事
下面这些是自己动手加深色模式、或者改造模板自带深色版时一定会遇到的问题。每一条都能省你一次返工。
一、刷新时的白屏一闪，是这件事最难受的细节。用户选了深色，刷新页面却先闪一下白底再变黑——原因是 CSS 还没生效，浏览器已经按默认色画了第一帧。MDN 明确建议把 <meta name="color-scheme" content="light dark"> 放在 <head> 里、任何 CSS 样式信息之前，用来告知浏览器页面支持的配色方案，「有助于防止页面加载时出现不必要的屏幕闪烁」。如果你还做了记住用户选择的功能，那段读取本地存储、给 <html> 打标记的脚本也必须放在 head 里同步执行，不能等到 DOM 加载完。
二、光改 CSS 变量是不够的，滚动条和表单控件不归你管。很多自己改的深色版会出现这种割裂：页面全黑了，滚动条还是白的，<select> 展开的下拉列表也是白的。这些是浏览器自己画的界面，归 color-scheme 这个 CSS 属性管。按 MDN 的说明，它会影响画布表面的颜色、滚动条及其他交互界面的默认色、表单控件的默认色，以及拼写检查下划线这类浏览器提供的界面。在 :root 上写一句 color-scheme: light dark;，这些原生控件就会跟着走。
三、Chrome 会自作主张地把你的浅色站变成深色。Chrome 有一项 Auto Dark Theme，会在用户开启深色偏好时自动反转网站配色，效果通常不理想。MDN 给出的解法是用 only 关键字：在需要保护的元素或 :root 上写 color-scheme: only light;，即可关闭这类由浏览器强加的配色覆盖。做电商和品牌视觉严格的站尤其要检查这一条。
四、如果不需要兼容老浏览器，light-dark() 能省掉一半媒体查询。这个 CSS 函数接收两个颜色，按当前配色方案返回其中一个，不必再写 prefers-color-scheme 媒体查询。它的前提是必须先设 color-scheme（通常写在 :root 上）。据 MDN 的兼容性标注，它属于 Baseline 2024，自 2024 年 5 月起在各主流浏览器的最新版本中可用。也就是说它已经稳定了一段时间，但仍要为更早的浏览器版本留一条回退路径。
五、别用纯白，也别直接把照片搬过去。Google 的 web.dev 在讲深色模式实践时给了两条很具体的建议：文字不要用纯白，「为防止在周围深色内容上发光和洇开，我选择了略暗一点的白色」，用的是 rgb(250, 250, 250)；照片在深色模式下应当降低鲜艳度，示例做法是加一层 filter: grayscale(50%)。矢量图标则相反，直接 invert(100%) 反转就很好用，内联 SVG 更推荐用 currentColor 让颜色跟随文字继承。
六、CSS 变量的名字要按语义取，不要按颜色取。同样出自 web.dev 那篇：应该写 --accent-color 而不是 --highlight-yellow，因为「黄色」在深色主题里未必还是黄色。这条看着琐碎，但决定了你第二次改配色时是改一行还是改一百行。
七、深色底下的对比度要重新测，不能沿用浅色版的结论。WCAG 成功准则 1.4.3（对比度最低，AA 级）要求正文文本与背景的对比度至少 4.5:1，大号文本至少 3:1；大号文本指 18pt 以上，或 14pt 以上的粗体。灰色小字在白底上勉强及格、换到黑底上就不及格，是最常见的翻车点。Logo 本身不受此约束，但如果 Logo 同时是可点击的控件，达标是更稳妥的做法。
八、阴影在深色底上基本失效。浅色界面靠阴影区分层级——卡片浮在背景之上。到了深色底，黑色阴影投在深色背景上几乎看不见，层级就塌了。Material Design 的做法是改用色调叠加：Material 3 主要用色调颜色叠加来表现层级，层级越高的表面色调越明显，而不再依赖阴影。落到实践上就是：深色模式里，越靠前的卡片背景要比底层背景更亮一点点，用亮度差代替阴影。
最后：三句话对上号
如果深色就是你的品牌，看第一组，别浪费钱买双主题。第 01 到 04 款没有浅色版，也不需要——少维护一套配色就是少一半的样式返工。游戏、创意机构、夜间业态属于这一类。
如果你是要给用户一个选择，只有第二组算数。第 05 到 08 款是真正带切换开关的，其中第 07 款基于 Bootstrap 5.3.3，能直接沿用官方的 data-bs-theme 机制往下扩，二次开发最省事；第 08 和第 14 款用 SCSS 变量管理颜色，长期迭代最省事。
如果你看中的是第三组里某一套深色首页，先想清楚它切不了。第 09 到 12 款的深色是一套设计而不是一个状态。真需要切换，用 Bootstrap 5.3 以上的那几款（第 09 款是 5.3.8）改造成本最低，用 5.0.x 的那几款要自己从头抽变量，工作量要提前算进去。
本文的 14 款都在童哲网网站模板板块。相关的几篇：Bootstrap 5 后台管理与仪表盘模板（第 14 款的同类，后台是深色刚需场景）、IT 与科技企业官网模板（第一、二组多为科技类，可对照挑）、个人简历与作品集网站模板（第 05 款那一类）、GSAP 动画网站模板（第 01、12 款用的动画库同款）。
