Desktop UI

Styles

The library comes with a few helper CSS classes that can be used to change the appearance and behaviour of components.

Classes

  • .dui-theme-dark Set at body and can be used to apply styles for dark mode.
  • .dui-theme-light Set at body and can be used to apply styles for light mode.
  • .dui-normalized Normalizes all standard content like h1, anchors, p, etc. to a consistent look. This also sets scrollbars and box-sizing: border-box and disabled text-selection.
  • .text-selection Allows text selection
  • .overlay-scrollbar Enables overlay scrollbars with modern styles.
  • .overlay-scrollbar-small Enables overlay scrollbars with modern styles and smaller width.
  • .text-tabular Sets font-variant-numeric: tabular-nums
  • .text-light Sets text color to a light shade.

CSS Variables

color_theme
Preview
  • --dui-selection
  • --dui-selection-hover
  • --dui-selection-light
  • --dui-selection-unfocused
  • --dui-button-text
  • --dui-input-text
  • --dui-text-grey
  • --dui-text-light
  • --dui-color-text
  • --dui-color-green
  • --dui-color-red
  • --dui-color-orange
  • --dui-line-color-light
  • --dui-line-color
  • --dui-line-color-prominent
  • --dui-line-sidebar
  • --dui-focus-outline-color
  • --dui-window-content-bg
  • --dui-background-vibrancy
  • --dui-window-header-bg
  • --dui-window-content-bg-trans
  • --dui-toolbar-bg-trans