Toast - Dark mode text remains black

[hades200082]

[acidjazz]

@hades200082 do you have any other css packages/sets going on that could be interfering? I haven't seen this in any of my projects

[hades200082]

Nope. I just follow the install instructions on a brand new vite/vue3 app to see how it works before using it in a production app.

Here's my package.json

{
  "name": "test-tailvue",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 4173",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "pinia": "^2.0.21",
    "tailvue": "^0.1.62",
    "vue": "^3.2.38",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@iconify/vue": "^4.0.0",
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/node": "^16.11.56",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/tsconfig": "^0.1.3",
    "eslint": "^8.24.0",
    "eslint-plugin-vue": "^9.3.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
    "typescript": "~4.7.4",
    "vite": "^3.0.9",
    "vite-plugin-windicss": "^1.8.8",
    "vue-tsc": "^0.40.7",
    "windicss": "^3.5.6"
  },
  "dependenciesMeta": {
    "eslint@8.24.0": {
      "unplugged": true
    },
    "tailvue@0.1.62": {
      "unplugged": true
    }
  }
}

[tcampbPPU]

What does your windi.config.ts took like?

[hades200082]

import { defineConfig } from "windicss/helpers";
import formsPlugin from "windicss/plugin/forms";
import typography from 'windicss/plugin/typography';

export default defineConfig({
  extract: {
    include: [
        "index.html",
        "./**/*.vue",
        ".yarn/unplugged/tailvue-virtual-96e2bcddb9/node_modules/tailvue/dist/tailvue.es.js"
    ],
  },
    shortcuts: {
      "btn": "focus:(outline-none) hover:(opacity-90) dark:(from-indigo-500 to-indigo-600) bg-gradient-to-l from-indigo-700 to-indigo-800 w-48 h-12 text-lg text-white rounded-sm",
    },
  darkMode: "class",
  theme: {
    extend: {

    },
  },
  plugins: [formsPlugin,typography],
});

[tcampbPPU]

try also adding this to your include

"node_modules/tailvue/dist/tailvue.umd.js",

so you'd end up with like:

    include: [
     // ...
      "node_modules/tailvue/dist/tailvue.es.js",
      "node_modules/tailvue/dist/tailvue.umd.js",
    ],

[hades200082]

I now have this in the windi.config.ts. Same issue persists.

import { defineConfig } from "windicss/helpers";
import formsPlugin from "windicss/plugin/forms";
import typography from 'windicss/plugin/typography';

export default defineConfig({
  extract: {
    include: [
        "index.html",
        "./**/*.vue",
        ".yarn/unplugged/tailvue-virtual-96e2bcddb9/node_modules/tailvue/dist/tailvue.es.js",
        ".yarn/unplugged/tailvue-virtual-96e2bcddb9/node_modules/tailvue/dist/tailvue.umd.js"
    ],
  },
    shortcuts: {
      "btn": "focus:(outline-none) hover:(opacity-90) dark:(from-indigo-500 to-indigo-600) bg-gradient-to-l from-indigo-700 to-indigo-800 w-48 h-12 text-lg text-white rounded-sm",
    },
  darkMode: "class",
  theme: {
    extend: {

    },
  },
  plugins: [formsPlugin,typography],
});

[tcampbPPU]

ok I think I know what your issue is, if you started from vite/vue3 template check your src/assets/base.css and make sure there are not any css overrides there

[tcampbPPU]

I think these css are messing with it

[hades200082]

I actually deleted that file (all the default CSS files actually) after installing windicss.

The only CSS file I can find included is the one from windicss...

// @/src/main.ts
import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";

import "virtual:windi.css"; // <---------------

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount("#app");

The issue persists.

I've extended the duration of the toast to get a good look at the classes that are applied to the text...

I can't see any classes here that would change the colour in dark mode.

I feel like I've missed something silly and just can't see it.

[tcampbPPU]

Strange, let me look more into, in the playground environment we have setup we are not running into that issue. Maybe something weird is happening with that version of windicss

[hfoletto]

I'm also facing this problem. Is there a way to disable the dark mode completely? Thank you!

[hussainalihussain]

I have the same issue, but I don't have any windicss, I have tailwindcss, and flowbite

[FrazeColder]

Facing the same issue using tailwind css. This is my package.json file:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint:js": "eslint --ext \".ts,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "yarn lint:js && yarn lint:prettier",
    "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
  },
  "devDependencies": {
    "@iconify/vue": "^4.1.1",
    "@nuxt/devtools": "^1.0.8",
    "@nuxt/image": "^1.4.0",
    "@nuxtjs/eslint-config-typescript": "^12.0.0",
    "@nuxtjs/eslint-module": "^4.1.0",
    "@nuxtjs/html-validator": "^1.2.5",
    "@nuxtjs/tailwindcss": "^6.7.0",
    "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
    "@tailvue/nuxt": "^1.0.0",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9",
    "@typescript-eslint/parser": "^6.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.40.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "nuxt": "^3.5.0",
    "postcss": "^8.4.23",
    "prettier": "^3.2.5",
    "sass": "^1.62.1",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.0.4"
  },
  "dependencies": {
    "@fontsource/karla": "^5.0.3",
    "@fontsource/rubik": "^5.0.3",
    "@headlessui/vue": "^1.7.13",
    "@nuxt/image-edge": "^1.3.0-28475144.d8420f5",
    "@pinia/nuxt": "^0.5.1",
    "feather-icons": "^4.29.0",
    "moment": "^2.30.1",
    "moment-timezone": "^0.5.45",
    "pinia": "^2.1.7",
    "v3-infinite-loading": "^1.2.2",
    "vue-feather": "^2.0.0"
  },
  "overrides": {
    "pinia": {
      "vue": "^3.0.0"
    }
  }
}

And this is my tailwind.config.js file:

const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "node_modules/tailvue/dist/tailvue.es.js",
    "node_modules/tailvue/dist/tailvue.umd.js",
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
    colors: {
      white: "#FFFFFF",
      red: "#F80B0B",
      black: {
        DEFAULT: "#1D1E20",
        50: "#F4F4F4",
        100: "#E8E8E9",
        200: "#D2D2D2",
        250: "#C0C2C5",
        500: "#8B8C8D",
        750: "#555658",
        900: "#2A2B2E",
      },
      blue: {
        DEFAULT: "#0097FF",
        dark: "#0088E5",
        50: "#E6F5FF",
        250: "#BFE5FF",
        500: "#7DC9FE",
        750: "#59BCFF",
      },
      lorange: {
        DEFAULT: "#FFAE00",
        200: "#FFEFCC",
        400: "#FFDF99",
        600: "#FFCE66",
        800: "#FFBE33",
      },
      orange: {
        DEFAULT: "#FA8248",
        button: "#F29100",
        200: "#FEE6DA",
        400: "#FDCDB6",
        600: "#FCB491",
        800: "#FB9B6C",
      },
      yellow: {
        DEFAULT: "#FFC90F",
        200: "#FFF4CF",
        400: "#FFE99F",
        600: "#FFDF6F",
        800: "#FFD43F",
      },
      gray: {
        100: "#f3f4f6",
        200: "#e5e7eb",
      },
    },
  },
  plugins: [require("@tailwindcss/forms")],
  darkMode: "class", // Turns off dark mode
};