css Question posted in
Some basic documentation can be found here.

Customizing BulmaCSS colors with CSS

After reading the documentation, I still don’t understand why I can’t set the primary color with CSS like this:

<!DOCTYPE html>
<!-- Force the light theme: -->
<html data-theme="light">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

    <style>
        :root {
            --bulma-primary: red;
            --bulma-size-medium: 0.5rem;
        }
    </style>
</head>
<body>
    <button class="button is-primary is-medium">Button</button>
</body>
</html>

The size modifier works, but the color remains the default one.

Tags:

2

Answers


  1. 0

    The backgrond color for .button is not set that way.

    Bulma sets .button background-color as an hsl color:

    background-color: hsl(171deg, 100%,calc(41% + 0%));

    which in turn comes from the stylesheet as:

     background-color: hsl(var(--bulma-button-h),var(--bulma-button-s),calc(var(--bulma-button-background-l) + var(--bulma-button-background-l-delta)));

    If you don’t want to bother setting those variables to your own choice you could just set the background color yourself:

    <!DOCTYPE html>
<!-- Force the light theme: -->
<html data-theme="light">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello Bulma!</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

  <style>
     :root {
      --bulma-primary: red;
      --bulma-size-medium: 0.5rem;
    }
    
    .button {
      background-color: red;
    }
  </style>
</head>

<body>
  <button class="button is-primary is-medium">Button</button>
</body>

</html>

    Though it might be more correct to set the hsl variables in :root (e.g. might they be used by Bulma somewhere else?).

    Login or Signup to reply.
  2. 0

    Bulma use HSL based color system. Because Bulma SCSS version can calculate HSL values based on your colors, so only $primary needed. whereas CSS does not have this capability, so you have to set HSL values yourself.

    Try this, all elements using primary color will change

    <!DOCTYPE html>
<!-- Force the light theme: -->
<html data-theme="light">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

    <style>
        :root {
            --bulma-primary-h: 100deg;
            --bulma-size-medium: 0.5rem;
        }
    </style>
</head>
<body>
    <button class="button is-primary is-medium">Button</button>
</body>
</html>

    You can use the browser’s CSS tools to trace step by step and find the initial definition of the CSS referenced variable. By modifying its value, you can achieve a customized effect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search