#Installation
npm install @solid-primitives/start
yarn add @solid-primitives/start
pnpm add @solid-primitives/start
#Readme
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
#createServerCookie
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[]
#createUserTheme
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"
#Examples
#root.tsx
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 betweencreateUserTheme
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 {
A,
Body,
ErrorBoundary,
FileRoutes,
Head,
Html,
Meta,
Routes,
Scripts,
Title,
} 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()}>
<Head>
<Title>SolidStart - Bare</Title>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
// Apply theme as a class to the Body element:
<Body class={theme()}>
<div>
<Counter
classList={{
// Within components apply theme-dependent classes/variants:
"dark-variant": theme() !== "light",
"light-variant": theme() === "light",
}}
/>
<button onClick={toggleTheme}>
<span>Toggle Theme</span>
</button>
</div>
<Scripts />
</Body>
</Html>
);
}
#root.css
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;
}
#Counter.css
Continuation of the basic CSS scoped to the component using variant classes.
.dark-variant {
border: 2px solid #569cf3;
}
.light-variant {
border: 2px solid #05ff22;
}
#Demo
You can view a demo of this primitive here: <CodeSandbox
#Changelog
See CHANGELOG.md