Theme Toggle

A manual light/dark control for application sidebars. The next theme reveals smoothly from the exact interaction point, the user’s choice persists locally, and reduced-motion or unsupported browsers fall back to an immediate switch.

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeThemeToggleExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeThemeToggleExample/></NativeScope>}

Project setup

Light is the default. Restore the saved helios-ui-theme value on document.body before React hydrates, and add suppressHydrationWarning to the body because its theme class is set in the browser.

usage

'use client';
import type {ReactNode} from 'react';
import '@helios-ui/react/styles.css';
const themeScript='(function(){try{document.body.classList.toggle("dark",localStorage.getItem("helios-ui-theme")==="dark")}catch(e){document.body.classList.remove("dark")}})();';
export default function RootLayout({children}:{children:ReactNode}){return <html lang="en"><body suppressHydrationWarning><script dangerouslySetInnerHTML={{__html:themeScript}}/>{children}</body></html>}

Collapsed sidebar

Set collapsed for a 36px icon-only control that fits a compact sidebar rail while keeping the same accessible pressed state.

usage

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeThemeToggle} from '@helios-ui/react';
export function Example(){return <NativeScope><NativeThemeToggle collapsed/></NativeScope>}

Advanced playground, API and recovery states ↗

Theme Toggle

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeThemeToggleExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeThemeToggleExample/></NativeScope>}

Project setup

Light is the default. Restore the saved helios-ui-theme value on document.body before React hydrates, and add suppressHydrationWarning to the body because its theme class is set in the browser.

usage

'use client';
import type {ReactNode} from 'react';
import '@helios-ui/react/styles.css';
const themeScript='(function(){try{document.body.classList.toggle("dark",localStorage.getItem("helios-ui-theme")==="dark")}catch(e){document.body.classList.remove("dark")}})();';
export default function RootLayout({children}:{children:ReactNode}){return <html lang="en"><body suppressHydrationWarning><script dangerouslySetInnerHTML={{__html:themeScript}}/>{children}</body></html>}

Collapsed sidebar

Set collapsed for a 36px icon-only control that fits a compact sidebar rail while keeping the same accessible pressed state.

usage

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeThemeToggle} from '@helios-ui/react';
export function Example(){return <NativeScope><NativeThemeToggle collapsed/></NativeScope>}

Advanced playground, API and recovery states ↗

Theme Toggle

Installation

Project setup

Collapsed sidebar

Search Helios UI

Theme Toggle

Installation

Project setup

Collapsed sidebar

Search Helios UI