Dark mode

Using appearance to manage and integrate dark mode.

Overview

Shuriken UI use manual tailwind dark mode using .dark class selector, instead of default behavior from tailwindcss relying on prefers-color-scheme media query.

This allows you to have more control over the dark mode appearance and to be able to switch between light and dark mode easily.

?

John Baxter

Software Engineer

John is a software engineer at UIW where he works on the UX and design systems team.

Hire Now Profile

?

John Baxter

Software Engineer

John is a software engineer at UIW where he works on the UX and design systems team.

Hire Now Profile

How it works

Shuriken UI module install @nuxtjs/color-mode that provides a simple API to manage the appearance of your application. It also register a custom variant for dark mode in Tailwind CSS in order to use the .dark class selector.

By default, the main theme is set to system, so it behaves according to the user's system preference and the prefers-color-scheme media query.

You can change it to force the theme to light or dark mode in your nuxt configuration, or in your pages.

export default defineNuxtConfig({
  colorMode: {
    preference: 'light', // can be 'system', 'light', or 'dark'
  },
})

Built in components

You can simply use the built in ThemeSwitch, ThemeToggle, or BaseThemeSystem components to be able to switch between color mode:

<template>
  <BaseThemeToggle />
  <BaseThemeSwitch />
  <BaseThemeSystem />
</template>

Custom components

You can use useColorMode composable to manage the appearance of your application and create custom components to switch between color mode:

<script setup lang="ts">
const colorMode = useColorMode()
</script>

<template>
  <BaseSelect v-model="colorMode.preference">
    <BaseSelectItem value="system">System</BaseSelectItem>
    <BaseSelectItem value="light">Light</BaseSelectItem>
    <BaseSelectItem value="dark">Dark</BaseSelectItem>
  </BaseSelect>
</template>