There is a newer version of Luda.

Let's go!


With the power of Sass, you can extend Luda themes just as you wish.

Override Built in Styles

Luda themes are written in Sass, you can override certain css selectors to change built in styles. The source code is idempotent, that means you focus on selector priorities but not orders when overriding. In this way, your styles are more stable and maintainable.

For convinence, there are some built-in modifier classes to change the appearances of components. Each modifier class is marked as Modifier in this documentation. If they’re not enough for you, you can create your own modifiers.

Override Default Variables

Theme Sass variables are defined with the !default flag. You should define your variables before importing Luda theme variables, so built-in variables with the same names will be overriten.

There are two types of theme variables, global variables and component variables. Component variables targets spefic components, they can be referenced in each component’s document. Global variables are used to define global style rules across components. If a global variable is changed, any component references to it will inherit its style defination. You can find all global variables in the list below.

Global Sass Variables


$breakpoint-width-pxs: (s: 0, m: 768px, l: 1200px) !default

You can override this variable according to your needs, make sure the value is a sass map. Except the key of the first pair in the map, all the other keys are treated as postfixes which will be added to the end of responsive components’ classnames.

$breakpoint-aspect-ratios: (p: 0, l: 1.0001) !default

Default defination of screen aspect ratio breakpoints, make sure the value is a map if you want to change it.

$breakpoint-resolutions: (l: 0, h: 105.6dpi, xh: 201.6dpi) !default

Default defination of screen resolution breakpoints, make sure the value is a map if you want to change it.


$spacing-base-rem: 1rem !default
$spacing-tiny-rem: $spacing-base-rem / 2 !default
$spacing-small-rem: $spacing-base-rem !default
$spacing-medium-rem: $spacing-base-rem * 2 !default
$spacing-large-rem: $spacing-base-rem * 4 !default


$typography-main: constant-get(typography-stacks, sans-serif) !default

Default font family of body texts.

$typography-main-baseline-offset-ratio: constant-get(baseline-offset-ratios, "Helvetica Neue") !default

Default baseline offset ratio of body texts font family, it’s used to calculate text paddings for better baseline alignment.

$typography-main-size-px: 14px !default

Default font size of body texts. A calculated rem value will be used to set the font-size property of body.

$typography-main-size-level: 5 !default

Default font size level of body texts. The value must be an integer between 1 and 6.

$typography-size-scale-ratio: constant-get(scale-ratios, minor-third) !default

Default type scale ratio of texts. Different level font sizes are calculated based on this variable and $typography-main-size-level.

$typography-main-line-height-ratio: 26 / 14 !default

Default line height of body texts. The height of baseline grid is calculated based on this variable and $typography-main-size-px.

$typography-main-color: $color-main !default

Default color of body texts.


$z-index-low: -1 !default
$z-index-normal: 0 !default
$z-index-high: 1 !default
$z-index-higher: 2 !default
$z-index-much-higher: 3 !default
$z-index-highest: 4 !default


$opacity-emphasis: 1 !default
$opacity-main: 0.9 !default
$opacity-muted: 0.618 !default
$opacity-more-muted: 0.382 !default
$opacity-most-muted: 0.1 !default
$opacity-disabled: $opacity-muted !default


$color-primary: hsba(340, 54, 98) !default
$color-secondary: hsba(0, 0, 56) !default
$color-danger: hsba(0, 82, 82) !default
$color-dark: hsba(0, 0, 32) !default
$color-light: hsba(0, 0, 100) !default
$color-emphasis: $color-dark !default
$color-main: lighten($color-dark, 10%) !default
$color-muted: lighten($color-dark, 50%) !default
$color-inverse-emphasis: $color-light !default
$color-inverse-main: rgba($color-light, $opacity-main) !default
$color-inverse-muted: rgba($color-light, $opacity-muted) !default


$background-color-primary: $color-primary !default
$background-color-secondary: lighten($color-secondary, 30%) !default
$background-color-danger: $color-danger !default
$background-color-dark: $color-dark !default
$background-color-light: $color-light !default
$background-color-muted: darken($background-color-light, 3%) !default
$background-color-emphasis: lighten($background-color-primary, 22%) !default
$background-color-main: $background-color-light !default
$background-color-inverse-emphasis: lighten($background-color-primary, 22%) !default
$background-color-inverse-main: $background-color-dark !default
$background-color-inverse-muted: lighten($background-color-dark, 3%) !default


$line-width-main: 1px !default
$line-color-primary: $color-primary !default
$line-color-secondary: lighten($color-secondary, 30%) !default
$line-color-danger: $color-danger !default
$line-color-dark: $color-dark !default
$line-color-light: $color-light !default
$line-color-emphasis: $line-color-primary !default
$line-color-main: lighten($line-color-dark, 60%) !default
$line-color-muted: lighten($line-color-dark, 40%) !default
$line-color-inverse-emphasis: $line-color-primary !default
$line-color-inverse-main: rgba($line-color-light, $opacity-main) !default
$line-color-inverse-muted: rgba($line-color-light, $opacity-muted) !default
$border-radius-sharp: 0 !default
$border-radius-rounded: 2px !default
$border-radius-circle: 9999px !default
$border-radius-main: $border-radius-sharp !default


$box-shadow-low: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08) !default
$box-shadow-normal: 0 0.56rem 1.68rem rgba(0, 0, 0, 0.112) !default
$box-shadow-high: 0 0.784rem 2.352rem rgba(0, 0, 0, 0.1568) !default
$box-shadow-inset-low: null !default
$box-shadow-inset-normal: null !default
$box-shadow-inset-high: null !default
$text-shadow-low: null !default
$text-shadow-normal: null !default
$text-shadow-high: null !default


$transition-duration-short: 0.25s !default
$transition-duration-normal: 0.5s !default
$transition-duration-long: 1s !default
$transition-timing-function-main: ease !default


$base-cursor: default !default

Default cursor of html.

$base-word-break: break-word !default

Default word break rule of body texts.

$base-text-underline-position: under !default
$base-text-rendering: optimizeLegibility !default
$base-webkit-font-smoothing: antialiased !default
$base-moz-font-smoothing: grayscale !default
$base-tap-highlight-color: transparent !default
$base-webkit-touch-callout: none !default
$base-html-background: $background-color-inverse-muted !default
$base-body-min-height: 100vh !default
$base-body-background: $background-color-main !default
$base-selection-color: $color-inverse-main !default
$base-selection-background-color: $background-color-dark !default