Documentation

All the informations you need to get you started

Made with Native Frames and Variants
Works in Preview & Live Site

Modex — Light/Dark Mode Switcher for Framer

**Made with Native Frames and Variants**

**Works in Preview & Live Site**

Modex is a Framer component with **3 variants**:

- **Loading**

- **Light**

- **Dark**

It also exposes **2 events**:

- **onLight**

- **onDark**

After purchasing, you’ll receive

- **One component URL**: **Modex**

- **A JSON styles file**: for automatic light/dark mode switching (covered later)

This guide focuses on using the **Modex** component: adding it to your canvas, adapting styles, and customizing it.

1) Getting Started

Adding Modex

1. Copy the **Modex component URL**.

2. In Framer, **paste the URL onto your canvas**.

3. The component is now added to **Assets → Netoum / Modex**.

2) Styling (Framer Styles)

Using Light and Dark mode in Framer requires creating and using **Styles** (with Light and Dark values).

Create your first Framer Style (if you don’t already have one)

1. Select your **page background** layer.

2. In the right panel, under **Fill**, create a **new style** from the color.

3. Set the **Dark** color value and save.

Now when you toggle using **Modex**, you should see your background change.

Next, you’ll need to create/adapt **dark-mode styles** for the rest of your site (fills, borders, text, icons, etc.).

3) Customization

You can configure Modex directly from the **right panel props** on the canvas instance (no detaching required), including:

- **Initial mode**: light / dark / auto

- **Sync with system**

- **Direction** (LTR / RTL)

- **ARIA label**

- **Form input name/value/required**

- **Events**: **onLight**, **onDark**

- **Styling for all elements**

Full design customization (detaching)

Detach only if you want to **edit the internal frames/variants** (visual design):

1. **Duplicate** the Modex instance (recommended) so you keep an original.

2. **Detach the instance** to unlock editing.

3. Edit the **Loading / Light / Dark** variants to match your design system (sizes, radii, icons, etc.).

4) Modex State (Variants)

The Modex State component controls the visual feedback for the switcher using Framer variants:

- **Light** — state to show when light mode is on

- **Dark** — state to show when dark mode is on

- **Loading** — initial/loading state while theme is being determined

Customize these variants to match your design system (sizes, radii, icons, transitions, etc.).

5) Automatic Dark Mode Using Frame Styles (Style IO)

Framer currently doesn’t provide a built-in way to ship component styles with a component.

To support automatic light/dark mode quickly, use the provided **JSON Styles** file with the **Style IO** plugin.

Importing the styles

1. Download the provided **JSON Styles** file.

2. In Framer, open the **Plugins** panel and search for **Style IO**.

3. Import the JSON file.

4. The imported styles will appear in the **Styles** panel.

Applying styles to Modex

Apply the imported styles to the relevant layers (example mapping):

- **Modex State Variant: Light**

- Light State → **Fill Color** → Background style

- Light State → **Border Color** → Border style

- Moon/Icon → **Stroke Color** → Contrast style

Repeat the same approach for **Dark** variant layers using the corresponding dark-mode styles.

<script>
(function() {
    const CONFIG = "light"; // "light", "dark", or "auto"
    const STORAGE_KEY = "modex-theme";

    const getSystem = () =>
        window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";

    const theme = (() => {
        try {
            const saved = localStorage.getItem(STORAGE_KEY);
            if (saved === "light" || saved === "dark") return saved;
        } catch {}
        return CONFIG === "auto" ? getSystem() : CONFIG;
    })();

    document.body.setAttribute("data-framer-theme", theme);

    for (const tag of document.getElementsByTagName("style")) {
        if (tag.innerHTML.includes("prefers-color-scheme")) {
            tag.innerHTML = tag.innerHTML.replace(/prefers-color-scheme:\s*\w+/g,
                `prefers-color-scheme: ${theme === "light" ? "dark" : "light"}`);
        }
    }
})();
</script>