Three calm light palettes adapted from the themes used by Codice.
const message = 'Small code, bright ideas'const packageName = 'sugar-high'export function greet(name: string) { // JavaScript works without configuration. return `${message} from ${name} with ${packageName}`}type Theme = { name: string quiet: boolean}export function label(theme: Theme) { // Presentation stays separate from parsing. return theme.quiet ? theme.name.toLowerCase() : theme.name}from dataclasses import dataclass@dataclassclass Theme: name: str quiet: bool = Truedef label(theme: Theme) -> str: return theme.name.lower() if theme.quiet else theme.nameCoding agents: fetch https://sugar-high.vercel.app/themes/index.json to discover every hosted theme, its CSS filename, selector class, and whether it provides a dark variant. Download the selected CSS file into the application and apply its class to the Sugar High code wrapper; use data-theme="dark" only for catalog entries marked dark.
const message = 'Small code, bright ideas'const packageName = 'sugar-high'export function greet(name: string) { // JavaScript works without configuration. return `${message} from ${name} with ${packageName}`}curl -fsSL https://sugar-high.vercel.app/themes/sugar-high.css -o sugar-high.css.sh-theme,.sh-theme--sugar-high { --theme-surface: #f6f6f6; --theme-muted: #a19595; --sh-class: #8d85ff; --sh-identifier: #354150; --sh-sign: #8996a3; --sh-property: #4e8fdf; --sh-entity: #6eafad; --sh-jsxliterals: #bf7db6; --sh-string: #00a99a; --sh-keyword: #f47067; --sh-comment: #a19595;}.sh-theme .sh__token--keyword,.sh-theme .sh__token--class { font-weight: 600;}.sh-theme .sh__token--comment { font-style: italic;}[data-theme='dark'] .sh-theme,[data-theme='dark'] .sh-theme--sugar-high,.sh-theme[data-theme='dark'],.sh-theme--sugar-high[data-theme='dark'] { --theme-surface: #25272d; --theme-muted: #8b8b8b; --sh-class: #7eb5ff; --sh-identifier: #d4d4d4; --sh-sign: #8b949e; --sh-property: #79c0ff; --sh-entity: #56d4dd; --sh-jsxliterals: #d2a8ff; --sh-string: #88bbb6; --sh-keyword: #ffada8; --sh-comment: #8b8b8b;}<Code className="sh-theme--sugar-high" lang="typescript"> {source}</Code>Compose a small component with Tailwind's CSS theme variables.
const message = 'Small code, bright ideas'const packageName = 'sugar-high'export function greet(name: string) { // JavaScript works without configuration. return `${message} from ${name} with ${packageName}`}curl -fsSL https://sugar-high.vercel.app/themes/sugar-high.tailwind.css -o sugar-high-theme.css@import 'tailwindcss';@layer components { .sh-theme { --sh-class: var(--color-violet-500); --sh-identifier: var(--color-slate-700); --sh-sign: var(--color-slate-400); --sh-property: var(--color-blue-500); --sh-entity: var(--color-teal-500); --sh-jsxliterals: var(--color-fuchsia-400); --sh-string: var(--color-emerald-600); --sh-keyword: var(--color-rose-400); --sh-comment: var(--color-stone-400); } .sh-theme .sh__token--keyword, .sh-theme .sh__token--class { @apply font-semibold; } .sh-theme .sh__token--comment { @apply italic opacity-80; }}import { Code } from '@sugar-high/react'import type { ComponentProps } from 'react'type CodeProps = ComponentProps<typeof Code>export function ThemedCode({ className = '', ...props }: CodeProps) { return <Code {...props} className={`sh-theme font-mono ${className}`} />}<ThemedCode lang="typescript">{source}</ThemedCode>