Color Mode in Nuxt Application

Bitrix24 UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.

Usage

Bitrix24 UI automatically registers the @nuxtjs/color-mode module for you, so there's no additional setup required. You can simply use the useColorMode composable to switch between light and dark modes:

vue

<script setup>
import SunIcon from '@bitrix24/b24icons-vue/main/SunIcon'
import MoonIcon from '@bitrix24/b24icons-vue/main/MoonIcon'

const colorMode = useColorMode()

const isDark = computed({
  get() {
    return colorMode.value === 'dark'
  },
  set(_isDark) {
    colorMode.preference = _isDark ? 'dark' : 'light'
  }
})
</script>

<template>
  <ClientOnly v-if="!colorMode?.forced">
    <B24Button
      :icon="isDark ? MoonIcon : SunIcon"
      color="link"
      depth="dark"
      @click="isDark = !isDark"
    />

    <template #fallback>
      <div class="size-8" />
    </template>
  </ClientOnly>
</template>

You can disable the @nuxtjs/color-mode module with the b24ui.colorMode option in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  css: ['~/assets/css/main.css'],
  b24ui: {
    colorMode: false
  }
})

Color Mode in Nuxt Application ​

Usage ​

Color Mode in Nuxt Application

Usage