ds_theme: Designsystemet Theme
In shinyds: 'Shiny' Bindings for Designsystemet Components

ds_theme

R Documentation

Designsystemet Theme

Description

Override Designsystemet CSS tokens for color, typography, and spacing. Call inside your UI alongside use_designsystemet().

Usage

ds_theme(
  color = NULL,
  font_size = NULL,
  border_radius = NULL,
  button_padding = NULL,
  ...
)

Arguments

`color`	Global color context. One of `"default"`, `"brand1"`, `"brand2"`, `"neutral"`, `"success"`, `"warning"`, `"danger"`, `"info"`. Sets `data-color` on `⁠<html>⁠`.
`font_size`	Base font size as a CSS value (e.g. `"16px"`, `"1rem"`). Overrides `--ds-font-size-base` on `⁠:root⁠`.
`border_radius`	Border radius as a CSS value (e.g. `"4px"`, `"0"`). Overrides `--ds-border-radius-md` on `⁠:root⁠`.
`button_padding`	Padding for buttons as a CSS shorthand (e.g. `"0.4rem 0.9rem"`). Overrides `--dsc-button-padding` on `⁠:root⁠`.
`...`	Named CSS custom property overrides in the form `"--ds-token-name" = "value"`. Applied to `⁠:root⁠`.

Details

Color palette tokens follow the Designsystemet naming convention. Use data-color="brand2" on a container to switch its color context, or set color here to change the global default.

Value

A ⁠<style>⁠ tag applied to ⁠:root⁠ and optionally a JS snippet to set data-color on ⁠<html>⁠.

Examples

ui <- bslib::page_fluid(
  use_designsystemet(),
  ds_theme(color = "brand1", border_radius = "2px", button_padding = "0.3rem 0.8rem"),
  ds_button("Click me", inputId = "btn")
)

shinyds documentation built on Aug. 22, 2026, 5:08 p.m.