https://github.com/ssofy/bootchameleon

Realtime Bootstrap5 Color Manipulation Library
https://github.com/ssofy/bootchameleon

bootstrap bootstrap5 bootstrap5-theme javascript js

Last synced: about 1 month ago
JSON representation

Realtime Bootstrap5 Color Manipulation Library

• Host: GitHub
• URL: https://github.com/ssofy/bootchameleon
• Owner: ssofy
• License: mit
• Created: 2023-06-27T09:27:18.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-09-16T08:21:04.000Z (about 1 year ago)
• Last Synced: 2024-09-30T06:20:51.402Z (about 2 months ago)
• Topics: bootstrap, bootstrap5, bootstrap5-theme, javascript, js
• Language: JavaScript
• Homepage:
• Size: 49.8 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Bootchameleon for Bootstrap 5

![](logo.png)

A tiny and independent javascript library for changing the colors of **Bootstrap 5** components in realtime.

It was built primarily to assist theme designers at [SSOfy](https://www.ssofy.com) in supporting theme customization features, but it is also freely available to anybody who finds it useful.

### Contributions are welcome!

The current state only allows for button color changes.

We hope to support more components overtime.

Feel free to seek help from other developers wherever possible.

## Installation

Include the script tag:

```html

```

## Usage

```javascript

// change primary button color

window.bootchameleon.buttons('.btn-primary')

  .setBackgroundColor('#000000')

  .setTextColor('#ffffff')

  .setHoverEffect('#000000')

  .setHoverTextColor('#ffffff')

  .setBorderColor('#4f4f4f');

```

Alternatively, you may use magic methods to determine the ideal colors automatically:

```javascript

// primary button

window.bootchameleon.buttons('.btn-primary').setColorAuto('#000000');

// outline primary button

window.bootchameleon.buttons('.btn-outline-primary').setOutlineColorAuto('#000000');

```

## Build

```sh

npm install

npm run build

```

## License

The MIT License (MIT). Please see [License](LICENSE) File for more information.