theme-transition v0.0.5

theme-transition

Usage

pnpm add theme-transition

Import Js

import { useToggleDark } from 'theme-transition'

const { toggleDark } = useToggleDark({
  getDarkValue: () => {
    return isDark.value
  },
  toggle: () => {
    isDark.value = !isDark.value
  },
  // viewTransition: {
  //   after: () => {
  //     return nextTick()
  //   },
  // },
})

toggleDark(MouseEvent)

Import Style

Scss

@use 'theme-transition/scss/mixins.scss' as M;
// pass your theme css selector
@include M.theme-transition('[data-theme="dark"]');

Tailwindcss Plugin

import type { Config } from 'tailwindcss'
import { themeTransitionPlugin } from 'theme-transition/tailwindcss'

export default <Config> {
  plugins: [themeTransitionPlugin()],
}

Css

@import 'theme-transition/css';

import 'theme-transition/css'

css only .dark selector, so use scss or tailwindcss plugin