Light and dark mode, with a switch for visitors
Your site can follow each visitor's light or dark setting, stay always light or dark, or show a header button so visitors choose. The other look is worked out from your colour set, and you can change any colour of either look.
PLANSEvery plan
Why it matters
More and more visitors keep their phone in dark mode, and a bright white site at night is the first thing they see of you. Building a dark version by hand means picking every colour twice, and it is easy to end up with invisible buttons or unreadable text. In SmartMy Website you pick one setting: follow the visitor's device, always light, always dark, or a button that lets visitors choose. The second look is worked out from your colour set, kept readable by itself, and every colour of it can still be changed.
The problem it solves
- A visitor reading at night on a phone in dark mode opens your site and gets a white screen in the face.
- Making a dark version of a site by hand means choosing every colour twice and keeping both up to date.
- A dark version made carelessly hides the logo, the buttons or the text.
- Some visitors want to choose for themselves, and the site has no way to remember it.
How it works
- Open the editor's Design tab. Light and dark sits at the top.
- Choose how the site looks: As the colour set, Follow the visitor's device, Always light, Always dark, or Visitor chooses.
- The other look is worked out from your colour set. Check both in the editor.
- Under Colours in light mode and Colours in dark mode, change any colour: background, soft background, text, accent and dark sections.
- Publish. With Visitor chooses, a button in the header switches the look, and the visitor's browser remembers the choice for the next visit.
Everything it does
Choices
- As the colour set: the colour set decides; a light set stays light and a dark set stays dark (the starting choice)
- Follow the visitor's device: light or dark as the visitor's phone or computer is set
- Always light, or Always dark
- Visitor chooses: a button in the header; the site starts as the device is set, and the visitor's pick is kept in their browser
Colours of each look
- The second look is worked out from your colour set: background, soft background, text, faded text, accent, button text, borders and dark sections
- Change each colour of the light look and of the dark look on its own
- Text that would be too faint on its background, and buttons that would vanish, are given a readable shade by themselves
- Logos and pictures are not recoloured
What visitors get
- The look changes at once, with no page reload
- The choice is kept in the visitor's own browser, not in a cookie, and nothing is sent to you
- Works on the whole site: pages, blog, shop, cart and account pages
Sections that stay their own colour
- A section with its own colour or a picture background keeps it in both looks; Soft, Accent and Dark backgrounds follow the look's colours
- Text on a section with its own colour turns light or dark by itself to stay readable
- Colour sets come grouped as Light and Dark. So you can start from a dark set and offer a light look, or the other way round
Checking both looks
- Switch the choice in the Design tab and the page in the editor redraws at once
- Check runs on the open page and flags text and background colours that are too alike
- The test link lets you open the draft on your own phone in dark mode before publishing
Who uses it
Website EditorChooses the light and dark setting and adjusts the colours of each look.
Website ManagerPublishes the change.
VisitorGets the look of their device, or switches it with the header button when you allow it.
Where you use it
- Web: the editor's Design tab, Light and dark
- The published site: on every phone, tablet and computer browser
- Not in the editor's own screens: the editor has its own light or dark switch, separate from your site
What you control
Settings
- Light and dark: As the colour set to start with
- Colours in light mode and Colours in dark mode: worked out from the colour set until you change them
Questions
Do I have to design a dark version myself?
No. The dark look is worked out from your colour set. You can change any of its colours if you want, but you do not have to.What does the visitor's switch remember?
Only light or dark, kept in that visitor's own browser. It is not a cookie and nothing is sent to you or to SmartMy.Will my logo disappear on a dark background?
Logos are not recoloured, so check a dark logo on the dark look. In the header you can set a second logo, such as a white one, to show over the first section.Should I follow the device or offer a switch?
Follow the visitor's device suits most sites: people get the look they already chose for their phone. Add the switch when part of your audience reads at night or in bright daylight and wants to choose.Does my own brand colour change in dark mode?
Your accent stays your accent unless it would not show on the dark background. Then the dark look uses a lighter shade of it, and you can set your own under Colours in dark mode.Which plans have it?
Every plan: Starter, Growth and Scale.Related features
BUILDING THE SITEColour sets and fonts for the whole siteChange the colours and fonts of the whole site in one go. Pick one of 24 colour sets and 21 font pairs, change any colour, and set how titles, buttons and cards look. The editor warns when colours are too alike to read, and the site keeps text readable by itself.BUILDING THE SITEHeader and footer looks, mega menus includedThe header and footer are the same on every page and are changed in one place. Pick a header layout, make it glass or see-through over your first picture, and build dropdowns and mega menus. Footers come with link columns, a call to action, contact details or a newsletter box.SELLING AND MEMBERSBrand kit: colours from your logo and your own fontsUpload your logo and take the site's main, second and dark colours from it in one click. Upload your brand's own fonts for titles and text, served from your own site.BUILDING THE SITEPage check for speed and accessibilityOne button in the editor checks the open page for what makes it hard to use or slow. It scores the page out of 100 and says how to fix each point.BUILDING THE SITEReady-made sites for your kind of businessStart from a finished website made for your kind of business, such as a cafe, clinic, school, salon or builder. It comes with pages, sections and sample words. Put in your name, logo and colours, and you have a site to change rather than a blank page.
See your business on a real design.
Tell us what you do and what the site needs to do: bring enquiries, take bookings, show your work or sell. We will start your site from the closest design with you.