README

此插件为Shopware 6添加了自动检测和/或切换的商店暗黑模式。

插件提供以下功能

与所有主题兼容
调整颜色的饱和度阈值
设置降低对比度的最低亮度级别
调整灰度色调以呈现更暖/更冷的外观
排除需要反转的颜色
自动检测首选的色彩方案
在商店内切换亮/暗模式

要求

2.0.0
- Shopware >= 6.5.0
1.0.0
- Shopware >= 6.4.18

开发

使用不可变颜色

通过使用后缀-immutable声明CSS变量，可以存储预期不可变的颜色值，无论使用暗黑模式还是亮模式。

:root { 
    --white-immutable: #fff; 
}

body {
    background-color: var(--white-immutable);
}

在这个例子中，--white-immutable在亮模式和暗黑模式中都将为#fff。

暗黑模式的自定义规则

如果您想引入专门针对暗黑模式的规则，可以在根元素上使用[data-theme="dark"]选择器。

:root[data-theme="dark"] {
    h1 {
        background: none;
    }
}

自定义暗黑/亮模式切换

默认情况下，暗黑/亮模式切换按钮将显示在商店的顶部栏中。您可能希望将其放置在商店布局的某个其他位置。

要隐藏原始切换按钮，请转到管理中的插件配置并启用“隐藏商店中的暗黑模式切换开关”。
将以下元素放置在您希望放置切换按钮的位置。

<button class="btn dne-storefront-dark-mode-btn"
        type="button"
        aria-label="Dark/Light Mode"
        data-dne-storefront-dark-mode-toggle="true"
        data-dne-storefront-dark-mode-detection-disabled="{{ config('DneStorefrontDarkMode.config.deactivateAutoDetect') }}">
    {% sw_icon 'moon' style {'size': 'xs', 'class': 'theme-dark'} %}
    {% sw_icon 'sun' style {'size': 'xs', 'class': 'theme-light'} %}
</button>

如果您更喜欢文本而不是图标，可以使用类icon-theme-light和icon-theme-dark分别用于按钮内容的文本和暗黑模式。

<span class="icon-theme-light">light theme</span>
<span class="icon-theme-dark">dark theme</span>

dne / storefront-dark-mode

维护者

详细信息

README

要求

开发

使用不可变颜色

暗黑模式的自定义规则

自定义暗黑/亮模式切换

截图