jgthms / bulma

Modern CSS framework based on Flexbox

Home Page:https://bulma.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

use modifier is-light, is-dark with color and dark-mode behaviour.

kasperkamperman opened this issue · comments

This is about Bulma | the Docs.

It's a question (or bug?)

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [1.0.0]
My browser is: Chrome 123.0.6312.86 / MacOS

Description

I'm trying to understand or figure out a way to make my tags also switch in dark mode.

I use the is-light modifier (as documented under button colors).
Screenshot 2024-04-01 at 22 25 13

In dark mode this doesn't switch, so it will look the same.

I tried is-soft as a modifier, but that doesn't give the expected result. Also is-soft seems kind of undocumented, however I figured that that when I replaced my is-light tags (without primary colors) with it, it would be light-grey in light mode and nicely inverts in dark-mode.

--
It would be nice if the is-light / is-dark light displayed switch, but I don't know how to accomplish this.

Screenshot 2024-04-01 at 22 29 02 Screenshot 2024-04-01 at 22 28 59

--

I think documentation is clear on color modifiers, but I miss some info on how is-light, is-dark, white-ter, white-bis could be modified for dark-mode?

is-soft-bis, is-soft-ter, is-bold-ter?