@splunk/themes

@splunk/themes

A collection of Splunk software theme variables and mixins. This package is framework-agnostic. Themes consist of plain objects containing primitives such as strings and numbers. Functions are used for mixins.

Install

Install the package:

npm install @splunk/themes

Usage

Every theme is delivered as a single module exporting an object.

import themeEnterprise from '@splunk/themes/enterprise';
import themeEnterpriseDark from '@splunk/themes/enterpriseDark';
import themeLite from '@splunk/themes/lite';
import themeScp from '@splunk/themes/scp';
import themeScpLight from '@splunk/themes/scpLight';

Avoid hardcoding theme choices into an application or a component. Higher-level packages handle theme selection automatically. Manually determining the active theme depends on the environment. For example, recent versions of Splunk Enterprise provide window.$C.SPLUNK_UI_THEME.

Structure

Theme modules contain variables following a name: string|number scheme:

{
    brandColor: '#5cc05c',
    mixins: { [...] }
    overlayShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
    zindexModal: 1050,
}

Each theme includes meta data:

{
    meta: {
        id: 'scpLight', // enterprise, enterpriseDark, lite, scp, scpLight
        name: 'SCP • Light', // display name
        family: 'scp', // scp or enterprise
        type: 'light', // light or dark
    },
    [...]
}

mixins is a nested object. Mixins are always functions:

{
    mixins: {
        reset: function(display),
        clearfix: function(),
    },
    [...]
}