solid-theme v0.1.1

solid-theme

This is a port of next-themes for Solid and SolidStart.

Check out the Solid Vite Example or SolidStart Example to try it for yourself.

Install

$ npm install solid-theme
# or
$ yarn add solid-theme
# or
$ pnpm add solid-theme

Usage

With SolidStart

Note! We using the beta version 0.4.0 in this example.

Creating a new provider:

// src/components/theme-provider.tsx

import { ThemeProvider as SolidThemesProvide } from "solid-theme";

export type ThemeProviderProps = Parameters<typeof SolidThemesProvide>[0];

const ThemeProvider = (props: ThemeProviderProps) => {
	return <SolidThemesProvide {...props}>{props.children}</SolidThemesProvide>;
};

export default ThemeProvider;

Add the ThemeProvider component to your app.

// src/app.tsx

// @refresh reload
import { MetaProvider } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes, clientOnly } from "@solidjs/start";
import type { Component } from "solid-js";
import { Suspense } from "solid-js";
import type { ThemeProviderProps } from "./components/theme-provider";

const ThemeProvider = clientOnly<Component<ThemeProviderProps>>(
	() => import("./components/theme-provider"),
);

const App = () => {
	return (
		<Router
			root={(props) => (
				<MetaProvider>
					<Suspense>
						<ThemeProvider>
							{props.children}
						</ThemeProvider>
					</Suspense>
				</MetaProvider>
			)}
		>
			<FileRoutes />
		</Router>
	);
};

export default App;

With Solid

Add the ThemeProvider component to your index.

// src/index.tsx

/* @refresh reload */
import { render } from "solid-js/web";
import { ThemeProvider } from "solid-theme";
import App from "./App";
import "./index.css";

const root = document.getElementById("root");

render(
	() => (
		<ThemeProvider>
			<App />
		</ThemeProvider>
	),
	root!,
);

useTheme

You can update or get current theme using useTheme.

import { useTheme } from 'solid-theme'

const ThemeChanger = () => {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      The current theme is: {theme()}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
}

You can read more about API or other from the original next-themes.

License

Licensed under the MIT license.