Custom Code

This component should be placed at the top of the Navigator—inside the page-wrapper, but outside the main-wrapper—on every page. It contains the core theming logic and essential global styles for your project. This embed ensures consistency across all pages and centralizes key styling logic in one place.

The Theme Color embed manages the connection between your variable settings and active theme modes. You can easily customize themes—such as buttons and accent colors—by linking the appropriate CSS variable values within the Webflow Variables panel. To create new modes, simply add the corresponding custom code.

The Page Settings embed applies global configurations across your entire project. It includes important resets and tweaks—such as font smoothing or default spacing adjustments—that could otherwise be set manually within the Webflow Designer. Centralizing them here ensures consistency and speeds up project setup.