Toast - Dark mode text remains black #11
Comments
|
@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 |
|
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
}
}
} |
|
What does your |
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],
}); |
|
try also adding this to your include so you'd end up with like: |
|
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],
}); |
|
ok I think I know what your issue is, if you started from vite/vue3 template check your |
|
I think these css are messing with it |
|
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. |
|
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 |
|
I'm also facing this problem. |
|
I have the same issue, but I don't have any windicss, I have tailwindcss, and flowbite |
|
Facing the same issue using tailwind css. This is my And this is my |
The text was updated successfully, but these errors were encountered: