Dark mode #1861

AEsmerio · 2019-10-11T11:09:13Z

I've searching a lot how people have implemented a Dark Theme / Dark Mode but no success so far.
I'm planing to move my own project from Vuetify to Buefy, but Dark theme is required.
On Vuetify you only need set a prop in the component and it's done. So I can toggle the entire app from Light to Dark.

Am I right to say that there's no such thing as Dark mode property for the components?

service-paradis · 2019-10-11T12:23:42Z

You're right. There is no specific dark mode in Buefy right now.
You can customize the Bulma Settings to create your own dark theme. There are some interesting ones at https://jenil.github.io/bulmaswatch/

jtommy · 2019-10-15T20:29:07Z

@3rdSenna Bulma author is working on it, stay tuned!!

franzvezuli · 2020-01-07T04:38:47Z

@3rdSenna Bulma author is working on it, stay tuned!!

Nice, great news! Is it tracked in a version or branch somewhere? Care to link? Want to watch it.
Edit: Just realized you said "Bulma" and not "Buefy", read it wrong, sorry!

WaldemarEnns · 2020-01-31T10:06:33Z

I am waiting for it too :) Just like @3rdSenna , i saw it already on Vuetify and would love to have this feature in Buefy too! 🚀

nicolaipre · 2020-02-09T20:14:24Z

Would absolutely be nice to see a builtin dark mode implemented :-)

a-kriya · 2020-02-29T13:01:14Z

Perhaps this issue can be closed as it is a duplicate of #2076. Once the PR for it is merged, the variables can be configured as documented here https://bulma.io/2019/10/15/light-dark-colors/#scheme-variables-for-dark-mode.

jtommy · 2020-02-29T13:02:50Z

@a-kriya I don't think we'll able to get a dark mode like Vuetify

a-kriya · 2020-02-29T13:08:11Z

Which is okay since Bulma doesn't do it that way. It would be a fairly large deviation from Bulma if Buefy were to implement dark modes for individual components like Vuetify. If this ticket is marked as a feature request, is that something you're considering?

jtommy · 2020-02-29T13:10:17Z

No, probably when bulma is going to release CSS variables feature, do you know other way?

a-kriya · 2020-02-29T13:12:43Z

Nope. Either way, it's dependent on Bulma. I'm trying to see what can be done under this ticket.

a-kriya · 2020-02-29T13:17:46Z

Basically, would it help clean up tickets here by direct users to Bulma's issues section if a feature/fix must come from there?

jtommy · 2020-02-29T13:20:36Z

Is there an open issue?

a-kriya · 2020-02-29T13:28:12Z

Not exactly, but jgthms/bulma#2342 along with jgthms/bulma#1837 would be close. Regardless, if there are tickets here which cannot really be addressed without underlying support from Bulma, should they not be moved to that repo?

mapellidario · 2020-05-14T11:34:45Z

Hello!

I saw in jgthms/bulma#2342 a recent comment by jgthms: jgthms/bulma#2342 (comment) .

Would that help you closing this issue?

(anyway, kudos for all the good work ❤️ ❤️ )

jtommy · 2020-05-14T11:49:21Z

@mapellidario all depends on Bulma otherwise I should add an external to provide it. What would you do ?

jtommy · 2020-05-26T06:51:36Z

Waiting an official way, take a look at https://buefy.org/extensions/bulmacssvars

Tofandel · 2020-06-22T20:27:28Z

My PR would solve the issue of individual component themes and toggling by a simple data attribute jgthms/bulma#2981
So adding the reference for tracking
If it's not accepted, even to a small extent, I guess we can lynch bulma and start a fork with a community rather than a godlike maintainer since it's lightweight and 5 maintainers would largely have the capacity to maintain it (like it was proposed in #2090)

JenuelDev · 2020-12-10T23:55:24Z

ops, its 2021 and dark mode still not added?

tassoman · 2020-12-11T02:18:27Z

Be careful, 2020 isn't finished yet 😏
I've accomplished easily using one of the Bulmaswatch themes

JenuelDev · 2020-12-11T04:24:55Z

Be careful, 2020 isn't finished yet 😏
I've accomplished easily using one of the Bulmaswatch themes

Oh nice, I about to create a project using Buefy, hoping I can use it In the future. :)

joaopedroAnelli · 2021-03-10T12:38:50Z

I did this in my project using bulma css vars and Nuxt color mode. It's a workaround, of course, but it reached my goal while we don't have dark mode natively in buefy.

vikiival · 2021-05-03T13:21:15Z

@jtommy is there any progress with this issue?
Or a simple tutorial would be amazing.

jtommy · 2021-05-03T13:24:08Z

No, the only available options are already discussed in the previous messages.
It shouldn't be a Buefy feature since the major part of CSS comes from Bulma

joeyboey · 2021-05-26T20:15:08Z

I did this in my project using bulma css vars and Nuxt color mode. It's a workaround, of course, but it reached my goal while we don't have dark mode natively in buefy.

