1
0
mirror of synced 2025-12-22 19:34:15 -05:00
Files
docs/components/lib/getThemeProps.tsx
Mike Surowiec e8b7d3b9fc Product landing page react (pt 4) (#19336)
* start SidebarNav, enable dark mode

* wip: sidebarnav, fix primer components theme rendering

* feat: ProductSiteTree, useFeatureFlag

* feat: add new product site tree (untested)

* wire up HomepageVersionPicker, run lint

* fix: remove re-render logic, fix homepage version picker to be natural width

* fix: support css + primer/components color modes

* fix: rename categoryId -> productId

* feat: ProductSiteTree and AllArticlesProduct

* fix: cleanup warnings

* fix: use next links on ProductSiteTreeNew

* fix: use next Link on AllArticlesProduct

* fix: add tooltip to ScrollButton, remove stylesheet dependency

* feat: ProductArticlesList component

* fix: convert color_mode value from cookie when necessary

* remove comments

* replace liquid with jsx

Co-authored-by: Rachael Sewell <rachmari@github.com>
2021-05-19 02:49:51 +00:00

43 lines
1.2 KiB
TypeScript

export const defaultCSSThemeProps = {
colorMode: 'auto', // light, dark, auto
nightScheme: 'dark',
dayScheme: 'light',
}
export const defaultThemeProps = {
colorMode: 'auto', // day, night, auto
nightScheme: 'dark',
dayScheme: 'light',
}
const cssColorModeToJs: Record<string, string> = {
auto: 'auto',
light: 'day',
dark: 'night',
}
export const getThemeProps = (req: any, mode?: 'css') => {
let cookieValue: {
color_mode?: 'auto' | 'light' | 'dark'
dark_theme?: { name: string }
light_theme?: { name: string }
} = {}
const defaultProps = mode === 'css' ? defaultCSSThemeProps : defaultThemeProps
if (req.cookies.color_mode) {
try {
cookieValue = JSON.parse(decodeURIComponent(req.cookies.color_mode))
} catch {
// do nothing
}
}
return {
// the cookie uses primer/css color_mode, sometimes we need to convert that to a primer/components compatible version
colorMode:
(mode === 'css' ? cookieValue.color_mode : cssColorModeToJs[cookieValue.color_mode || '']) ||
defaultProps.colorMode,
nightScheme: cookieValue.dark_theme?.name || defaultProps.nightScheme,
dayScheme: cookieValue.light_theme?.name || defaultProps.dayScheme,
}
}