Dark Mode

Dark mode is supported by setting the dark attribute to true on the main Schedulely component. We known there are countless ways to trigger dark mode in other components (media query, html tag, data-tag,etc) and rather than force a specific implementation upon your application, we'll let you decide the best way to communicate to Schedulely that Dark Mode should be enabled by providing a single entry point.

⚠️

For custom themes, specific CSS selectors are used based on the dark attribute. See the included styles for guidance on how to implement dark/light themes.

Example

import 'schedulely/dist/index.css';
import { Schedulely } from 'schedulely';
import { useState } from 'react';

export default function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);
    return (
      <div style={{backgroundColor: isDarkMode ? 'black' : 'white'}}>
        <span style={{color: isDarkMode ? 'white' : 'black'}}>Dark Mode:</span> <select onChange={(e) => setIsDarkMode(e.target.value === "1" ? true : false) }>
          <option value="0">false</option>
          <option value="1">true</option>
        </select>
        <Schedulely dark={isDarkMode} events={[]} />
      </div>
      )
}

Open Sandbox

🎨 Themes Actions