@joaopedroAnelli could you share your config and sass files? I can't get it to work. npm run bulma-css-vars does not even find the js file...

Wakeful-Cloud · 2021-05-28T20:54:26Z

@joeyboey

Colors

Here are the colors I used to make ~~wakefulcloud.me (Which is built with Buefy)~~ (EDIT: not any more, but the below should still work):

Name	Dark Mode Color	Light Mode Color
`scheme-main`	`#1a1a1a`	`#ffffff`
`scheme-invert`	`#000000`	`#0a0a0a`
`text`	`#b5b5b5`	`#4a4a4a`
`text-invert`	`#c9c9c9`	`#ffffff`

Setup

Create a file named bulma-css-vars.config.js (in the root of your project) with the below as content:

//Must be CommonJS export
module.exports = {
  colorDefs: { //This will default to dark mode (Update with light mode colors to default to light mode)
    'scheme-main': '#1a1a1a',
    'scheme-invert': '#000000',
    'text': '#b5b5b5',
    'text-invert': '#c9c9c9'
  },
  cssFallbackOutputFile: './src/bulma-generated/generated-fallbacks.css',
  jsOutputFile: './src/bulma-generated/bulma-colors.js', //Change to ".ts" to make output TypeScript
  sassEntryFile: './src/style/main-sass-file.sass', //This file needs to exist before you run the bulma-css-vars command
  sassOutputFile: './src/bulma-generated/generated-vars.sass',
  transition: '0.5s ease'
};

Create a file named main-sass-file.sass in the src/style directory with the below as content:

//Import order matters
@import './bulma-generated/generated-fallback.css';
@import './bulma-generated/generated-vars.sass';
@import '../node_modules/bulma-css-vars/bulma-cv-lib';

Run the update script from the root of your project (Without any arguments):

node ./node_modules/bulma-css-vars/bin/bulma-css-vars.js

To invert the theme, instantiate a ColorUpdater and update the colors with the colors opposite of the current theme from the above table (See the TypeScript example in Bulma CSS Vars for more information)

A few very important things:

You must use CommonJS exports for bulma-css-vars.config.js (module.exports)
Some Bulma variables aren't supported (See #20)
sassEntryFile must exist before you run the bulma-css-vars command
The import order of sassEntryFile is imporant

joeyboey · 2021-06-13T11:36:01Z

@Wakeful-Cloud

Thanks for your detailed answer, I have one problem however. If I also set the primary color in the bplma-css-vars.config.js the color is only applied for a few components, mainly buttons and dropdowns.

But it is not applied for sliders and a lot of other ui elements and selections etc.

Do you have any advice on this?

// Must be CommonJS export
module.exports = {
  // This will default to dark mode (Update with light mode colors to default to light mode)
  colorDefs: {
    primary: '#0d5d6a',
    'primary-light': '#4da9b8',
    'primary-dark': '#091a28',
    'scheme-main': '#1a1a1a',
    'scheme-invert': '#000000',
    text: '#b5b5b5',
    'text-invert': '#c9c9c9',
  },
  cssFallbackOutputFile: './bulma-generated/generated-fallback.css',
  jsOutputFile: './bulma-generated/bulma-colors.ts', // Change to ".ts" to make output TypeScript
  sassEntryFile: './assets/main.scss', // This file needs to exist before you run the bulma-css-vars command
  sassOutputFile: './bulma-generated/generated-vars.sass',
  transition: '0.5s ease',
  options: { implementation: require('sass') },
}

Wakeful-Cloud · 2021-06-13T18:07:32Z

@joeyboey Try setting the primary colors in the entry SCSS file (./assets/main.scss) instead (Above the imports from step 2):

//Customize global theme
$primary: #0d5d6a;
$primary-light: #4da9b8;
$primary-dark: #091a28;

//Import order matters
@import './bulma-generated/generated-fallback.css';
@import './bulma-generated/generated-vars.sass';
@import '../node_modules/bulma-css-vars/bulma-cv-lib';

