jloh / bulma-prefers-dark

Bulma prefers dark theme

bulma-prefers-dark

Bulma now supports dark mdoe out of the box, this repo is no longer maintained
See the docs https://bulma.io/documentation/features/dark-mode/

A Bulma extension that adds support for the prefers-color-scheme: dark media query

Installation

npm install bulma-prefers-dark
... Or ...
yarn add bulma-prefers-dark

Usage

This extension works as-is in combination with Bulma by adding an alternative dark theme via the @media (prefers-color-scheme: dark) media query.

Include it in your SaSS pipeline after you've included Bulma and you're good to go:

@import "../../node_modules/bulma/bulma.sass";
@import "../../bulma-prefers-dark/bulma-prefers-dark.sass";

Alternatively include it in your HTML via unpkg:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/bulma-prefers-dark" />

Copyright & License

Code copyright 2019 James Loh. Code released under the MIT license.

bulma-prefers-dark's Issues

Release

Could you please make a new release of this to make the select fix be available on npm? @jloh

Overriding default colors

Hello, I have a (potentially dumb) question about the default dark color--is there a "correct" or easy way to change it? For instance, for my background color I'd prefer to have a color like #16161d instead of black.

In this case, is this the right theme to use, or does it make more sense to just override Bulma variables directly? Cheers

Is this still being maintained?

There's a few issues I'd like to highlight and possibly contribute to, but of course I'd like to know if this repo is being maintained.

Update Bulma to 0.8.0

Any plans on updating bulma to 0.8.0?

Add light theme

It'd be cool to be able to use dark as the default and setup a @media (prefers-color-scheme: light) query so that the theme is dark by default, but switches to light for those that request it.

Bump Bulma to version 0.8 or 0.9?

The current version supports v0.7

Bad color choices for <code>

The text color for <code> is too dark for its dark background. It becomes even more unreadable when tiny:

Live: https://sccb.us/commands

Setting colour of light and dark mode individually

I presume that the problem I'm having is just about something that I don't understand the mechanics of. As a test I've been trying to have a light and dark mode. I've added bulma and bulma-prefers-dark which work fine on their own. The colour scheme works as intended. I've now wanted to try to change the colour of the background of a button depending on what colour scheme I'm on. But the issue is that non of them change or both of them at the same time in both colour schemes. These are some of the things I've tried without any success.

$red: #F00;
$green: #0F0;

// changes both to red
$button-background-color: $red;
$button-background-color-dark: $green;

// non of them change colour (I only expect the dark one to change here)
@media (prefers-color-scheme: dark)
  $button-background-color: $green;

// non of them change colour (I only expect the dark one to change here)
@media (prefers-color-scheme: dark)
  .button
    background-color: $green;

// non of them change colour (I only expect the dark one to change here)
@media (prefers-color-scheme: dark)
  $button-background-color-dark: $green;

// no change to either of them
.button
  background-color: $red
  @media (prefers-color-scheme: dark)
    background-color: $green;

@import '../node_modules/bulma/bulma.sass';
@import '../node_modules/bulma-prefers-dark/bulma-prefers-dark.sass';

Additional Information:
It's a blank react project that has only a button added.

import React from "react";
import './App.sass'


function App() {

  return (
    <div>
      <button type="button" className="button ">Save</button>
    </div>
  );
}

export default App;

and index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Links color not being set correctly

The color of links in dark mode is too dark against the dark background , resulting in a contrast of only 2.99.

I'm not sure why the default blue-light is not working. Defining the sass variables the same as the defaults before importing produces a nice light blue with good contrast.

@import "~bulma/bulma";
$blue-light: hsl(209, 71%, 63%);
$link-dark: $blue-light;
@import "~bulma-prefers-dark/bulma-prefers-dark";

Oruga with theme-bulma

I'm using oruga with theme-bulma in a Nuxt3 project.

I just found out the bulma-prefers-dark extension for Bulma.

It works very nicely, however the changes do not apply to Oruga components (that are styled by Bulma).

How can I archive a better result?

My .scss file:

@import 'assets/scss/custom';
@import '@oruga-ui/oruga-next/src/scss/oruga-full-vars';
@import 'bulma/sass/utilities/_all';
@import 'bulma/bulma.sass';
@import '@oruga-ui/theme-bulma/dist/scss/bulma';
@import 'bulma-prefers-dark/bulma-prefers-dark.sass';
@import 'assets/scss/classes';

A reproduction of my project, without this extension, is here.

How to toggle?

Hi.

This is probably extremely simple but I just cannot seem to figure it out.

I am trying to make a button that lets me toggle between dark and light mode on my web site.

I cannot seem to figure out how to do it. It works fine from chrome console and emulating CSS prefers-color-scheme in the Rendering console, but I want a JavaScript button to do this.

How can I set the browsers prefers-color-scheme value using JavaScript? I can only find methods on how to detect which color scheme is currently in use, but not for SETTING it.

Do I have to set "user-color-scheme" in localstorage or something?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update dependency node-sass to v7 [SECURITY]
• Update dependency postcss-cli to v9.1.0
• Update dependency release-it to v14.14.3

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency autoprefixer to v10.4.19
• Update dependency bulma to v0.9.4
• Update dependency clean-css-cli to v5.6.3
• Update dependency bulma to v1
• Update dependency postcss-cli to v11
• Update dependency release-it to v17
• Update dependency rimraf to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• autoprefixer 10.3.7
• bulma 0.7.4
• clean-css-cli 5.4.1
• node-sass 6.0.1
• postcss-cli 9.0.1
• release-it 14.11.6
• rimraf 3.0.2

nvm

.nvmrc

---

• Check this box to trigger a request for Renovate to run again on this repository

Implementing in Nuxt(v2)

Can anyone guide how to implement dark theme in our existing Nuxt(v2) project?

We need dark and light modes so that user can choose it according to their interest.

Modal backgrounds are blindingly light

This seems to be on purpose but doesn't seem to be a good choice. This also makes the x in the corner very hard to see

No longer maintained

I no longer use Bulma and have no plans on maintaining this repo.

Bulma has native support for dark mode now, please checkout their docs https://bulma.io/documentation/features/dark-mode/

Bulma version?

I'm new to bulma so I'm still figuring out its versioning, but what bulma version does this package work for?

Select element

Could the select element be styled like button please? Currently I have to use custom CSS.

Add prebuilt CSS files

If you could create Github releases or make a dist folder for prebuilt CSS, that would be great. Regular CSS and mappings + minimized CSS and mappings would be extremely handy.

Thanks :)