useDark

Reactive dark mode with auto data persistence.

Usage

import { useDark } from "@nativescript-use/vue";

const isDark = useDark();

function toggleTheme(){
  isDark.value = !isDark.value;
}

WARNING

Switch to device theme

useDark is a switch between the light/dark theme of your application. If you want to activate the device theme you must use useColorMode.

const { schema } = useColorMode();
schema.value = "auto";

CSS integration

To control the styles in your CSS you just have to add the theme class with the prefix ns-.

.ns-light Label{
    color: gray;
} 

.ns-dark Label{
    color: white;
}

Integrate with TailWind CSS

Integrate TaildWind CSS with the official NativeScript plugin and apply styles depending on the theme. It works out of the box and no integration needs to be done

<Label text="Theme example" class="text-gray-500 dark:text-white" />

Source

Source

•Demo

Type declaration

import { WritableComputedRef } from "nativescript-vue";

export declare function useDark(): WritableComputedRef<boolean>;