Bulma findLightColor() and findDarkColor() Functions
Last Updated :
25 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.
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.
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">
<title>Bulma Functions</title>
<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
</h1>
<div class="buttons">
<div>
<a class="button is-info is-light">Info Light</a>
<a class="button is-info">Info</a>
<a class="button is-info is-dark">Info Dark</a>
</div>
<div>
<a class="button is-success is-light">Success Light</a>
<a class="button is-success">Success</a>
<a class="button is-success is-dark">Success Dark</a>
</div>
<div>
<a class="button is-warning is-light">Warning Light</a>
<a class="button is-warning">Warning</a>
<a class="button is-warning is-dark">Warning Dark</a>
</div>
<div>
<a class="button is-danger is-Danger">Danger Light</a>
<a class="button is-danger">Danger</a>
<a class="button is-danger is-dark">Danger Dark</a>
</div>
<div>
<a class="button is-link is-light">Link Light</a>
<a class="button is-link">Link</a>
<a class="button is-link is-dark">Link Dark</a>
</div>
</div>
</div>
</body>
</html>
|
CSS
@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
|
Output:
Example 2: The following code example demonstrates the user-defined $color-dark. Making $color-dark to lighter version.
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">
<title>Bulma Functions</title>
<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
</h1>
<p class="title is-4">
Bulma findLightColor() functions
</p>
<div class="buttons">
<div>
<a class="button is-info is-light">Info Light</a>
<a class="button is-info">Info</a>
<a class="button is-info is-dark">Info Dark</a>
</div>
<div>
<a class="button is-success is-light">Success Light</a>
<a class="button is-success">Success</a>
<a class="button is-success is-dark">Success Dark</a>
</div>
<div>
<a class="button is-warning is-light">Warning Light</a>
<a class="button is-warning">Warning</a>
<a class="button is-warning is-dark">Warning Dark</a>
</div>
<div>
<a class="button is-danger is-Danger">Danger Light</a>
<a class="button is-danger">Danger</a>
<a class="button is-danger is-dark">Danger Dark</a>
</div>
<div>
<a class="button is-link is-light">Link Light</a>
<a class="button is-link">Link</a>
<a class="button is-link is-dark">Link Dark</a>
</div>
</div>
</div>
</body>
</html>
|
CSS
@charset "utf-8";
// Update Bulma's global invert variables
$info-dark: findLightColor(info) !default
$success-dark: findLightColor(success) !default
$warning-dark: findLightColor(warning) !default
$danger-dark: findLightColor(danger) !default
$link-dark: findLightColor(link) !default
@import "../node_modules/bulma/bulma.sass";
|
Output:
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.
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">
<title>Bulma Functions</title>
<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
</h1>
<p class="title is-4">
Bulma findLightColor() and findDarkColor() functions
</p>
<div class="buttons">
<div>
<a class="button is-info is-light">Info Light</a>
<a class="button is-info">Info</a>
<a class="button is-info is-dark">Info Dark</a>
</div>
<div>
<a class="button is-success is-light">Success Light</a>
<a class="button is-success">Success</a>
<a class="button is-success is-dark">Success Dark</a>
</div>
<div>
<a class="button is-warning is-light">Warning Light</a>
<a class="button is-warning">Warning</a>
<a class="button is-warning is-dark">Warning Dark</a>
</div>
<div>
<a class="button is-danger is-Danger">Danger Light</a>
<a class="button is-danger">Danger</a>
<a class="button is-danger is-dark">Danger Dark</a>
</div>
<div>
<a class="button is-link is-light">Link Light</a>
<a class="button is-link">Link</a>
<a class="button is-link is-dark">Link Dark</a>
</div>
</div>
</div>
</body>
</html>
|
CSS
@charset "utf-8";
// Update Bulma's global invert variables
$info-light: findDarkColor(info) !default
$success-light: findDarkColor(success) !default
$warning-light: findDarkColor(warning) !default
$danger-light: findDarkColor(danger) !default
$link-light: findDarkColor(link) !default
@import "../node_modules/bulma/bulma.sass";
|
Output:
Reference Link: https://bulma.io/documentation/utilities/functions/#the-code-findlightcolor-code-and-code-finddarkcolor-code-functions
Share your thoughts in the comments
Please Login to comment...