theme

You can change the look and feel of the dashboard by applying the theme prop to your Dashboard component. For example

import Vizzly from '@vizzly/dashboard';
 
const MyAppDashboard = () =>
  <Vizzly.Dashboard
    theme={{
      rowLimit: 6,
      // more theme properties in here...
    }}
  />

See a full example of the theme property here (opens in a new tab)!

Versions

By default the dashboard uses Version 2 theme. If you find your current design was built around the previous design you can set the version number to 1. To change you can set the property to version: 1. See example below.

The theme type definition hasn't changed between version 1 and version 2.

<Vizzly.Dashboard
  theme={{
    version: 1,
  }}
/>

<Vizzly.Dashboard
  theme={{
    version: 2,
  }}
/>

Properties

Apart from the detail and rowLimit props, the theme properties aren't mandatory. If you don't specify a value, default values are used.

CSSProperties allows typing for styles using CSSType. You're able to use type assertion or module augmentation to add properties or an index signature of your own.

For examples and more information, visit: https://github.com/frenic/csstype (opens in a new tab)

Design Tokens with CSS Custom properties

The Theme API accepts Custom properties, also known as CSS variables. If you have defined your Design Tokens in a CSS file or in the head tag of your application, these can be used in the Vizzly Theme API.

To find out more about Custom properties visit https://developer.mozilla.org/en-US/docs/Web/CSS/--*/ (opens in a new tab)

<Head>
  <title>My applications title</title>
  <style>
    :root {
      --dk-mode-color-1:         #010409;
      --dk-mode-color-2:         #30363d;
      --dk-mode-color-3:         #c9d1d9;
      --dk-mode-highlight-color: #3899EC;
 
      --font-size-standard:      14px;
      --font-size-small:         12px;
      --font-weight:             400;
 
      --border-radius:           6px;
      --border-color:            var(--dk-mode-color-2);
    }
  </style>
</Head>
 
const MyAppDashboard = () => (
  <Vizzly.Dashboard
    theme={{
      rowLimit: 6,
      detail: "minimal",
        forms: {
          select: {
            background: "var(--dk-mode-color-1)",
            borderRadius: "var(--border-radius)",
            border: "1px solid var(--border-color)",
            fontSize: "var(--font-size-standard)",
            padding: "6.25px 0.5rem",
            boxShadow: "inset 0 0 0 1px  transparent",
            color: "var(--dk-mode-color-3)",
            "&:hover": {
              border: "1px solid var(--dk-mode-highlight-color)",
              boxShadow: "inset 0 0 0 1px transparent",
            },
            "&:focus": {
              border: "1px solid var(--dk-mode-highlight-color)",
            },
            indicatorColor: "var(--dk-mode-highlight-color)",
          },
        },
        dropdowns: {
          fontSize: "var(--font-size-small)",
          background: "var(--dk-mode-color-2)",
          color: "var(--dk-mode-color-3)",
          boxShadow: "0 8px 24px var(--dk-mode-color-1)",
          borderRadius: "var(--border-radius)",
          border: "1px solid var(--border-color)",
          separatorBorder: "1px solid var(--border-color)",
          "&:hover": {
            background: "#6e76811a",
          },
          padding: "7px 18px",
        },
    }}
    ...
  />
);

Interface

export type Base = {
  detail?: 'minimal' | 'verbose';
  fontFamily?: string;
  fontSize?: number | string;
  rowLimit?: number;
  cellLimit?: number;
  version?: ThemeVersion;
  baseFont?: FontStyle;
  titles?: FontStyle;
  buttons?: Buttons;
  panels?: Panel;
  forms?: Form;
  modals?: Modal;
  lists?: List;
  tabs?: Tabs;
  alerts?: Alerts;
  charts?: Charts;
  dropdowns?: Dropdown;
  popoverMenu?: PopoverMenu;
  tables?: Tables;
  dashboard?: Dashboard;
  accordion?: Accordion;
  header?: Header;
};

General Properties

export type FontStyle = {  
  color?: CSSProperties['color'];
  fontFamily?: CSSProperties['fontFamily'];
  fontSize?: CSSProperties['fontSize'];
  fontWeight?: CSSProperties['fontWeight'];
  margin?: CSSProperties['margin'];
};