UI & Theming

The host injects the internote's design tokens as CSS custom properties into the plugin iframe's :root before the first render. Your plugin can reference them directly in CSS without any SDK calls — they are available immediately and update automatically when the theme changes.

Colours

Use semantic colour variables rather than hardcoded hex values. Semantic variables adapt to light and dark mode automatically.

Backgrounds

• --bg-primary — the main page background
• --bg-primary-glass — primary background at 30% opacity (for overlays)
• --bg-primary-glass-heavy — primary background at 70% opacity
• --bg-secondary — slightly offset surface (cards, panels)
• --bg-secondary-glass — secondary background at 30% opacity
• --bg-secondary-glass-heavy — secondary background at 70% opacity

Foregrounds

Each background variable has a paired foreground for legible text on that surface:

• --bg-primary-foreground
• --bg-secondary-foreground
• --bg-primary-glass-foreground
• --bg-secondary-glass-foreground

Accent

The accent colour is chosen by each Internote user. Use accent variables for interactive elements, highlights, and branded moments so the plugin feels native to the user's workspace.

• --accent-1 — lightest accent tint (backgrounds, subtle fills)
• --accent-2 through --accent-4 — light tints
• --accent-5 — mid accent (borders, dividers)
• --accent-6 through --accent-8 — strong accent (interactive states)
• --accent-9 — primary accent (buttons, key highlights)
• --accent-10 — darkest accent
• --accent-1-glass — accent-1 at 50% opacity
• --accent-{n}-foreground — legible text colour on each accent shade

Hue Palettes

Every hue in the system (grey, red, orange, blue, green, yellow, purple, pink, teal, gold) exposes ten shades and glass/foreground variants:

• --{hue}-{1–10} — shade from lightest to darkest
• --{hue}-1-glass — lightest shade at 50% opacity
• --{hue}-{n}-foreground — legible text on that shade

Use hue palettes when you need a specific colour that is independent of the user's accent choice — for example, a red for errors or a green for success states.

Using Colours in CSS

.my-button {
  background: var(--accent-9);
  color: var(--accent-9-foreground);
  border: 1px solid var(--accent-7);
}

.my-card {
  background: var(--bg-secondary);
  color: var(--bg-secondary-foreground);
}

.my-error {
  background: var(--red-2);
  color: var(--red-9-foreground);
  border: 1px solid var(--red-5);
}

Fonts

Font family variables reflect the active typeface. The font family can change if the user has selected a different face for readability.

• --font-family-sans — the primary UI sans-serif typeface
• --font-family-serif — a serif typeface
• --font-family-mono — a monospace typeface (for code)
• --font-family-academic — an academic or formal typeface

body {
  font-family: var(--font-family-sans);
}

.code-block {
  font-family: var(--font-family-mono);
}

Board Unit

Use --unit-board for font sizes, padding, and gaps. It adapts automatically to the user's accessibility settings and to fullscreen mode, keeping your plugin proportional to the surrounding content without any extra work.

.my-label {
  font-size: calc(var(--unit-board) * 0.9);
  padding: calc(var(--unit-board) * 0.5) var(--unit-board);
  gap: calc(var(--unit-board) * 0.5);
}

Responding to Theme Changes

The host updates the injected CSS variables automatically when the mode or accent changes — your CSS will reflow without any JavaScript. If your plugin has JavaScript-driven rendering (canvas, WebGL) that uses colour values, listen for theme changes to re-read the variables.

internote.ui.onThemeChange

Registers a handler that fires whenever the theme changes. The CSS variables are already updated by the time the handler runs — re-read them and redraw.

• handler (function; required). Called with no arguments.
• Returns void

internote.ui.onThemeChange(() => {
  updateCanvasColours(getThemeColours())
})

Reading CSS Variables in JavaScript

For canvas or WebGL rendering, read the injected variables using getComputedStyle:

function getCSSVar(name) {
  return getComputedStyle(document.documentElement)
    .getPropertyValue(name).trim()
}

function getThemeColours() {
  return {
    background: getCSSVar('--bg-primary'),
    foreground: getCSSVar('--bg-primary-foreground'),
    accent: getCSSVar('--accent-9'),
    accentFg: getCSSVar('--accent-9-foreground'),
  }
}

internote.onInitialize(({ attrs }) => {
  const colours = getThemeColours()
  initCanvas(colours)
  internote.ready()
})

internote.ui.onThemeChange(() => {
  updateCanvasColours(getThemeColours())
})