# @operational/theme

> Customization theme for the Operational UI packages.

Latest version **2.0.10** (published 2018-06-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @operational/theme
pnpm add @operational/theme
yarn add @operational/theme
bun add @operational/theme
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.10 |
| Published | 2018-06-21 |
| First published | 2017-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 27.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Peter Szerzo |
| Maintainers | contiamo, peterszerzo, tejaskumar |

## Links

- npm: https://www.npmjs.com/package/@operational/theme
- Repository: git@github.com:Contiamo/operational-ui
- npm.io page: https://npm.io/package/@operational/theme

## Recent versions

- 2.0.10 (latest) — 2018-06-21
- 0.3.0-alpha.b97e35b9 (next) — 2018-07-04
- 0.1.0-next.10a791f2 (canary) — 2018-04-26
- 0.3.0-alpha.fa791335 — 2018-07-04
- 2.0.0 — 2018-06-21
- 1.0.0 — 2018-06-20
- 0.3.0 — 2018-06-18
- 0.2.2 — 2018-06-01
- 0.1.3 — 2018-05-30
- 0.1.2 — 2018-05-25
- 0.1.0-40 — 2018-05-25
- 0.1.0-39 — 2018-05-25
- 0.1.0-38 — 2018-05-11
- 0.1.0-next.723923e9 — 2018-05-09
- 0.1.0-37 — 2018-05-04
- … 33 more at https://npm.io/package/@operational/theme/versions

## README

# Operational UI Theme

<!-- separator -->

The `@operational/theme` package defines a set of styling constants in the form of a plain JavaScript object that other `@operational` packages consume to customize their styling.

## Getting Started

Install the package via npm or yarn:

`npm install @operational/theme` 

Inspect and customize the theme object:

```js
import { operational } from "@operational/theme"

const ownTheme = {
  ...operationalTheme,
  colors: {
    ...operationalTheme.colors,
    // Redefine the success color to a basic green
    success: "#0F0"
  }
}
```

Use this theme with e.g. `@operational/components`, like so:

`npm install @operational/components`

```js
import React from "react"
import { OperationalUI, Button, ThemeProvider } from "@operational/components"

const App = () => {
  <OperationalUI theme={ownTheme}>
    <Button color="success">So much success</Button>
  </OperationalUI>
}
```

The background color of the button will now turn to what you specified.

<!-- separator -->

## Documentation

Head to the theme section of the [documentation site](https://ui.contiamo.com/documentation/theming) to see an overview of what you can do with the theme.

---
_Source: https://npm.io/package/@operational/theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._