feat: use the built-in dark mode by tailwind

README.md

@@ -38,8 +38,7 @@
 
 ### UI Frameworks
 
-- [Tailwind CSS](https://tailwindcss.com/)
+- [Tailwind CSS](https://tailwindcss.com/) - with built-in dark mode!
-- [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode)
 
 ### Icons
 

package.json

@@ -8,23 +8,22 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.1",
-    "@vueuse/core": "^4.0.0-beta.10",
+    "@vueuse/core": "^4.0.0-beta.11",
     "vue": "^3.0.0-rc.10",
     "vue-i18n": "9.0.0-alpha.17",
     "vue-router": "^4.0.0-beta.9"
   },
   "devDependencies": {
     "@antfu/eslint-config-vue": "^0.3.3",
-    "@iconify/json": "^1.1.220",
+    "@iconify/json": "^1.1.224",
     "@purge-icons/generated": "^0.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "^4.1.1",
     "@vue/compiler-sfc": "^3.0.0-rc.10",
     "@vuedx/typescript-plugin-vue": "^0.2.3",
     "cross-env": "^7.0.2",
-    "eslint": "^7.8.1",
+    "eslint": "^7.9.0",
-    "pnpm": "^5.5.12",
+    "pnpm": "^5.5.13",
-    "tailwindcss": "^1.8.5",
+    "tailwindcss": "^1.8.10",
-    "tailwindcss-dark-mode": "^1.1.6",
     "typescript": "^4.0.2",
     "vite": "^1.0.0-rc.4",
     "vite-plugin-components": "^0.2.13",

src/main.postcss

@@ -2,21 +2,30 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-html, body, #app {
+html,
+body,
+#app {
   height: 100vh;
   width: 100vw;
   margin: 0;
   padding: 0;
 }
 
-.schema-dark {
+html.dark {
   background: #222;
 }
 
 .btn {
-  @apply px-4 py-1 rounded bg-teal-600 inline-block text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50;
+  @apply
+    px-4 py-1 rounded inline-block
+    bg-teal-600 text-white cursor-pointer
+    hover:bg-teal-700
+    disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50;
 }
 
 .icon-btn {
-  @apply opacity-75 transition duration-200 ease-in-out cursor-pointer inline-block select-none hover:opacity-100;
+  @apply
+    inline-block cursor-pointer select-none
+    opacity-75 transition duration-200 ease-in-out
+    hover:opacity-100;
 }

src/utils/dark.ts

@@ -18,6 +18,6 @@ export const isDark = computed({
 
 watch(
   isDark,
-  v => document.documentElement.classList.toggle('schema-dark', v),
+  v => document.documentElement.classList.toggle('dark', v),
   { immediate: true },
 )

tailwind.config.js

@@ -9,14 +9,8 @@ module.exports = {
       './src/**/*.js',
       './src/**/*.ts',
     ],
-    options: {
-      whitelist: [
-        'schema-dark',
-      ],
-    },
   },
   theme: {
-    darkSelector: '.schema-dark',
     extend: {
       opacity: {
         10: '0.1',
@@ -26,22 +20,22 @@ module.exports = {
   },
   variants: {
     cursor: ['responsive', 'disabled'],
-    backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'hover', 'disabled'],
+    backgroundColor: ['dark', 'hover', 'disabled'],
-    borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-active', 'active', 'focus', 'disabled'],
+    borderColor: ['dark', 'active', 'focus', 'disabled'],
-    textColor: ['dark', 'dark-hover', 'dark-active', 'hover', 'active', 'disabled'],
+    textColor: ['dark', 'hover', 'active', 'disabled'],
     opacity: ['dark', 'hover', 'active', 'focus', 'disabled'],
   },
-  plugins: [
-    require('tailwindcss-dark-mode')(),
-  ],
   future: {
+    purgeLayersByDefault: true,
     removeDeprecatedGapUtilities: true,
   },
   experimental: {
+    darkModeVariant: true,
     applyComplexClasses: true,
     uniformColorPalette: true,
     extendedSpacingScale: true,
     defaultLineHeights: true,
     extendedFontSizeScale: true,
   },
+  dark: 'class',
 }