Build a dark mode toggle for Weebly

Dark mode is no longer a decorative extra for many visitors. A reader arriving on a bright train, checking a phone near a window, or browsing late at night may prefer a lower-luminance interface, while another visitor may depend on the light version for clarity. A well-made control lets people choose without removing the default design or forcing every page to change.

Weebly makes it straightforward to publish a polished site, but the exact dark-mode behaviour depends on your theme, editor and hosting setup. This guide shows a practical route using CSS variables, a small JavaScript snippet and standard Weebly code areas. The result can respect the operating-system preference, remember a manual choice and remain usable with keyboards and screen readers.

Start with the reason behind the switch

Begin with readability rather than a black colour palette. Text, controls and backgrounds must retain sufficient contrast in both themes, and a toggle should be large enough to hit on a phone. People using reduced motion, zoom or older devices should not lose access to content because the switch depends on a fragile animation.

The preference also needs to make sense for the kind of site you run. A Melbourne photographer, an Adelaide café or a Brisbane online retailer may have photographs, menus and product cards that need different treatment from a text-heavy blog. Plan for those surfaces instead of applying an automatic filter to every image, which can dull faces, logos and product colours.

For context about the independent publisher and the experience behind these tutorials, take a look at about the author. That background can help you judge which techniques are intended for everyday Weebly owners rather than specialist developers.

Decide how the setting should behave

A reliable toggle needs three decisions: the starting theme, the saved preference and the fallback when storage is unavailable. The cleanest starting point is prefers-color-scheme, which tells the browser whether the visitor's operating system is set to light or dark. If no manual choice exists, following that signal reduces surprise and saves unnecessary work for the visitor.

When someone presses the switch, save the choice locally and use it on later visits. A site-wide label such as “Dark mode” paired with a pressed or unpressed state is easier to understand than a button that silently changes its accessible name. The visual icon may change, but the control should always announce what it does and whether it is active.

Decide whether an automatic operating-system change should override a saved choice. Most sites should keep the visitor's explicit selection until they clear it or choose again. Also decide what happens in private browsing or when cookies are blocked: the page should still switch, even if the preference cannot persist. These small rules prevent flicker and make the feature dependable.

Define both themes with CSS variables

CSS variables give you one place to manage colours. Replace hard-coded values in your custom stylesheet with variables such as --page-bg, --surface, --text, --muted and --accent. Then a single attribute on the root element can change the complete palette while leaving spacing, typography and layout untouched.

Use selectors that match your own Weebly theme. The following example is a starting point; adapt the body and component rules to the elements visible in your editor.

:root {
  --page-bg: #ffffff;
  --surface: #f4f5f6;
  --text: #17191c;
  --muted: #555c63;
  --accent: #075ea8;
  --border: #d5d9dd;
  color-scheme: light;
}

html[data-theme="dark"] {
  --page-bg: #111315;
  --surface: #1b1e22;
  --text: #f3f4f5;
  --muted: #b8bec5;
  --accent: #75c8ff;
  --border: #3a4047;
  color-scheme: dark;
}

body {
  background: var(--page-bg);
  color: var(--text);
}

