Skip to main content
Home
Browse packagesDocsSign in

@hydroper/colorobserver@1.0.0

latest
It is unknown whether this package works with Cloudflare Workers, Node.js, Deno, Bun, Browsers
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
It is unknown whether this package works with Deno
It is unknown whether this package works with Bun
It is unknown whether this package works with Browsers
JSR Score
82%
Published
4 weeks ago (1.0.0)
Report package

ColorObserver

Simple TypeScript + React utility that detects the computed character color (the CSS color property) in an element, checking for mouse and focus events across all parents.

This is useful for icons that adapt to light and dark themes.

Example

import { ColorObserver } from "@hydroper/colorobserver";
import { useEffect, useRef } from "react";
import Color from "color";

const myRef = useRef(null);

useEffect(() => {
    const colorObserver = new ColorObserver(myRef.current, (color: Color) => {
        console.log("light =", color.isLight());
    });

    return () => {
        colorObserver.cleanup();
    };
});

Add Package

deno add jsr:@hydroper/colorobserver

Import symbol

import * as colorobserver from "@hydroper/colorobserver";

---- OR ----

Import directly with a jsr specifier

import * as colorobserver from "jsr:@hydroper/colorobserver";

Add Package

npx jsr add @hydroper/colorobserver

Import symbol

import * as colorobserver from "@hydroper/colorobserver";

Add Package

yarn dlx jsr add @hydroper/colorobserver

Import symbol

import * as colorobserver from "@hydroper/colorobserver";

Add Package

pnpm dlx jsr add @hydroper/colorobserver

Import symbol

import * as colorobserver from "@hydroper/colorobserver";

Add Package

bunx jsr add @hydroper/colorobserver

Import symbol

import * as colorobserver from "@hydroper/colorobserver";