search

antoniandre / wave-ui

A UI framework for Vue.js 3 (and 2) with only the bright side. ☀️
https://antoniandre.github.io/wave-ui
MIT License
549 stars 40 forks source link

Dark Mode #100

Closed sosensible closed 1 year ago

sosensible commented 1 year ago

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?

antoniandre commented 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.

  1. Add the dark prop to the <w-app>

  2. 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">

  3. Add a dark background to your <body> or <w-app>. E.g. .theme--dark {background-color: #202124;}

  4. 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;
}

  5. 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);
  1. This should already be a very good start and there shouldn't be too much work remaining. But I will soon go over each component to adapt to dark mode and add some overridable defaults in SCSS variables file.

Hope it helps. I'll keep you posted of my future changes for the dark mode.

sosensible commented 1 year ago

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.

antoniandre commented 1 year ago

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 :)