Bulma findColorInvert() Function

Last Updated : 06 Oct, 2022

Bulma is an Open source CSS framework which is developed by Jeremy Thomas. This framework is basically based on the CSS Flexbox property. It is highly responsive and it helps in minimizing the use of media queries for responsive behavior.

The findColorInvert() is one of the custom Sass functions which helps to find the related colors dynamically. This function is used to provide a readable shade for the text when the input color is used as the background or vice-versa. It either returns black with 70% transparency or white with 100% opaque. The color return depends on the luminance of the color provided.

Syntax:

$color-invert: findColorInvert($color)

Parameters: This function accepts a single parameter that is described below:

$color: This parameter accepts the color as an input.

Return Value: It either returns black with 70% transparency (rgba(#000, 0.7)) or white with 100% opaque (#fff).

Setup: After completing the Bulma’s initial setup, follow the below steps:

Step 1: Now install dev dependencies

Command1: npm install node-sass --save-dev
Command2: npm install bulma --save-dev

Step 2: Create a package.json file for your project.

Command: npm init

The package.json will be created. Add/Replace the file with the following:

“main”: “sass/mystyles.scss”,
“scripts”: {
“css-build”: “node-sass –omit-source-map-url sass/gfgstyles.scss css/gfgstyles.css”,
“css-watch”: “npm run css-build — –watch”,
“start”: “npm run css-watch”
}

Step 3: Now create a customized Bulma sass file – gfgstyles.scss

@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";

Step 4: Run the following command to generate css/gfgstyles.css from sass/gfgstyles.scss which can be used in HTML CSS styling.

npm run css-build

Example 1: The following code demonstrates the user-defined $color-invert for all $color from #fff to rgba(#000, 0.7).

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/gfgstyles.css"> 
    <style> 
        .buttons { 
            display: block; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container has-text-centered"> 
        <h1 class="title is-1 has-text-success"> 
            GeeksforGeeks - Bulma functions 
        </h1> 
  
        <p class="title is-3"> 
            Bulma findColorInvert() function 
        </p> 
  
        <div class="buttons"> 
            <a class="button is-info">Info</a> 
            <a class="button is-success">Success</a> 
            <a class="button is-warning">Warning</a> 
            <a class="button is-danger">Danger</a> 
            <a class="button is-light">Light</a> 
            <a class="button is-dark">Dark</a> 
        </div> 
    </div> 
</body> 
  
</html>

gfgstyles.scss

@charset "utf-8"; 
  
// Update Bulma's global invert variables 
$info-invert: findColorInvert(light); 
$success-invert: findColorInvert(light); 
$warning-invert: findColorInvert(light); 
$danger-invert: findColorInvert(light); 
$light-invert: findColorInvert(light); 
$dark-invert: findColorInvert(light); 
  
@import "../node_modules/bulma/bulma.sass";

Output:

#fff to rgba(#000, 0.7)

Example 2: The following code demonstrates the user-defined $color-invert for all $color from rgba(#000, 0.7) to #fff.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/gfgstyles.css"> 
    <style> 
        .buttons { 
            display: block; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container has-text-centered"> 
        <h1 class="title is-1 has-text-success"> 
            GeeksforGeeks - Bulma functions 
        </h1> 
  
        <p class="title is-3"> 
            Bulma findColorInvert() function 
        </p> 
  
        <div class="buttons"> 
            <a class="button is-info">Info</a> 
            <a class="button is-success">Success</a> 
            <a class="button is-warning">Warning</a> 
            <a class="button is-danger">Danger</a> 
            <a class="button is-light">Light</a> 
            <a class="button is-dark">Dark</a> 
        </div> 
    </div> 
</body> 
  
</html>

gfgstyles.scss

@charset "utf-8"; 
  
// Update Bulma's global invert variables 
$info-invert: #fff; 
$success-invert: #fff; 
$warning-invert: #fff; 
$danger-invert: #fff; 
$light-invert: #fff; 
$dark-invert: #fff; 
  
@import "../node_modules/bulma/bulma.sass";