https://github.com/tanishqmanuja/ionic-color-injector

Inject custom colors as Ionic CSS Variables at runtime.
https://github.com/tanishqmanuja/ionic-color-injector

css ionic

Last synced: 1 day ago
JSON representation

Inject custom colors as Ionic CSS Variables at runtime.

• Host: GitHub
• URL: https://github.com/tanishqmanuja/ionic-color-injector
• Owner: tanishqmanuja
• License: mit
• Created: 2023-01-05T08:16:02.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-20T09:33:31.000Z (about 1 year ago)
• Last Synced: 2024-11-08T23:54:23.452Z (about 2 months ago)
• Topics: css, ionic
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@tqman/ionic-color-injector
• Size: 921 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Logo](https://raw.github.com/tanishqmanuja/ionic-color-injector/main/assets/banner.png?maxAge=2592000)

# Ionic Color Injector

Ionic Color Injector is a utility that injects ionic colors with generated css variables into the a html element at runtime.

## Installation

- via npm

  ```bash

  npm install @tqman/ionic-color-injector

  ```

- via pnpm

  ```bash

  pnpm add @tqman/ionic-color-injector

  ```

- via bun

  ```bash

  bun install @tqman/ionic-color-injector

  ```

## Usage

```typescript

import { injectIonicColor } from "@tqman/ionic-color-injector";

// this will inject a style element into the document's head

injectIonicColor("primary", "#428cff");

/* Expected Result

  

    

      :root {

        --ion-color-primary: #428cff;

        --ion-color-primary-rgb: 66,140,255;

        --ion-color-primary-contrast: #000000;

        --ion-color-primary-contrast-rgb: 0,0,0;

        --ion-color-primary-shade: #3a7be0;

        --ion-color-primary-tint: #5598ff;

      }

    

  

  ...

*/

```