This should work (It's what I did for wakefulcloud.me), but, you won't be able to dynamically change the primary color anymore. You could also try identifying the exact (primary) color of the components you'd like to change using your browser's inspector, convert that color from hex to hsl, then search for it on Bulma's variable documentation, then finally add whatever variable you found to bulma-css-vars.config.js (This is how I figured out what variables I needed to change for the dark theme).

joeyboey · 2021-06-13T18:29:05Z

@Wakeful-Cloud

Thanks a lot for your tips again. I had the order flipped..
But the problem strangely persists. Both the steps and button component use background-color as their is-primary attribute. Button works just fine, step component stays in the buefy default rgb(121, 87, 213)

Wakeful-Cloud · 2021-06-13T20:40:01Z

@joeyboey

Make sure you rebuild bulma-css-vars (Otherwise bulma-css-vars and ./assets/main.scss will have colliding variable definitions).
Try removing primary-light and primary-dark
Try without bulma-css-vars and see if the step component changed (Though it'll be light mode). If this works, then gradually reintroduce bulma-css-vars and see where it breaks.

If none of the above work, you may want to open an issue with Bulma itself.

TheJaredWilcurt · 2023-01-23T01:15:10Z

The lack of a dark mode button to toggle the docs is what made me not use this library.

mary-josephine-1 · 2023-12-07T02:58:03Z

Hi, any update on this?

wesdevpro · 2023-12-07T04:50:39Z

At the moment due to the migration from Vue2 to Vue3 there has been little progress on feature requests.

For now, you will have to find a way to change the color schema via bulma CSS which is what Buefy is built upon.

See: jgthms/bulma#2342

https://github.com/jgthms/bulma/tree/css-variables-with-fallback

AEsmerio added the feature request label Oct 11, 2019

jtommy added the bulma label Oct 15, 2019

yangwao mentioned this issue Jan 23, 2021

Dark mode for KodaDot vue-polkadot/apps#158

Closed

ChaelCodes mentioned this issue Feb 4, 2021

HuntersKeepers needs a Dark Mode ChaelCodes/HuntersKeepers#209

Open

Krafting mentioned this issue Jul 29, 2023

Feature request: dark mode AlfHou/hammond#45

Open

wesdevpro closed this as not planned Won't fix, can't repro, duplicate, stale Dec 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dark mode #1861

Dark mode #1861

AEsmerio commented Oct 11, 2019

service-paradis commented Oct 11, 2019

jtommy commented Oct 15, 2019

franzvezuli commented Jan 7, 2020 •

edited

WaldemarEnns commented Jan 31, 2020

nicolaipre commented Feb 9, 2020

a-kriya commented Feb 29, 2020

jtommy commented Feb 29, 2020 •

edited

a-kriya commented Feb 29, 2020

jtommy commented Feb 29, 2020

a-kriya commented Feb 29, 2020

a-kriya commented Feb 29, 2020

jtommy commented Feb 29, 2020

a-kriya commented Feb 29, 2020

mapellidario commented May 14, 2020

jtommy commented May 14, 2020

jtommy commented May 26, 2020

Tofandel commented Jun 22, 2020 •

edited

JenuelDev commented Dec 10, 2020

tassoman commented Dec 11, 2020

JenuelDev commented Dec 11, 2020

joaopedroAnelli commented Mar 10, 2021

vikiival commented May 3, 2021

jtommy commented May 3, 2021

joeyboey commented May 26, 2021

Wakeful-Cloud commented May 28, 2021 •

edited

joeyboey commented Jun 13, 2021

Wakeful-Cloud commented Jun 13, 2021 •

edited

joeyboey commented Jun 13, 2021

Wakeful-Cloud commented Jun 13, 2021

TheJaredWilcurt commented Jan 23, 2023

mary-josephine-1 commented Dec 7, 2023

wesdevpro commented Dec 7, 2023 •

edited

Dark mode #1861

Dark mode #1861

Comments

AEsmerio commented Oct 11, 2019

service-paradis commented Oct 11, 2019

jtommy commented Oct 15, 2019

franzvezuli commented Jan 7, 2020 • edited

WaldemarEnns commented Jan 31, 2020

nicolaipre commented Feb 9, 2020

a-kriya commented Feb 29, 2020

jtommy commented Feb 29, 2020 • edited

a-kriya commented Feb 29, 2020

jtommy commented Feb 29, 2020

a-kriya commented Feb 29, 2020

a-kriya commented Feb 29, 2020

jtommy commented Feb 29, 2020

a-kriya commented Feb 29, 2020

mapellidario commented May 14, 2020

jtommy commented May 14, 2020

jtommy commented May 26, 2020

Tofandel commented Jun 22, 2020 • edited

JenuelDev commented Dec 10, 2020

tassoman commented Dec 11, 2020

JenuelDev commented Dec 11, 2020

joaopedroAnelli commented Mar 10, 2021

vikiival commented May 3, 2021

jtommy commented May 3, 2021

joeyboey commented May 26, 2021

Wakeful-Cloud commented May 28, 2021 • edited

Colors

Setup

joeyboey commented Jun 13, 2021

Wakeful-Cloud commented Jun 13, 2021 • edited

joeyboey commented Jun 13, 2021

Wakeful-Cloud commented Jun 13, 2021

TheJaredWilcurt commented Jan 23, 2023

mary-josephine-1 commented Dec 7, 2023

wesdevpro commented Dec 7, 2023 • edited

franzvezuli commented Jan 7, 2020 •

edited

jtommy commented Feb 29, 2020 •

edited

Tofandel commented Jun 22, 2020 •

edited

Wakeful-Cloud commented May 28, 2021 •

edited

Wakeful-Cloud commented Jun 13, 2021 •

edited

wesdevpro commented Dec 7, 2023 •

edited