use-solarized

React Hook for using the Solarized color scheme.

Install

yarn add use-solarized
# or
npm install use-solarized

Basic Usage

import React from "react";
import useSolarized from "use-solarized";

const App = () => {
  const { colors, toggleColorMode } = useSolarized();

  return (
    <div
      style={{
        color: colors.text,
        backgroundColor: colors.background,
      }}
    >
      <button onClick={toggleColorMode}>Click Me</button>
    </div>
  );
};

API

Initialization

useSolarized() has a boolean argument defining if it should start in light mode or not. Using no argument will default to light mode.

const App = () => {
  const { colors } = useSolarized(false); // dark mode
};

toggleColorMode

Calling toggleColorMode() will toggle between light mode and dark mode.

Accent Colors

Solarized has 8 accent colors, which can either be accessed by name or by index:

| Index | Key | Code | Color | | ----- | --------- | ------- | -------------------------------- | | 0 | yellow | #b58900 | | | 1 | orange | #cb4b16 | | | 2 | red | #dc322f | | | 3 | magenta | #d33682 | | | 4 | violet | #6c71c4 | | | 5 | blue | #268bd2 | | | 6 | cyan | #2aa198 | | | 7 | green | #859900 | |

const { colors } = useSolarized();
colors.yellow; // "#b58900"
colors[4]; // "#6c71c4"

Content Colors

Solarized has 8 content colors, using 5 for light mode and 5 for dark mode:

Light Mode

| Name | Key | Code | Color | Description | | ------ | ------------ | ------- | ------------------------------ | --------------------------- | | base01 | emphasized | #586e75 | | Optional emphasized content | | base00 | primary | #657b83 | | Body text / primary content | | base1 | secondary | #93a1a1 | | Secondary content | | base2 | highlight | #eee8d5 | | Background highlights | | base3 | background | #fdf6e3 | | Bachground |

Dark Mode

| Name | Key | Code | Color | Description | | ------ | ------------ | ------- | ------------------------------ | --------------------------- | | base1 | emphasized | #93a1a1 | | Optional emphasized content | | base0 | primary | #839496 | | Body text / primary content | | base01 | secondary | #586e75 | | Secondary content | | base02 | highlight | #073642 | | Background highlights | | base03 | background | #002b36 | | Bachground |

const { colors, toggleColorMode } = useSolarized();
colors.primary; // "#657683"
colors["background"]; // "#fdf6e3"
toggleColorMode();
colors.primary; // "#839496"
colors["background"]; // "#002b36"

License

MIT