zorroe

zorroe

HomeArchives

tailwind+vue实现切换深色模式

109
AI-generated summary
The code includes a configuration file called "tailwind.config.js" that sets the dark mode to "class". The "App.vue" file contains options for dark mode and light mode. The "isdark" variable is set to false. The overall effect of this code is not specified.

tailwind.config.js#

export default {
  darkMode: "class",
  ...
};

App.vue#

<template>
  <div :class="{ dark: isdark }">
    <div
      class="w-screen h-screen bg-white dark:bg-gray-800 transform transition-all duration-300"
    >
      <button @click="isdark = true">深色模式</button>
      <button @click="isdark = false">浅色模式</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const isdark = ref(false);
</script>

效果#

录制_2023_08_09_22_35_03_191

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.