search

jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
48.89k stars 3.93k forks source link

Bulma theming #3748

Open carolinaisslaying opened 3 months ago

carolinaisslaying commented 3 months ago

This is about Bulma. It is a feature enhancement.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version 1.0.0 My browser is: Safari ]This is a Sass issue: I'm using version 1.72.0 (node) I am sure this issue is not a duplicate? Yes

Description

I am migrating over to Bulma v1, and despite the docs informing me there wasn't really many breaking changes, it turns out, practically everything has been changed! Which makes sense, as it is a complete rewrite. UI changes look really good!

To the main point though, I am wondering if it is possible to implement a way to ignore a user's system preferences and allow developers to select specific Bulma themes to use in specific sass files. This is because my website has my own its own system for saving a user's preferred theme to their account, and the idea of having 3 themes (since there is an additional custom one), in one style sheet, isn't exactly a great idea for loading time.

If this is already possible please point me in the right direction, or if you're confused by my wording, I am happy to further clarify. Thanks!

jeroenimus commented 3 months ago

It is possible to create and set your own themes by setting a class on the <html> tag, i.e. <html class="theme-light"> or <html class="theme-dark".

These are the two built-in themes and setting one of these themes ignores user preference.

More information can be found here.

Creating a theme is essentially setting your own CSS variables. A custom theme requires:

  • a name like sunrise
  • a scope like :root, [data-theme=sunrise], .theme-sunrise or all three
  • a set of CSS variables and their new value
carolinaisslaying commented 3 months ago

Is it possible/would it be possible to implement two sets of sass variables that change depending on the theme to alter Bulma's preferences? As setting CSS variables is proving much more complicated and a bit of an odd way to go about it in my experience.

ghost commented 3 months ago

Silly question, but the themes don't seem to be included in the bulma npm package, is that by design?