All 12 Dark Mode sections
Images and Elements
Two or three exceptions is normal. A long list here usually means the wrong method is chosen on Colours.
You do not have to type these lines yourself: Fix dark mode here in the toolbar lets you click the part on the page and writes the line for you (see Fixing a part on the page itself under Colours).
- Exclude videos and embeds — on by default. A player usually has its own dark mode, and darkening it twice makes the controls disappear.
- Exclude all images — off by default. Switch it on for a gallery or a shop where colour has to be exact.
- Parts of the page to leave alone — one CSS selector per line. For a chart, a colour picker, a brand badge: anywhere the colour is the information. Under Automatic, each matching element, and everything inside it, keeps the colours it has in light mode, including colours your theme's stylesheet gives it; one with no background of its own keeps the background it sat on. Two limits: the colours are taken as dark mode comes on, so a hover colour inside an excluded element no longer changes, and an element a script adds to the page afterwards — a chat window opened later — is darkened like the rest of the page. A plugin or a theme can mark an element itself instead of you typing a selector: anything carrying
data-trdm-keepis treated exactly like a line in this list. Our Social Share Buttons mark their brand-coloured buttons that way. - Parts of the page to invert — the opposite exception. Right for a black-on-white diagram or a signature scan, which look wrong every other way.
Under Invert, an excluded element is inverted a second time to put it back — the only way to undo an inversion. One side effect is worth knowing: a CSS filter makes an element the containing block for anything inside it with position: fixed, so excluding a wrapper that contains a fixed bar pins that bar to the wrapper rather than the window. Exclude the element itself instead of its wrapper and the question does not arise.
- Dark logo — pick an image from your Media Library and it replaces your site logo whenever dark mode is on. It is written into the page before the first paint and works in every darkening method, so a reader who chose dark never sees the light logo flash first. Choosing one image here is the whole job; the setting is kept if you export your settings, though the choice does not travel to another site — an attachment belongs to one Media Library, so importing a file from another site leaves the dark logo unset rather than guessing at a picture. Importing a file this site exported keeps it.
- Other image pairs — one pair per line,
light|dark, for images that are not the site logo: a badge, a partner strip, an illustration with a dark version.
Still stuck? Ask the developers who wrote it. We aim to reply within one business day.