Documentation

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 light/dark styling of the component

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

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.

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.).

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.).

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.).

Dark Mode Using Frame Styles

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.