use-meta-color.ts — ui Source File

Architecture documentation for use-meta-color.ts, a typescript file in the ui codebase. 2 imports, 0 dependents.

File typescript DocumentationAtlas SearchAPI 2 imports 1 functions

Entity Profile

DocumentationAtlas→ SearchAPI→ use-meta-color.ts — ui Source File

Dependency Diagram

graph LR
  41734bbd_bf06_1683_4a3f_11c02f2c1171["use-meta-color.ts"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  41734bbd_bf06_1683_4a3f_11c02f2c1171 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  75d25ec8_fe84_91a4_54c6_20dabb286f91["next-themes"]
  41734bbd_bf06_1683_4a3f_11c02f2c1171 --> 75d25ec8_fe84_91a4_54c6_20dabb286f91
  style 41734bbd_bf06_1683_4a3f_11c02f2c1171 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import * as React from "react"
import { useTheme } from "next-themes"

export const META_THEME_COLORS = {
  light: "#ffffff",
  dark: "#0a0a0a",
}

export function useMetaColor() {
  const { resolvedTheme } = useTheme()

  const metaColor = React.useMemo(() => {
    return resolvedTheme !== "dark"
      ? META_THEME_COLORS.light
      : META_THEME_COLORS.dark
  }, [resolvedTheme])

  const setMetaColor = React.useCallback((color: string) => {
    document
      .querySelector('meta[name="theme-color"]')
      ?.setAttribute("content", color)
  }, [])

  return {
    metaColor,
    setMetaColor,
  }
}