Themes and Styles

Overview

Semaphore allows you to customize the appearance of your dashboard using themes and styles. You can adjust the colors, fonts, and other properties from Semaphor console to match your brand or design preferences.

You can also programatically pass customStyle property to the dashboard component for the fine-grained control over the appearance of your dashboard.

<Dashboard authToken={authToken} customStyle={customStyle} />

The style property provides the default and dark sub objects to customize the appearance based on the selected theme. If styles are not defined in the dark mode, the default styles are applied.

import colors from 'tailwindcss/colors';
 
export const DEFAULT_STYLE: TStyle = {
  default: {
    dashboardPanel: '', //class override for dashboard-panel
    dashboardTabsContainer: '', //class override for dashboard-tabs-container
    dashboardCardContainer: '', //class override for dashboard-card-container
    dashboardCard: '', // class override for dashboard-card
    gridLayout: {
      // margin: [2, 2],
      className: '', // class override for grid-layout
    },
    chart: {
      font: {
        family: 'Open Sans, sans-serif',
        // family:
        //   'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
      },
      dataset: {
        backgroundColor: [
          colors.violet[400],
          colors.red[400],
          colors.amber[400],
          colors.orange[400],
          colors.rose[400],
        ],
        borderColor: [
          colors.violet[400],
          colors.red[400],
          colors.amber[400],
          colors.orange[400],
          colors.rose[400],
        ],
      },
      options: {
        plugins: {
          datalabels: {
            display: false,
          },
          title: {
            display: true,
            // text: My Line Chart',
          },
          tooltip: {
            backgroundColor: '#fff',
            bodyColor: '#000',
            borderWidth: 0.25,
            titleColor: '#000',
            borderColor: 'rgb(128,131,139)',
            cornerRadius: 2,
            boxPadding: 4,
          },
          legend: {
            position: 'top',
            align: 'center',
            maxHeight: 0,
          },
        },
        scales: {
          y: {
            grid: {
              display: true,
            },
            title: {
              display: true,
              text: '',
            },
            beginAtZero: true,
            ticks: {
              precision: 0,
            },
          },
          x: {
            grid: {
              display: true,
            },
            title: {
              display: true,
            },
          },
        },
        layout: {
          padding: {
            top: -40,
          },
        },
        borderRadius: 1,
        responsive: true,
        maintainAspectRatio: false,
      },
    },
  },
  dark: {
    chart: {
      dataset: {
        backgroundColor: [
          colors.teal[100],
          colors.purple[100],
          colors.amber[100],
          colors.orange[100],
          colors.rose[100],
        ],
        borderColor: [
          colors.teal[400],
          colors.purple[400],
          colors.amber[400],
          colors.orange[300],
          colors.rose[400],
        ],
      },
      options: {
        plugins: {
          tooltip: {
            backgroundColor: '#000',
            bodyColor: '#fff',
            borderWidth: 0.25,
            titleColor: '#fff',
            borderColor: 'rgb(128,131,139)',
            cornerRadius: 2,
            boxPadding: 4,
          },
        },
        datalabels: {
          display: false,
        },
        scales: {
          x: {
            grid: {
              display: true,
              color: colors.slate[800],
            },
          },
          y: {
            grid: {
              display: true,
              color: colors.slate[800],
            },
          },
        },
      },
    },
  },
};

Chart Options

Semaphor uses Chart.js for data visualization, offering complete flexibility to customize every aspect of your chart. You can override the options property of the chart and set global properties for your dashboard. Alternatively, you can customize individual cards when creating the dashboard. The properties set for individual cards are more specific and override the global properties.

Bring your own CSS

You can use CSS classes to precisely customize the appearance of your dashboard. You have the option to use Tailwindcss. You can find class annotations by looking at the role attribute of your DOM elements. These annotations are useful for targeting your CSS classes. For instance, the dashboard-panel class can be extended using the dashboardPanel property in the styles object provided below.

<div class="h-full flex flex-col justify-between" role="dashboard-panel">
  <div
    dir="ltr"
    data-orientation="horizontal"
    role="dashboard-tabs-container"
    class="grow bg-muted dark:bg-foreground/5 p-[2px] rounded-md"
  ></div>
  .....
</div>

Themes and Styles

Overview

Chart Options

Bring your own CSS

On this page