Terms of Service Privacy Policy

Registry Health Inspect

Canvas LMS Theme – shadcn/ui Theme by pantoken | shadcnregistry

Registries
pantoken
Canvas LMS Theme

Canvas LMS Theme

theme

Instructure Canvas LMS theme variables bridging to shadcn/ui custom properties.

pnpm dlx shadcn@latest add "https://pantoken.app/r/theme-canvas.json"

@pantoken/css
@pantoken/shadcn

Light Mode

--background:

var(--instui-color-background-base)

--foreground:

var(--instui-color-text-base)

--card:

var(--instui-color-background-container)

--card-foreground:

var(--instui-color-text-base)

--popover:

var(--instui-color-background-container)

--popover-foreground:

var(--instui-color-text-base)

--primary:

var(--instui-color-background-brand)

--primary-foreground:

var(--instui-color-text-on-color)

--secondary:

var(--instui-color-background-muted)

--secondary-foreground:

var(--instui-color-text-base)

--muted:

var(--instui-color-background-muted)

--muted-foreground:

var(--instui-color-text-muted)

--accent:

var(--instui-color-background-info)

--accent-foreground:

var(--instui-color-text-on-color)

--destructive:

var(--instui-color-background-error)

--destructive-foreground:

var(--instui-color-text-on-color)

--border:

var(--instui-color-stroke-base)

--input:

var(--instui-color-stroke-base)

--ring:

var(--instui-color-stroke-brand)

--radius:

var(--instui-spacing-space-sm)

Dark Mode

--background:

var(--instui-color-background-base)

--foreground:

var(--instui-color-text-base)

--card:

var(--instui-color-background-container)

--card-foreground:

var(--instui-color-text-base)

--popover:

var(--instui-color-background-container)

--popover-foreground:

var(--instui-color-text-base)

--primary:

var(--instui-color-background-brand)

--primary-foreground:

var(--instui-color-text-on-color)

--secondary:

var(--instui-color-background-muted)

--secondary-foreground:

var(--instui-color-text-base)

--muted:

var(--instui-color-background-muted)

--muted-foreground:

var(--instui-color-text-muted)

--accent:

var(--instui-color-background-info)

--accent-foreground:

var(--instui-color-text-on-color)

--destructive:

var(--instui-color-background-error)

--destructive-foreground:

var(--instui-color-text-on-color)

--border:

var(--instui-color-stroke-base)

--input:

var(--instui-color-stroke-base)

--ring:

var(--instui-color-stroke-brand)

--radius:

var(--instui-spacing-space-sm)