npm install @solid-primitives/start
yarn add @solid-primitives/start
pnpm add @solid-primitives/start


A set of primitives for Solid Start

  • createServerCookie - Provides a getter and setter for a reactive cookie, which works isomorphically.
  • createUserTheme - Creates a Server Cookie providing a type safe way to store a theme and access it on the server or client.

#How to use it


A primitive for creating a cookie that can be accessed isomorphically on the client, or the server.

const [cookie, setCookie] = createServerCookie("cookieName");

cookie(); // => string | undefined

#Custom serialization

Custom cookie serializers and deserializers can also be implemented

const [serverCookie, setServerCookie] = createServerCookie("coolCookie", {
  deserialize: str => (str ? str.split(" ") : []), // Deserializes cookie into a string[]
  serialize: val => (val ? val.join(" ") : ""), // serializes the value back into a string

serverCookie(); // => string[]


Composes createServerCookie to provide a type safe way to store a theme and access it on the server or client.

const [theme, setTheme] = createUserTheme("cookieName");

theme(); // => "light" | "dark" | undefined

// with default value
const [theme, setTheme] = createUserTheme("cookieName", {
  defaultValue: "light",

theme(); // => "light" | "dark"



This is the main entry file for SolidStart demonstrating usage of the createUserTheme function.

  • Initializes the theme with the createUserTheme function.
  • Toggles between the "dark" and "light" themes using a button.
  • Sets the data-theme attribute adding compatibility between createUserTheme and libraries like DaisyUI.
  • Includes a clean implementation of theming through a Body class.
  • Provides additional examples on using variant classes to style components.
import { Suspense } from "solid-js";
import {
} from "solid-start";
import Counter from "./components/Counter";
import "./root.css";
import { createUserTheme } from "~/primitives/start";

export default function Root() {
  const [theme, setTheme] = createUserTheme("dark-light-theme", { defaultValue: "dark" });
  const toggleTheme = () => setTheme(currentTheme => (currentTheme === "dark" ? "light" : "dark"));

  return (
    // Set data-theme when using libraries like Daisyui:
    <Html lang="en" data-theme={theme()}>
        <Title>SolidStart - Bare</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      // Apply theme as a class to the Body element:
      <Body class={theme()}>
              // Within components apply theme-dependent classes/variants:
              "dark-variant": theme() !== "light",
              "light-variant": theme() === "light",
          <button onClick={toggleTheme}>
            <span>Toggle Theme</span>
        <Scripts />


Here is an absolute basic CSS file to demonstrate styling with the themes.

  • The body selector has general styles.
  • The .dark and .light classes provide specific styles for each theme.
  • The .dark span and .light span selectors show how to style specific elements based on the theme.
body {
  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  height: "100vh";
  width: "100vh";

body.dark {
  background-color: black;
  color: aliceblue;
body.light {
  background-color: aliceblue;
  color: black;

.dark span {
  color: #b1d4ff;
.light span {
  color: #003677;


Continuation of the basic CSS scoped to the component using variant classes.

.dark-variant {
  border: 2px solid #569cf3;

.light-variant {
  border: 2px solid #05ff22;


Live Site

You can view a demo of this primitive here: <CodeSandbox