Bulma findLightColor() and findDarkColor() Functions

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.

In this article, we’ll see the Bulma findLightColor() & findDarkColor() functions. These Bulma functions are custom Sass functions that help the users to modify their code to find the related colors dynamically like finding the lighter or darker version of colors.  

Bulma findLightColor() function: The findLightColor() function is used to provide the lighter version of the input color and can be used by various elements.

 

Syntax:

$color: findLightColort($color);

Parameter value: Following are the parameters that are accepted by the above function:

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

Return Value: It returns a lighter version of the input color.

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 example demonstrates the built-in $color-light and $color-dark.

• gfgstyles.scss

Output:

👁 Image

Example 2: The following code example demonstrates the user-defined $color-dark. Making $color-dark to lighter version.

• gfgstyles.scss

Output:

👁 Image

Bulma findDarkColor() function: The findDarkColor() function is used to provide the darker version of the input color and can be used by various elements.

Syntax:

$color: findDarkColor($color);

Parameter value: Following are the parameters that are accepted by the above function:

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

Return Value: It returns a darker version of the input color.

Note: Follow the Setup step defined in the Bulma findLightColor() function.

Example 3: The following code example demonstrates the user-defined $color-light. Making $color-light to a darker version.

• gfgstyles.scss

Output:

👁 Image