new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · all subjects

theming & css variables

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Alert custom color styling

Alert colors can be customized by adding custom classes to the Alert component, such as bg-amber-50 dark:bg-amber-950.

Chart CSS variables for light mode

For light mode charts, add these CSS variables to your CSS file: --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08);

Chart color reference format

To use theme colors in a chart, reference colors using the format var(--color-KEY) where KEY is the key from your chartConfig object. This works in components like Bar, chart data objects, and Tailwind classes.

Chart config example with CSS variables

Example of chart config using CSS variables: ```tsx const chartConfig = { desktop: { label: "Desktop", color: "var(--chart-1)", }, mobile: { label: "Mobile", color: "var(--chart-2)", }, } satisfies ChartConfig ```

Chart color formats supported

Charts support multiple color formats in chartConfig: hex (e.g. #2563eb), hsl (e.g. hsl(220, 98%, 61%)), oklch (e.g. oklch(0.5 0.2 240)), and CSS variables (e.g. var(--chart-2)).

Give your agent this brain