Closed sosensible closed 1 year ago
Hi @sosensible, The dark mode is not built in Wave UI for now, but already in my Todo list, and I've been very keen on dedicating some time soon.
For now, since it is not yet implemented, I will start with these few directions, then I will leave this thread open and might come back to give you more advice.
Add the dark
prop to the <w-app>
If you want, you can detect the dark mode preference yourself with this line on mounted:
this.darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
If you use that, you need to declare the darkMode
variable in data (or use a ref with composition API) then on the w-app: <w-app :dark="darkMode">
Add a dark background to your <body>
or <w-app>
. E.g. .theme--dark {background-color: #202124;}
Use a light color as the primary color, and provide it to Wave UI in main.js
:
new WaveUI(app, {
colors: {
primary: '#d3ebff'
},
})
Also make the default text color of the primary background dark with:
.primary--bg {
color: #000;
}
to gain some time in CSS overrides, I would also override the SCSS defaults by following this: https://antoniandre.github.io/wave-ui/customization
Your overrides should be adapted to dark mode, something like this:
// Override Wave UI's SCSS defaults.
$border-color: rgba(#fff, 0.15);
$box-shadow: 0 3px 1px -2px rgba(#000, 0.5),
0 2px 2px 0 rgba(#000, 0.5),
0 1px 5px 0 rgba(#000, 0.5);
$disabled-color: #333;
// w-drawer.
// --------------------------------------------------------
$drawer-bg-color: #111;
// w-slider.
// --------------------------------------------------------
$slider-track-color: #444;
// w-table.
// --------------------------------------------------------
$table-tr-odd-color: rgba(#fff, 0.02);
$table-tr-hover-color: rgba(#fff, 0.05);
$table-color: rgba(#fff, 0.7);
// w-tooltip.
// --------------------------------------------------------
// $tooltip-bg-color: #000;
// $tooltip-color: rgba(#fff, 0.7);
Hope it helps. I'll keep you posted of my future changes for the dark mode.
Awesome. Most of the other frameworks are putting the dark mode on the tag, have never seen a class on that tag before but that is just FYI.
Hi @sosensible, the dark theme feature is now available in Wave UI 3.0. You can check the changes here https://antoniandre.github.io/wave-ui/release-notes#v3.0 And follow the migration guide to add theming feature to your app. Let me know if you are missing anything :)
If not built in, a guide of one or more ways to implement it. We are using vueUse to toggle the mode, so we are at least started. When adding our own custom classes, how do we add them?