.card,
.site-header,
.site-footer {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

a {
  color: var(--accent);
}

Map the variables to the components visitors actually see, including headings, navigation links, forms and footer text. Weebly themes often contain colours in their own stylesheet, so your custom rules may need to load afterwards or use a slightly more specific selector. Test the published site rather than relying only on the visual editor, because generated theme styles can behave differently in the preview.

Check both palettes before publishing. WCAG 2.1 AA generally calls for 4.5:1 contrast for normal text and 3:1 for large text and meaningful interface components. Include hover, focus, error and disabled states, because a readable resting colour does not guarantee an accessible interactive state.

Connect the button and remember the choice

The control needs to update the root attribute and store the selection. This script uses localStorage, but wraps storage in a try block because some privacy settings and embedded previews can make it unavailable. If storage fails, the current page still changes; only persistence is lost.

Add the JavaScript once in a site-wide footer, custom HTML area or the final position of an Embed Code element. Do not paste it into every individual page, as duplicate event handlers can make the button toggle twice and appear to do nothing.

<script>
(() => {
  const root = document.documentElement;
  const button = document.getElementById("dark-mode-toggle");
  if (!button) return;

  const readSavedTheme = () => {
    try {
      return localStorage.getItem("site-theme");
    } catch (error) {
      return null;
    }
  };

  const systemTheme = window.matchMedia(
    "(prefers-color-scheme: dark)"
  );

  const applyTheme = (theme) => {
    root.setAttribute("data-theme", theme);
    button.setAttribute("aria-pressed", String(theme === "dark"));
  };

  const saved = readSavedTheme();
  applyTheme(saved || (systemTheme.matches ? "dark" : "light"));

  button.addEventListener("click", () => {
    const next =
      root.getAttribute("data-theme") === "dark" ? "light" : "dark";

    applyTheme(next);

    try {
      localStorage.setItem("site-theme", next);
    } catch (error) {
      // The switch still works for this visit.
    }
  });

  systemTheme.addEventListener("change", (event) => {
    if (!readSavedTheme()) {
      applyTheme(event.matches ? "dark" : "light");
    }
  });
})();
</script>

Set the initial theme before the page paints if a brief flash is noticeable. An early inline check can read the same storage key and add data-theme to the HTML element, while the full script handles the button. Keep the site on one canonical domain, since browser storage is associated with the domain where the preference was saved.

Place the control in the Weebly interface

A fixed control in the upper corner is useful when you cannot edit your navigation directly. It remains available while a visitor scrolls and works across templates, but leave enough space so it cannot cover a mobile menu, support link or form field. On a wider screen, a header button beside the navigation usually feels more natural.

If you can edit the site header, insert the following markup there. Change the position with CSS, keep the button type as button, and ensure it appears only once on each page.

<button id="dark-mode-toggle"
        class="dark-mode-toggle"
        type="button"
        aria-pressed="false"
        aria-label="Dark mode">
  <span class="toggle-icon" aria-hidden="true"></span>
  <span class="toggle-label">Dark</span>
</button>

The aria-pressed attribute communicates the current state: true means dark mode is active. The following CSS provides a compact half-circle indicator, a visible pressed state and a strong keyboard focus ring. Adjust the dimensions to match your navigation.

.dark-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.dark-mode-toggle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.dark-mode-toggle[aria-pressed="true"] {
  color: var(--page-bg);
  background: var(--accent);
}

.toggle-icon {
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    currentColor 50%,
    transparent 50%
  );
}

Weebly's exact editor controls can vary by theme and plan, but the useful locations are the Header and Footer HTML panels, an Embed Code element or a page layout. Use a site-wide element for shared code and test pages with unusual templates, forms and shopping features before applying the design everywhere.

Test every important page and device

Start with the pages people use most: the home page, a long article, a gallery, a contact form and an order summary. Switch themes while each is open. Text should remain readable, menus should not disappear, and form validation messages should not rely on colour alone. Check that embedded maps, videos and product photos retain sensible brightness without a blanket filter.

Test on Android and iOS phones, Windows and macOS laptops, and both popular browsers. If your visitors include regional and remote communities, a modest mobile data allowance may make the site more important than a large desktop interface. A toggle that adds only a tiny script and CSS is usually inexpensive, but remote images and third-party embeds will affect performance far more than the theme control itself.

Use browser accessibility tools and keyboard navigation to verify the button. It must be reachable with Tab, activate with Enter and Space, and expose its state to assistive technology. For a visual benchmark, visit Larkn Raven and compare spacing, icons and responsive behaviour rather than copying a style that does not fit your content.

Launch a theme control visitors can use

Australian conditions add useful design context. Sydney, Melbourne, Brisbane and Perth sit in different time zones and daylight-saving patterns, so a website may be opened in full sun in one city while the visitor is heading home in another. A visitor on a crowded commuter train may also want a darker evening screen without reducing the clarity of an article or booking form.

The local market is well suited to this feature. Independent shops, studios, tourism operators, professional consultants and community organisations often use Weebly to publish compact sites, and a theme choice can become part of their brand. Offer both light and dark versions with equal quality; neither should look like an unfinished afterimage. If you need to adjust the visual palette first, the guide to one-click theme colours provides a useful companion approach.

Privacy and accessibility deserve deliberate attention. Under the Privacy Act 1988 and the Australian Privacy Principles, covered organisations should handle personal information transparently. A local theme preference stored only in the visitor's browser should not be confused with sending behavioural data to an advertising network, and any analytics that records the choice should be explained appropriately. Accessibility requirements also matter, with Australian Government services expected to meet WCAG 2.1 AA under the Digital Service Standard, although dark mode itself cannot replace accessible contrast or usable controls.

Publish the toggle in a measured release, ask regular readers to try it, and watch for support questions about where the control went. Keep the implementation documented so a future theme update does not silently break it. Add the button, connect the variables, test both palettes and publish the dark mode control.