theme

[xiaotiandada]

Next.js

• https://github.com/xiaotiandada/next-theme
• https://github.com/xiaotiandada/next-theme/blob/main/pages/_app.tsx

如果需要 可以考虑用 cookie 传递服务端的主题，因为 next-themes 使用的是 localstore 存储
大部分情况 不需要
可供参考：https://github.com/xeoneux/next-dark-mode/blob/main/src/index.tsx
使用 cookies 不是一个好主意 pacocoursey/next-themes#17

使用 localstore 结合 MUI UI 库可能会有闪烁的情况，需要更能多的实践

MUI

import { createTheme, ThemeOptions } from '@mui/material/styles'

// https://mui.com/material-ui/customization/default-theme/
// https://material.io/resources/color

const defaultTheme: ThemeOptions = {
  typography: {
    button: {
      textTransform: 'none',
    },
  },
}

export const lightTheme = createTheme({
  palette: {
    mode: 'light',
    primary: {
      main: '#ff2449',
      light: '#ff6675',
      dark: '#c40022',
    },
  },
  ...defaultTheme,
})
export const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#f93c5b',
      light: '#ff7588',
      dark: '#bf0032',
    },
  },
  ...defaultTheme,
})

Disqus

-https://stackoverflow.com/questions/65260505/disqus-iframe-transparency-wont-work-on-chrome-87
-w3c/csswg-drafts#4772

Algolia

• https://github.com/algolia/autocomplete/blob/next/packages/autocomplete-theme-classic/src/theme.scss#L107
• https://dev.to/algolia/creating-an-omnibar-with-autocomplete-3jgh