PHPackages                             dne/storefront-dark-mode - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. dne/storefront-dark-mode

ActiveShopware-platform-plugin

dne/storefront-dark-mode
========================

Storefront Dark Mode

2.0.0(3y ago)62.0k1[1 issues](https://github.com/smittreiter/DneStorefrontDarkMode/issues)[1 PRs](https://github.com/smittreiter/DneStorefrontDarkMode/pulls)MITPHP

Since Nov 30Pushed 7mo ago1 watchersCompare

[ Source](https://github.com/smittreiter/DneStorefrontDarkMode)[ Packagist](https://packagist.org/packages/dne/storefront-dark-mode)[ RSS](/packages/dne-storefront-dark-mode/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (11)Used By (0)

Dark Mode for Shopware 6 Storefront
===================================

[](#dark-mode-for-shopware-6-storefront)

This plugin for [Shopware 6](https://www.shopware.de) adds a dark mode with auto-detection and/or toggle to the storefront.

The plugin offers the following features:

- Compatible with all themes
- Threshold for colors to be altered by saturation
- Set a minimum level of lightness for reduced contrast
- Tint grayscale for warmer/colder appearance
- Exclude colors from being inverted
- Auto-detect preferred color scheme
- Toggle between light and dark mode within storefront

Requirements
------------

[](#requirements)

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

Development
-----------

[](#development)

### Using immutable colors

[](#using-immutable-colors)

By declaring CSS variables using the suffix `-immutable`, color values may be stored that are supposed to be immutable, disregarding whether dark or light mode is used.

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

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

In this example `--white-immutable` will be `#fff` in both light and dark mode.

### Custom rules for dark mode

[](#custom-rules-for-dark-mode)

If you want to introduce rules specifically for the dark mode, you may use the `[data-theme="dark"]` selector on the root element.

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

### Customize dark/light mode toggle

[](#customize-darklight-mode-toggle)

By default, the button for the dark/light toggle will be shown in the top bar of the storefront. You may want to place it at some other place in the storefront layout.

- To hide the original toggle button go to the configuration of the plugin in the administration and enable *“Hide switch for dark mode in storefront”*.
- Use the following element where you want to place the toggle button instead.

```

    {% sw_icon 'moon' style {'size': 'xs', 'class': 'theme-dark'} %}
    {% sw_icon 'sun' style {'size': 'xs', 'class': 'theme-light'} %}

```

- If you prefer text to the icons you can use the classes `icon-theme-light` and `icon-theme-dark` for the content of the button respectively.

```
light theme
dark theme
```

Screenshots
-----------

[](#screenshots)

[![DarkMode](dist/screen1.png)](dist/screen1.png)

[![DarkMode](dist/screen2.png)](dist/screen2.png)

[![DarkMode](dist/screen3.png)](dist/screen3.png)

[![DarkMode](dist/screen4.png)](dist/screen4.png)

###  Health Score

33

—

LowBetter than 75% of packages

Maintenance41

Moderate activity, may be stable

Popularity21

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~8 days

Total

11

Last Release

1179d ago

Major Versions

0.4.3 → 1.0.02023-01-19

1.0.1 → 2.0.02023-02-20

### Community

Maintainers

![](https://www.gravatar.com/avatar/69c1745bd6023c706f651e9bdb38515fc7678caf52b9580126141381168669cd?d=identicon)[dneustadt](/maintainers/dneustadt)

---

Top Contributors

[![dneustadt](https://avatars.githubusercontent.com/u/9033214?v=4)](https://github.com/dneustadt "dneustadt (36 commits)")

### Embed Badge

![Health badge](/badges/dne-storefront-dark-mode/health.svg)

```
[![Health](https://phpackages.com/badges/dne-storefront-dark-mode/health.svg)](https://phpackages.com/packages/dne-storefront-dark-mode)
```

###  Alternatives

[shopware/storefront

Storefront for Shopware

684.2M148](/packages/shopware-storefront)[shopware/administration

Administration frontend for the Shopware Core

413.9M75](/packages/shopware-administration)[shopware/production

178190.0k](/packages/shopware-production)[frosh/tools

Provides some basic things for managing the Shopware Installation

79709.7k2](/packages/frosh-tools)[shopware/elasticsearch

Elasticsearch for Shopware

153.6M8](/packages/shopware-elasticsearch)[kiener/mollie-payments-plugin

Mollie Payments

6257.6k](/packages/kiener-mollie-payments-plugin)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)