@cryptotaxi247 / documentation
Code Commits Issues Pulls Sessions CI/CD
update-search-sensitivity
@reggi/path-to-regexp dependabot/npm_and_yarn/main/copy-to-clipboard-4.0.2 dependabot/npm_and_yarn/main/eslint-10.4.0 dependabot/npm_and_yarn/main/npmcli/eslint-config-7.0.0 dependabot/npm_and_yarn/main/proc-log-7.0.0 dependabot/npm_and_yarn/npm_and_yarn-826852524d dependabot/npm_and_yarn/npm_and_yarn-ab9a7f4bc2 deprecate-totp-2fa dhei/classic-tokens gat-bypass-2fa-docs jpg619/fix-accessibility-content-flow jpg619/version-bump-tar-2 kartykp/gat-bypass-2fa-docs kartykp/upgrade-path-to-regex main maitxn/version-bump-tar patch-1 reggi/cache-based-on-version reggi/dev-engines reggi/fix-transform-prettier reggi/overrides update-search-sensitivity
js 56 lines 1.29 KB
Raw
1 import React from 'react'
2 import {ThemeProvider as Provider, theme} from '@primer/react'
3 import deepmerge from 'deepmerge'
4
5 export const NPM_RED = '#cb3837'
6
7 export const npmTheme = deepmerge(theme, {
8 colors: {
9 logoBg: NPM_RED,
10 },
11 colorSchemes: {
12 light: {
13 colors: {
14 accent: {
15 fg: NPM_RED,
16 emphasis: NPM_RED,
17 },
18 },
19 },
20 dark_dimmed: {
21 colors: {
22 canvas: {
23 default: '#333333',
24 },
25 fg: {
26 default: '#E1E4E8',
27 },
28 btn: {
29 text: '#E1E4E8',
30 bg: 'transparent',
31 border: '#444D56',
32 hoverBorder: '#444D56',
33 hoverBg: NPM_RED,
34 },
35 },
36 },
37 },
38 })
39
40 export const ThemeProvider = props => <Provider theme={npmTheme} {...props} />
41
42 export const Theme = React.forwardRef(function Theme({theme: colorMode, as = 'div', ...props}, ref) {
43 return (
44 <Provider colorMode={colorMode} nightScheme="dark_dimmed">
45 {React.createElement(as, {...props, ref})}
46 </Provider>
47 )
48 })
49
50 export const LightTheme = React.forwardRef(function LightTheme(props, ref) {
51 return <Theme ref={ref} theme="light" {...props} />
52 })
53
54 export const DarkTheme = React.forwardRef(function DarkTheme(props, ref) {
55 return <Theme ref={ref} theme="dark" {...props} />
56 })