We are still updating this page. Some data may be missing here — we will complete it shortly.
Usage
Bitrix24 UI automatically registers the useDark composable as a Vue plugin, so there's no additional setup required.
Components
You can use the built-in ColorModeAvatar or ColorModeImage components to display different images for light and dark mode and the ColorModeButton, ColorModeSwitch or ColorModeSelect components to switch between light and dark modes.
You can also use the useColorMode composable to build your own custom component:
ColorModeButton.vue
<script setup lang="ts">
import { useColorMode } from '#imports'
import SunIconAir from '@bitrix24/b24icons-vue/outline/SunIcon'
import MoonIconAir from '@bitrix24/b24icons-vue/outline/MoonIcon'
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set(_isDark: boolean) {
colorMode.preference = _isDark ? 'dark' : 'light'
}
})
</script>
<template>
<B24Button
:icon="isDark ? MoonIconAir : SunIconAir"
:aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
@click="isDark = !isDark"
/>
</template>
Configuration
You can disable this plugin with the b24ui.colorMode option in your nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@bitrix24/b24ui-nuxt'],
css: ['~/assets/css/main.css'],
b24ui: {
colorMode: false
}
})