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": {
    "[email protected]": {
      "unplugged": true
    },
    "[email protected]": {
      "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