use-colors.ts — ui Source File

Architecture documentation for use-colors.ts, a typescript file in the ui codebase. 4 imports, 0 dependents.

File typescript ComponentRegistry Styles 4 imports 1 functions

Entity Profile

ComponentRegistry→ Styles→ use-colors.ts — ui Source File

Dependency Diagram

graph LR
  0afe41ac_4a55_c782_f9c9_dd70a39388de["use-colors.ts"]
  cba8a664_3253_9b8c_8abe_9f0e33bbc037["jotai"]
  0afe41ac_4a55_c782_f9c9_dd70a39388de --> cba8a664_3253_9b8c_8abe_9f0e33bbc037
  68f194ce_9060_f5f9_d266_dd66c3d544fb["utils"]
  0afe41ac_4a55_c782_f9c9_dd70a39388de --> 68f194ce_9060_f5f9_d266_dd66c3d544fb
  5281a958_99ee_42f0_65d8_3fb6d850517a["colors"]
  0afe41ac_4a55_c782_f9c9_dd70a39388de --> 5281a958_99ee_42f0_65d8_3fb6d850517a
  47758573_16e6_4808_88b2_8dba3780ae24["use-mounted"]
  0afe41ac_4a55_c782_f9c9_dd70a39388de --> 47758573_16e6_4808_88b2_8dba3780ae24
  style 0afe41ac_4a55_c782_f9c9_dd70a39388de fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { useAtom } from "jotai"
import { atomWithStorage } from "jotai/utils"

import { ColorFormat } from "@/lib/colors"
import { useMounted } from "@/hooks/use-mounted"

type Config = {
  format: ColorFormat
}

const colorsAtom = atomWithStorage<Config>("colors", {
  format: "hsl",
})

export function useColors() {
  const [colors, setColors] = useAtom(colorsAtom)
  const mounted = useMounted()

  return {
    isLoading: !mounted,
    format: colors.format,
    setFormat: (format: ColorFormat) => setColors({ format }),
  }
}