Extending Themes

You can extend the default theme if you'd like to preserve the default theme's functionality while adding your own customisations. SolidBase offers the ability to extend this theme, allowing you to build upon its existing features without starting from scratch. For example, these docs extend the default theme to add OpenGraph tags

Create an Extended Theme

To extend the default theme, you must define a custom theme using defineTheme, setting its extends property to the defaultTheme, imported from @kobalte/solidbase/default-theme, and configuring the componentsPath property to point to the folder housing your custom theme's components.

import { defineTheme } from "@kobalte/solidbase/config";
import defaultTheme from "@kobalte/solidbase/default-theme";

const customTheme =  defineTheme({
  componentsPath: import.meta.resolve("./src/custom-theme"),
  extends: defaultTheme,
}),

import { defineTheme } from "@kobalte/solidbase/config";
import defaultTheme from "@kobalte/solidbase/default-theme";

const customTheme =  defineTheme({
  componentsPath: import.meta.resolve("./src/custom-theme"),
  extends: defaultTheme,
}),

Once the theme is defined, you can set it as the active theme in your SolidBase config, using the createWithSolidBase helper to wrap your configuration:

import { defineTheme } from "@kobalte/solidbase/config";
import defaultTheme from "@kobalte/solidbase/default-theme";

const customTheme =  defineTheme({
  componentsPath: import.meta.resolve("./src/custom-theme"),
  extends: defaultTheme,
}),

export default defineConfig(
  createWithSolidBase(customTheme)(
    // your solidbase configuration
  )
);

import { defineTheme } from "@kobalte/solidbase/config";
import defaultTheme from "@kobalte/solidbase/default-theme";

const customTheme =  defineTheme({
  componentsPath: import.meta.resolve("./src/custom-theme"),
  extends: defaultTheme,
}),

export default defineConfig(
  createWithSolidBase(customTheme)(
    // your solidbase configuration
  )
);

To complete the setup, in the folder specified by componentsPath, create a Layout file that re-exports the default theme's Layout component. In this file, you can add any custom logic or components you'd like to appear on every page, so long as you render the Layout component somewhere in the returned JSX.

import { Layout } from "@kobalte/solidbase/default-theme/Layout";

export default function (props: ComponentProps<typeof Layout>) {
  return <Layout {...props} />
}

import { Layout } from "@kobalte/solidbase/default-theme/Layout";

export default function (props) {
  return <Layout {...props} />;
}

Customizing the CSS

The default theme uses CSS variables for theming that you can override in your own CSS file. To add your own CSS file, simply import it in your Layout file.

import Layout from "@kobalte/solidbase/default-theme/Layout";

import "./custom.css";

export default function () { ... };

import Layout from "@kobalte/solidbase/default-theme/Layout";

import "./custom.css";

export default function () { ... };

html {
  --sb-background-color: white;
}

html[data-theme*="dark"] {
  --sb-background-color: black;
}

To see the full list of available CSS variables, refer to the CSS Variables reference.

Using Different Fonts

The default theme uses a few fonts:

Lexend for headings
Inter for text
JetBrains Mono for code

To disable these fonts, set the fonts option to false in your SolidBase config:

export default defineConfig(withSolidBase(
  ...,
  {
    themeConfig: {
      fonts: false
    }
  }
))

export default defineConfig(withSolidBase(
  ...,
  {
    themeConfig: {
      fonts: false
    }
  }
))

You can then provide your own fonts by overriding the variables in the CSS file you imported in your Layout component.

html {
  --sb-font-headings: "Comic Sans";
  --sb-font-text: "Comic Sans";
  --sb-font-mono: "Comic Sans";
}

Overriding Components

Beyond the markdown components, you can also override components used in the layout. These components can be overridden using the DefaultThemeComponentsProvider and passing in your custom components.

The full list of components that can be overridden is available in the reference documentation.

import Layout from "@kobalte/solidbase/default-theme/Layout";
import { DefaultThemeComponentsProvider } from "@kobalte/solidbase/default-theme/context.js";
import Article from "@kobalte/solidbase/default-theme/components/Article";

export default function (props: ComponentProps<typeof Layout>) {
  return (
    <DefaultThemeComponentsProvider
      components={{
        Article: CustomArticle,
      }}
    >
      <Layout {...props} />
    </DefaultThemeComponentsProvider>
  )
}

function CustomArticle(props: ComponentProps<typeof Article>) {
  return (
    <Article {...props}>
      {/* Will appear inside the page's <article>, above markdown content */}
      <span>We love SolidBase!</span>
      {props.children}
    </Article>
  )
}

import Layout from "@kobalte/solidbase/default-theme/Layout";
import { DefaultThemeComponentsProvider } from "@kobalte/solidbase/default-theme/context.js";
import Article from "@kobalte/solidbase/default-theme/components/Article";

export default function (props) {
  return (
    <DefaultThemeComponentsProvider
      components={{
        Article: CustomArticle,
      }}
    >
      <Layout {...props} />
    </DefaultThemeComponentsProvider>
  );
}

function CustomArticle(props) {
  return (
    <Article {...props}>
      {/* Will appear inside the page's <article>, above markdown content */}
      <span>We love SolidBase!</span>
      {props.children}
    </Article>
  );
}

Last updated: 10/13/25, 4:43 PM

Edit this page on GitHub