How to use the @blueprintjs/core.Classes.DARK function in @blueprintjs/core

* distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { AnchorButton, Classes, setHotkeysDialogProps, Tag } from "@blueprintjs/core";
import { IDocsCompleteData } from "@blueprintjs/docs-data";
import { Documentation, IDocumentationProps, INavMenuItemProps, NavMenuItem } from "@blueprintjs/docs-theme";
import { IHeadingNode, IPageData, isPageNode, ITsDocBase } from "@documentalist/client";
import classNames from "classnames";
import * as React from "react";
import { NavHeader } from "./navHeader";
import { NavIcon } from "./navIcons";

const DARK_THEME = Classes.DARK;
const LIGHT_THEME = "";
const THEME_LOCAL_STORAGE_KEY = "blueprint-docs-theme";

const GITHUB_SOURCE_URL = "https://github.com/palantir/blueprint/blob/develop";
const NPM_URL = "https://www.npmjs.com/package";

// detect Components page and subheadings
const COMPONENTS_PATTERN = /\/components(\.[\w-]+)?$/;
const isNavSection = ({ route }: IHeadingNode) => COMPONENTS_PATTERN.test(route);

/** Return the current theme className. */
export function getTheme(): string {
    return localStorage.getItem(THEME_LOCAL_STORAGE_KEY) || LIGHT_THEME;
}

/** Persist the current theme className in local storage. */

import '@blueprintjs/icons/lib/css/blueprint-icons.css';
import '../styles/index.less';
import './example.less';

// tslint:disable no-console

// tslint:disable-next-line no-var-requires
const gitHubLogo = require('./GitHub-Mark-Light-32px.png');
// tslint:disable-next-line no-var-requires
const { version } = require('../package.json');

let windowCount = 3;

export const THEMES = {
  ['Blueprint']: 'mosaic-blueprint-theme',
  ['Blueprint Dark']: classNames('mosaic-blueprint-theme', Classes.DARK),
  ['None']: '',
};

export type Theme = keyof typeof THEMES;

const additionalControls = React.Children.toArray([]);

const EMPTY_ARRAY: any[] = [];

export interface ExampleAppState {
  currentNode: MosaicNode | null;
  currentTheme: Theme;
}

export class ExampleApp extends React.PureComponent<{}, ExampleAppState> {
  state: ExampleAppState = {

import { Classes } from '@blueprintjs/core'
import * as React from 'react'

import styled, { theme } from 'styled'

/**
 * Title component.
 */
const Title = styled.h1`
  &,
  .${Classes.DARK} & {
    border-top: 1px solid ${theme('settings.section.border')};
    color: ${theme('settings.section.color')};
    font-size: 0.9rem;
    line-height: initial;
    margin: 20px 0 20px 0;
    padding-top: 20px;
    text-transform: uppercase;

    &:first-child {
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }

    &:last-child {
      margin-bottom: 0;

[setLocation],
    );

    const searchSpinner = ;
    const navBarMenu = (
        <menu>
            <menuitem>
            <menuitem>
            <menuitem>
            
            <menuitem>} text="Settings..." /&gt;
        </menuitem></menuitem></menuitem></menuitem></menu>
    );

    return (
        
            
                
                    <strong>Boilerplate</strong>{" "}
                    <span>
                        {location}
                    </span>

private installTheme() {
    if (this.props.theme === Theme.Dark) {
      document.body.classList.add(Classes.DARK)
      document.body.style.backgroundColor = Colors.DARK_GRAY3
    } else {
      document.body.classList.remove(Classes.DARK)
      document.body.style.backgroundColor = Colors.LIGHT_GRAY5
    }
  }

const sourcecastControlbarProps: ISourcecastControlbarProps = {
      handleEditorValueChange: this.props.handleEditorValueChange,
      handleSetCodeDeltasToApply: this.props.handleSetCodeDeltasToApply,
      handleSetEditorReadonly: this.props.handleSetEditorReadonly,
      handleSetInputToApply: this.props.handleSetInputToApply,
      handleSetSourcecastDuration: this.props.handleSetSourcecastDuration,
      handleSetSourcecastStatus: this.props.handleSetSourcecastStatus,
      audioUrl: this.props.audioUrl,
      duration: this.props.playbackDuration,
      playbackData: this.props.playbackData,
      playbackStatus: this.props.playbackStatus,
      handleChapterSelect: this.props.handleChapterSelect,
      handleExternalSelect: this.props.handleExternalSelect
    };
    return (
      <div>
        
        
      </div>
    );
  }
}

private installTheme() {
    if (this.props.theme === Theme.Dark) {
      document.body.classList.add(Classes.DARK)
      document.body.style.backgroundColor = Colors.DARK_GRAY3
    } else {
      document.body.classList.remove(Classes.DARK)
      document.body.style.backgroundColor = Colors.LIGHT_GRAY5
    }
  }

*/
const Search = styled(InputGroup)`
  margin: 10px;
  margin-bottom: 12px;
  width: calc(100% - 20px);
`

/**
 * CommandWrapper component.
 */
const Wrapper = styled.div`
  border-bottom: 1px solid ${Colors.LIGHT_GRAY2};
  font-size: 0.85rem;
  padding: 9px 14px;

  .${Classes.DARK} & {
    border-color: ${Colors.DARK_GRAY2};
  }

  &:first-of-type {
    padding-top: 0;
  }

  &:last-of-type {
    border-bottom: none;
  }
`

/**
 * Usage component.
 */
const Usage = styled.div`

`

/**
 * Status component.
 */
const StatusMessage = styled(NavbarHeading)`
  color: ${Colors.GRAY3};
  font-style: italic;
`

/**
 * Changelog component.
 */
const Changelog = styled(Button)`
  &.${Classes.BUTTON} .${Classes.ICON} svg,
  .${Classes.DARK} &.${Classes.BUTTON} .${Classes.ICON} svg {
    color: ${Colors.GOLD5};
  }
`

/**
 * Header configuration.
 */
export const defaultHeaderConfiguration: HeaderConfiguration = {
  rightComponent: null,
  setRightComponent: () => undefined,
  setTitleComponent: () => undefined,
  titleComponent: null,
}

/**
 * Header context

handleMCQSubmit: (option: number) =>
          this.props.handleSave(this.props.assessment!.questions[questionId].id, option)
      },
      sideContentHeight: this.props.sideContentHeight,
      sideContentProps: this.sideContentProps(this.props, questionId),
      replProps: {
        handleBrowseHistoryDown: this.props.handleBrowseHistoryDown,
        handleBrowseHistoryUp: this.props.handleBrowseHistoryUp,
        handleReplEval: this.props.handleReplEval,
        handleReplValueChange: this.props.handleReplValueChange,
        output: this.props.output,
        replValue: this.props.replValue
      }
    };
    return (
      <div>
        {overlay}
        {resetTemplateOverlay}
        
      </div>
    );
  }