# 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, the dev app [extends the default theme](https://github.com/kobaltedev/solidbase/blob/main/dev/vite.config.mts) to add [OpenGraph](https://ogp.me) 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.

```ts
<!-- vite.config.ts -->
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 with `createSolidBase`:

```ts
<!-- vite.config.ts -->
import solid from "@solidjs/vite-plugin";
import { defineConfig } from "vite";
import { createSolidBase, defineTheme } from "@kobalte/solidbase/config";
import defaultTheme from "@kobalte/solidbase/default-theme";

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

const solidBase = createSolidBase(customTheme);

export default defineConfig({
	plugins: [
		solid(solidBase.startConfig()),
		solidBase.plugin({
			// 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.

```tsx
<!-- Layout.tsx -->
import { Layout } from "@kobalte/solidbase/default-theme/Layout";

export default function (props: ComponentProps<typeof Layout>) {
	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.

```tsx tab title="Layout.tsx"
import Layout from "@kobalte/solidbase/default-theme/Layout";

import "./custom.css";

export default function () { ... };
```

```css tab title="custom.css"
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](/reference/default-theme/css-variables).

### Using Different Fonts

The default theme uses a few fonts:

* [Lexend](https://www.lexend.com) for headings
* [Inter](https://rsms.me/inter) for text
* [JetBrains Mono](https://www.jetbrains.com/lp/mono/) for code

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

```ts
<!-- vite.config.ts -->
export default defineConfig({
	plugins: [
		solid(solidBase.startConfig()),
		solidBase.plugin({
			themeConfig: {
				fonts: false,
			},
		}),
	],
})
```

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

```css
<!-- custom.css -->
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](/reference/default-theme#components).

```tsx
<!-- Layout.tsx -->
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>
	)
}
```