Shopify Admin Power-UpShopify admin dark mode that follows your system schedule
Most people who want a dark Shopify admin do not want it all day. They want it at nine in the evening when the packing is done and the rest of the screen has already gone dark: the taskbar, the mail client, the browser chrome. A white admin tab in the middle of that is the one bright rectangle in the room. Our first post on dark mode explained where the dark theme comes from and how to switch it on. This one is about the setting most people skip past: Follow system, and the shortcut that overrides it when the system is wrong.
Three positions, not two
Click the Shopify Admin Power-Up icon and the first row in the popup is Dark mode, with three options: Off, On, and Follow system. Off is Shopify as shipped. On is dark around the clock. Follow system hands the decision to the operating system: the admin is dark whenever your computer says it is in dark appearance, and light the rest of the time.
That matters because every desktop operating system can now change appearance on a schedule. macOS has Auto under Appearance, which goes dark at sunset and light at sunrise using your location. Windows 11 does the same with a scheduled task or any of the small free utilities built for it. GNOME and KDE have night schedules too. Once the OS is doing the switching, an admin tab set to Follow system simply comes along: light during the day shift, dark during the evening one, without anyone touching the extension again.
The extension does not read a clock or a location. It asks the browser the standard question, prefers-color-scheme: dark, and listens for the answer to change. When the system flips, Chrome tells the extension, and the extension flips the admin in the same moment, in every open admin tab. There is no reload and no flash of the other theme in between.
Why there is no white flash on load
Dark mode extensions usually have a tell: the page loads light, then goes dark a beat later. The Power-Up avoids it by doing the theme work at the earliest point Chrome allows a content script to run, before the admin has painted anything. At that moment it already knows your setting and the system appearance, so it swaps Shopify's light theme class for the dark one on the <html> element before the first frame. The page is dark from pixel one.
The admin is a single page app, and it rewrites the classes on that element from time to time as you move around. A naive approach would lose the dark theme the first time that happened. The extension watches the element and puts the dark class back whenever Shopify removes it, which is why dark mode survives navigating from Orders to Products to a bulk editor and back without flickering.
One more small thing it does: it tells the browser the page is dark by setting color-scheme: dark. That is what makes scrollbars, date pickers, dropdown lists and other native controls render in their dark variants instead of appearing as bright white strips inside an otherwise dark page.
The shortcut: Alt+Shift+D
Follow system is right most of the time, and occasionally wrong. You are on a video call sharing your screen and the dark admin is hard to read on the other end. Or the laptop went into dark appearance at sunset but you are sitting under bright shop lights. For those moments the extension registers a browser-level shortcut, Alt+Shift+D, on Windows, Linux and Mac alike. Press it on any admin tab and the theme toggles.
A detail worth knowing: the toggle is explicit. If you were on Follow system and press Alt+Shift+D, the setting becomes On or Off, whichever is the opposite of what you are looking at, and stays there. The system schedule no longer applies until you go back to the popup and choose Follow system again. That is deliberate. When you override the schedule you usually want the override to stick for the session, not to be undone at the next sunset.
The same toggle lives in the command palette as Toggle dark mode, so Ctrl+Shift+K, type dark, Enter also works. And because the shortcut is declared to Chrome rather than captured by the page, you can remap it at chrome://extensions/shortcuts if Alt+Shift+D collides with something else you use.
One setting, every store, every machine
The dark mode choice is stored in Chrome's sync storage along with the rest of the extension's settings. Two consequences follow. First, it is per Chrome profile, not per store: an agency account that opens six client admins sees them all in the same theme. Second, it travels. Sign into the same Chrome profile on another computer and the setting is already there, including Follow system, which then obeys that computer's own appearance schedule. Nothing about this touches a server of ours; sync storage is a Chrome feature and the extension has no backend.
If you share a machine with colleagues who log into Chrome separately, each profile has its own setting, which is usually what people want. If you share a single Chrome profile, the last person to change the setting wins, in which case Follow system is the diplomatic choice: everyone gets whatever the machine is doing.
What dark mode does and does not touch
- Everything built with Shopify's design system goes dark: lists, forms, modals, the bulk editor, badges, the sidebar. This is Shopify's own dark token set, softened by the extension so the page background is dark grey rather than near black (the first post has the reasoning).
- The extension's own additions, the quick filter chips and the command palette, read the same signal and render dark alongside the admin.
- Product images, thumbnails and your logo are left alone. Nothing is inverted or filtered.
- Status colours keep their meaning. Green is still green, red is still red; only the neutral greys are remapped.
- Pages that are not admin.shopify.com are not affected. The extension only runs there. Embedded third-party apps draw their own interface inside the admin and decide their own colours, so an app that has no dark theme of its own stays light.
Setting it up
- Install Shopify Admin Power-Up from the Chrome Web Store.
- Set your operating system to switch appearance on a schedule: Appearance > Auto on macOS, a scheduled theme on Windows, or your desktop's night mode on Linux.
- Click the extension icon and set Dark mode to Follow system. Any admin tab you have open changes immediately.
- When the schedule gets it wrong, press Alt+Shift+D. Return to Follow system from the popup when you want the schedule back.
The whole thing is a few lines of logic around a question the browser already knows how to answer, and that is rather the point. Shopify built a complete dark theme and never wired it to anything. Wiring it to the switch your operating system already has is the smallest useful thing we could do with it.