shadowtail weekly downloads statistics

Midnight is a fork of awesome NightwindCSS

A Tailwind CSS plugin that gives you an out-of-the-box, customisable, overridable dark mode.

---

Midnight uses the existing Tailwind color palette and your own custom colors to automatically generate the dark mode version of the Tailwind color classes you use.

For example, whenever you use a class like bg-red-600 it gets automatically switched to bg-red-300 in dark mode.

You can see it in action on https://electrik.dev

1. Installation
2. Helper functions
3. Getting started
4. Configuration
   • Colors
   • Variants and color classes
   • The 'midnight-prevent' class
   • Transitions
   • Custom color scale
   • Important selector
5. Color mappings
   • Individual colors
   • Color classes
   • Hybrid mapping
6. Overrides
7. Typography

Installation

npm install midnight

Enable the Dark class variant in your tailwind.config.js file.

// tailwind.config.js - Tailwind ^2.0
module.exports = {
  darkMode: "class",
  // ...
  plugins: [require("midnight")],
}

In older Tailwind versions (< 2.0)

// tailwind.config.js
module.exports = {
  experimental: {
    darkModeVariant: true,
    applyComplexClasses: true,
  },
  dark: "class",
  // ...
  plugins: [require("midnight")],
}

Helper functions

Midnight relies on a fixed 'midnight' class to manage transitions, and a toggled 'dark' class applied on a top level element in the DOM, typically the root element.

You can define your own functions to manage the dark mode (or check the examples below), or use the helper functions included in 'midnight/helper.js' to get started right away.

By default, the helper functions prevent the dreaded flicker of light mode and allow the chosen color mode to persist on update.

Initialization

To initialize midnight, add the following script tag to the head element of your pages.

// React Example
import midnight from "midnight/helper"

export default function Layout() {
  return (
    <>
      <Head>
        <script dangerouslySetInnerHTML={{ __html: midnight.init() }} />
      </Head>
      // ...
    </>
  )
}

Toggle

Similarly, you can use the toggle function to switch between dark and light mode.

// React Example
import midnight from "midnight/helper"

export default function Navbar() {
  return (
    // ...
    <button onClick={() => midnight.toggle()}></button>
    // ...
  )
}

Enable mode

If you need to selectively choose between light/dark mode, you can use the enable function. It accepts a boolean argument to enable/disable dark mode.

// React Example
import midnight from "midnight/helper"

export default function Navbar() {
  return (
    // ...
    <button onClick={() => midnight.enable(true)}></button>
    // ...
  )
}

BeforeTransition

Midnight also exports a beforeTransition function that you can leverage in case you prefer to build your own toogle functions. It prevents unwanted transitions as a side-effect of having midnight class in the html tag.

Check out the toggle function in the Nextjs example below for an example of how this could be implemented.

Examples

See examples of implementation (click to expand):

<details> <summary>Next.js (using the <a href="https://github.com/pacocoursey/next-themes">next-themes</a> library)</summary>

_app.js

Add ThemeProvider using the following configuration

import { ThemeProvider } from "next-themes"

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider
      attribute="class"
      storageKey="midnight-mode"
      defaultTheme="system" // default "light"
    >
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

Toggle

Set it up using the useTheme hook

import { useTheme } from "next-themes"
import midnight from "midnight/helper"

export default function Toggle(props) {
  const { theme, setTheme } = useTheme()

  const toggle = () => {
    midnight.beforeTransition()
    if (theme !== "dark") {
      setTheme("dark")
    } else {
      setTheme("light")
    }
  }

  return <button onClick={toggle}>Toggle</button>
}

</details> <details> <summary>Create React App (using the <a href="https://github.com/nfl/react-helmet">react-helmet</a> library)</summary>

index.jsx

Add Helmet using the following configuration

import React from "react"
import ReactDOM from "react-dom"
import { Helmet } from "react-helmet"
import midnight from "midnight/helper"

import App from "./App"
import "./index.css"

ReactDOM.render(
  <React.StrictMode>
    <Helmet>
      <script>{midnight.init()}</script>
    </Helmet>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
)

Toggle

Set it up using the default example

import midnight from "midnight/helper"

export default function Navbar() {
  return (
    // ...
    <button onClick={() => midnight.toggle()}></button>
    // ...
  )
}

</details>…