Skip to main content
Version: v6.8.1

Layout

Layout

Isomorphic, our versatile theme, empowers you to shape the visual identity of your website through a selection of four distinct layouts: Hydrogen, Helium, Lithium, and Beryllium.

How to change default layout

Isomorphic recognizes that not every project needs the Hydrogen layout as the default. If your project falls into this category and you prefer a different starting point, you're in the right place. Let's tailor your experience by changing the default layout.

Isomorphic provides a TypeScript enum called LAYOUT_OPTIONS, that encapsulates the available layout choices. A detailed documentation is available here.

Let's assume we want to turn the Helium layout into default layout.

Now, go to src/hooks/use-layout.ts and replace LAYOUT_OPTIONS.HYDROGEN like following:

src/hooks/use-layout.ts
const isomorphicLayoutAtom = atom(
typeof window !== 'undefined'
? localStorage.getItem('isomorphic-layout')
- : LAYOUT_OPTIONS.HYDROGEN

+ : LAYOUT_OPTIONS.HELIUM
);

Finally, go to src/hooks/use-layout.ts and replace like following:

src/hooks/use-layout.ts
// 2. useLayout hook to check which layout is available
export function useLayout() {
const [layout, setLayout] = useAtom(isomorphicLayoutAtomWithPersistence);
return {
- layout: layout === null ? LAYOUT_OPTIONS.HYDROGEN : layout,

+ layout: layout === null ? LAYOUT_OPTIONS.HELIUM : layout,
setLayout,
};
}

Your are all set to use Helium layout as your default layout.

Note : If you want to change any of the layout to default, follow the same process.