Shopify的默认主题大多以浅色为主，但深色模式在时尚、数码、游戏类产品店铺中越来越受欢迎。深色界面不仅显得高级，还能减少视觉疲劳，让产品图片更突出。本文将围绕两个核心需求展开：一是让Shopify商店跟随用户系统自动切换深色模式，二是通过修改模板代码自定义店铺的深色配色与样式。即使你没有太多代码基础，只要按步骤操作，也能完成大部分设置。
一、开始之前：备份你的Shopify主题
修改模板代码有一定风险，写错一行CSS或Liquid代码都可能导致页面显示异常，所以备份是第一要务。进入Shopify后台，点击左侧的「在线商店」，再点击「主题」，在当前使用的主題上点击「操作」按钮，选择「复制」生成一个备份副本。
建议给备份副本起一个清晰的名字，比如「主题备份-修改前」，并标注日期。这样一来，即使后续操作出现页面崩溃、样式错乱等问题，也可以随时通过「操作」里的「发布」功能恢复到原始版本，不会影响线上店铺的正常运营。
另外，如果你使用的是付费主题，还可以在ThemeForest或主题开发者的官网下载原始安装包，作为双重保险。备份完成后，点击主题上的「编辑代码」进入代码编辑器，接下来所有操作都在这个界面完成。
二、让商店支持自动深色模式（跟随系统切换）
现代浏览器提供了prefers-color-scheme媒体查询，可以自动检测用户系统是否开启了深色模式。利用这个特性，可以让你的Shopify商店在用户系统切换到深色时自动变暗，无需任何按钮。
在代码编辑器左侧找到base.css、theme.css或styles.css等样式文件（不同主题命名略有差异），在文件末尾添加如下代码：
首先定义一组深色模式的CSS变量：
- 背景色：#121212 或 #1a1a1a，避免使用纯黑，纯黑对比过强反而刺眼
- 卡片或分区背景：#1e1e1e 或 #242424，用于区分层次
- 正文文字颜色：#e0e0e0 或 #f5f5f5
- 链接与强调色：可以沿用品牌色，但需确保在深色背景上对比度足够
示例代码结构如下：
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}
.header, .footer, .card {
background-color: #1e1e1e;
}
a {
color: #8ab4f8;
}
}
添加完成后点击右上角「保存」，然后在手机或电脑上开启系统的深色模式，刷新店铺页面即可看到效果。需要注意的是，主题中很多元素有自己的背景色设置，你可能需要逐一针对这些类名添加覆盖样式，可以在浏览器中右键「检查」找到对应元素的类名。
三、直接把店铺固定为深色风格
如果你的目标就是做一个纯深色店铺，不需要跟随系统切换，做法会更简单。很多新版Shopify主题（比如Dawn 2.0以上版本）后台自带配色方案设置：进入「主题」-「自定义」，在左侧「主题设置」中找到「颜色」，新建一个配色方案，把背景、文字、按钮的颜色全部替换为深色值，然后应用到整个店铺即可，完全不需要碰代码。
如果主题版本较老，不支持配色方案功能，就需要手动修改CSS。方法和上面类似，只是不需要包在media query里，直接把body和相关区块的背景色、文字色改成深色值即可。同时别忘了处理一些容易被忽略的地方：输入框、下拉菜单、弹窗、购物车抽屉、产品缩略图的边框等，这些控件如果保持白色背景会非常突兀。
图片方面也要留意，白色背景的产品图放在深色页面上会形成生硬的白色方块。建议拍摄时使用透明背景的PNG图，或者在CSS中给图片容器统一添加深色底和圆角，让整体过渡更自然。
四、添加手动深色模式切换按钮
自动切换虽然方便，但不少用户希望自己控制。添加一个切换按钮的思路是：用JavaScript给body添加或移除一个class，比如dark-mode，CSS针对这个class写深色样式，并用localStorage记住用户的选择。
第一步，在theme.liquid文件中找到body标签，确认它的结构。第二步，在layout文件夹的theme.liquid的body结束标签之前，添加切换按钮和脚本：
<button id="dark-toggle">切换深色</button>
<script>
var btn = document.getElementById('dark-toggle');
if (localStorage.getItem('darkMode') === 'on') {
document.body.classList.add('dark-mode');
}
btn.addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
var isDark = document.body.classList.contains('dark-mode');
localStorage.setItem('darkMode', isDark ? 'on' : 'off');
});
</script>
第三步，在CSS文件中编写.dark-mode类的深色样式，与前面第二部分类似，只是选择器从media query换成body.dark-mode。保存后刷新页面，点击按钮即可切换，且用户的选择会被记住，下次访问时自动生效。按钮的位置可以放到页头或页脚，具体取决于你的布局需求。
五、深色配色选择技巧
深色模式并不是把所有颜色反转那么简单。设计上建议遵循「浅字深底、层次分明」的原则：主背景最深，卡片、分区稍亮一点，通过明度差异制造层次感。文字不要用纯白，纯白配纯黑阅读时会产生「光晕」效应，用略带灰度的#e0e0e0会舒适很多。
品牌色也需要重新审视。原本在白底上鲜艳的颜色，放到深色背景上可能过亮或对比不足。可以用在线对比度检查工具测试文字与背景的对比度，正文建议至少达到4.5:1。阴影在深色模式下效果减弱，可以改用细边框（如1px的#333）来区分卡片边界。
六、常见问题与注意事项
修改代码后如果页面变白屏，多半是Liquid语法错误，比如标签没有闭合。此时回到代码编辑器，按Ctrl+Z（Mac为Cmd+Z）无法撤销的话，可以从备份副本中把对应文件的内容复制回来。
主题更新时，直接修改的代码可能会被覆盖。因此每次Shopify或主题方推送更新前，务必先备份，更新后再比对手动改过的文件。此外，修改完成后建议分别在手机和电脑、不同浏览器上测试，特别是结账页面（结账样式在部分套餐中需要单独设置，不一定受主题CSS控制），确保全流程视觉一致。
最后提醒一点，深色模式对转化率的影响因行业而异，上线后可以观察一段时间数据，必要时用Shopify自带的报告对比修改前后的停留时长和转化情况，用数据验证这次自定义是否真正带来了价值。
Shopify深色模式Shopify模板代码自定义Shopify主题编辑 修改时间：2026-09-15 21:51:39