Dark Mode Support

We understand the importance of providing a visually comfortable experience for users, and we are pleased to announce that Pillar UI supports dark mode. Dark mode is a popular feature that reduces eye strain and enhances readability in low-light environments.

User Preference Detection

Pillar UI includes a user preference detection mechanism that automatically detects the user's preference for dark mode based on their system or browser settings. If the user has set their preference to dark mode, Pillar UI will make dark mode the default appearance when the application loads.

Enabling Dark Mode

To enable dark mode in your Pillar UI application, you can use the useDarkMode custom hook from the pillar-ui/hooks library. This hook provides a simple way to toggle between dark and light modes. Here's how you can add the dark mode toggle functionality:

1. Install the pillar-ui/hooks library:

npm install @pillar-ui/hooks

2. Import the useDarkMode hook in your component:

import React from 'react'
import { useDarkMode } from '@pillar-ui/hooks'
import { Button } from '@pillar-ui/core'

const App = () => {
  const { mode, toggleMode, isDarkMode } = useDarkMode()

  return (
    <div>
      <Button onClick={toggleTheme}>Toggle To {isDarkMode ? 'Light' : 'Dark'} Mode</Button>
    </div>
  )
}

export default App

In the code above, we import the useDarkMode hook from the pillar-ui/hooks library. We then use this hook to set the theme state variable and toggleTheme function in our component. The theme state variable holds the current theme ("dark" or "light"), and the toggleTheme function allows us to toggle between dark and light modes.

By using the useDarkMode custom hook from the pillar-ui/hooks library, you can easily add dark mode functionality to your Pillar UI application. The hook handles the toggling of the theme, and you can customize the appearance of your components in dark mode by modifying the CSS styles.

Please note that the compatibility of dark mode in Pillar UI depends on the browser's support for CSS variables and media queries. It is recommended to test dark mode in different browsers to ensure consistent behavior and appearance.

With Pillar UI's dark mode support and the useDarkMode custom hook, you can provide a visually comfortable experience for your users in low-light environments.