Themeing

Themeing is currently accomplished with color variables that are defined within the :root selector (allowing them to cascade across all elements). This repository's components, and the ones we consume from our React Viewerbase component library utilize them. We are interested in pursuing more robust themeing options, and open to pull requests and discussion issues.

:root {
  /* Interface UI Colors */
  --default-color: #9ccef9;
  --hover-color: #ffffff;
  --active-color: #20a5d6;
  --ui-border-color: #44626f;
  --ui-border-color-dark: #3c5d80;
  --ui-border-color-active: #00a4d9;
  --primary-background-color: #000000;
  --box-background-color: #3e5975;

  --text-primary-color: #ffffff;
  --text-secondary-color: #91b9cd;
  --input-background-color: #2c363f;
  --input-placeholder-color: #d3d3d3;

  --table-hover-color: #2c363f;
  --table-text-primary-color: #ffffff;
  --table-text-secondary-color: #91b9cd;

  --large-numbers-color: #6fbde2;

  --state-error: #ffcccc;
  --state-error-border: #ffcccc;
  --state-error-text: #ffcccc;

  /* Common palette */
  --ui-yellow: #e29e4a;
  --ui-sky-blue: #6fbde2;

  /* State palette */
  --ui-state-error: #ffcccc;
  --ui-state-error-border: #993333;
  --ui-state-error-text: #661111;
  --ui-gray-lighter: #436270;
  --ui-gray-light: #516873;
  --ui-gray: #263340;
  --ui-gray-dark: #16202b;
  --ui-gray-darker: #151a1f;
  --ui-gray-darkest: #14202a;

  --calendar-day-color: #d3d3d3;
  --calendar-day-border-color: #d3d3d3;
  --calendar-day-active-hover-background-color: #516873;
  --calendar-main-color: #263340;
  --viewport-border-thickness: 1px;
}

White Labeling

A white-label product is a product or service produced by one company (the producer) that other companies (the marketers) rebrand to make it appear as if they had made it - Wikipedia: White-Label Product

Current white-labeling options are limited. We expose the ability to replace the "Logo" section of the application with a custom "Logo" component. You can do this by adding a whiteLabelling key to your configuration file.

function RadicalImagingLogo() {
  return React.createElement(
    'a',
    {
      target: '_blank',
      rel: 'noopener noreferrer',
      className: 'header-brand',
      href: 'http://radicalimaging.com',
    },
    React.createElement('h5', {}, 'RADICAL IMAGING')
  )
}

props.whiteLabelling = {
  logoComponent: RadicalImagingLogo(),
}

2.7 KiB Raw Blame History

Themeing

White Labeling

2.7 KiB

Raw Blame History