SASS Light & Dark

This package contains color themes to be used within IBL applications. The applications that are using this package need Bootstrap 5.3.0 or newer, with color mode support.

How to use:

Importing the themes

At the beginning of your main scss/sass file:

// Import the custom SCSS variables from the package:
// (Contains custom variables, theme variable overrides, and Bootstrap core variable overrides)
@import "@iblcomponents/ibl-light-dark-theme/dist/ibl-variables";

// Import the Bootstrap core 
// (This file imports all Bootstrap core's variables and components from the Bootstrap core package installed via npm)
@import "node_modules/bootstrap/scss/bootstrap";

// Import the themes SCSS that this package contains
// (This file would import a bunch of component SCSS files)
@import "@iblcomponents/ibl-light-dark-theme/dist/ibl-dark";
@import "@iblcomponents/ibl-light-dark-theme/dist/ibl-light";

// Import your custom components/styles
// (This file could import separate files or be a single SCSS file)

Using the themes

You can set the theme for any HTML element or even for your whole application by adding the data-bs-theme attribute to the element:

<div className="App" data-bs-theme="ibl-dark">

Limitations:

The theme is meant to be applied on any project that uses bootstrap with support for color themes (Bootstrap 5.3.0 or newer). It overrides standard bootstrap classes applying colors, font styles, borders, spacing, etc. Any special styling that you use within your code will overwrite the settings from these themes and may result an IBL application that does not have a consistent look and feel.

Note: These themes don't override Bootstrap's Reboot component where some defaults and core variables are set. We did our best to cover all cases, but our changes might yield some color combinations that lack contrast (i.e. a selected element will have almost the same color as an unselected one).

Deployment on NPM:

For changes to be uploaded on the NPM first there are 3 steps:

1. Change the version in the package.json
2. Run the build script (npm run build). This will overwrite the ./dist folder with the content of the ./src/themes folder.
3. Run npm publish. All the files from the .dist folder along with the README,md and component-info.json files will be uploaded to the NPM.

Happy coding!