Merge pull request #205 from OI-wiki/varitheme

OI-wiki · Jul 11, 2020 · cb0642a · cb0642a
2 parents 77045f2 + 036587b
commit cb0642a
Show file tree

Hide file tree

Showing 7 changed files with 214 additions and 110 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -13,9 +13,9 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 import React from 'react'
 import { Helmet } from 'react-helmet'
 import Loadable from 'react-loadable'
-import useDarkMode from '../lib/useDarkMode'
+// import useDarkMode from '../lib/useDarkMode'
 import scrollbar from '../styles/scrollbar'
-import { CustomCssBaseline, darkTheme, lightTheme } from '../theme'
+import { CustomCssBaseline, adaptiveTheme, LightCssBaseline, DarkCssBaseline, AutoCssBaseline } from '../theme'
 import BackTop from './BackTop'
 import Footer from './Footer'
 import Meta from './Meta'
@@ -183,11 +183,15 @@ function MyLayout ({
 }
 
 function StyledLayout (props) {
-  const enableDark = useDarkMode()
+  // const enableDark = useDarkMode()
+
   return (
-    <ThemeProvider theme={enableDark ? darkTheme : lightTheme}>
+    <ThemeProvider theme={adaptiveTheme}>
       <CssBaseline/>
       <CustomCssBaseline/>
+      <LightCssBaseline/>
+      <DarkCssBaseline/>
+      <AutoCssBaseline/>
       <MyLayout {...props}/>
     </ThemeProvider>
   )

diff --git a/src/html.js b/src/html.js
@@ -11,6 +11,7 @@ export default function HTML (props) {
           name="viewport"
           content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
+        <script src="/script.js"></script>
         {props.headComponents}
       </head>
       <body {...props.bodyAttributes}>

diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
@@ -19,7 +19,12 @@ type SettingsPageProps = {
 const SettingsPage: React.FC<SettingsPageProps> = (props: SettingsPageProps) => {
   const { location } = props
   const [settings, setSettings] = useConfig(defaultSettings)
-  const updateSetting = (newSettings): void => (setSettings({ ...defaultSettings, ...settings, ...newSettings }))
+  const updateSetting = (newSettings): void => {
+    const finalSettings = { ...defaultSettings, ...settings, ...newSettings }
+    setSettings(finalSettings)
+    // eslint-disable-next-line dot-notation
+    window !== undefined && window['onthemechange'](finalSettings)
+  }
   type ColorButtonProp = { color: string, desc: string }
   const ColorButton: React.FC<ColorButtonProp> = (props: ColorButtonProp) => {
     const background = props.color === 'auto'

diff --git a/src/styles/colors.ts b/src/styles/colors.ts
@@ -1,51 +1,26 @@
-const colors: Array<{ desc: string, color: string }> = [{
-  color: 'auto', desc: 'auto',
-}, {
-  color: '#FFF', desc: 'classical white',
-}, {
-  color: '#A00', desc: 'Lily Red',
-}, {
-  color: '#E91E63', desc: 'Margatroid Magenta',
-}, {
-  color: '#222', desc: 'Breathy Darkness',
-}, {
-  color: '#ef5350', desc: 'Red',
-}, {
-  color: '#e91e63', desc: 'Pink',
-}, {
-  color: '#ab47bc', desc: 'Purple',
-}, {
-  color: '#7e57c2', desc: 'Deep Purple',
-}, {
-  color: '#3f51b5', desc: 'Indigo',
-}, {
-  color: '#2196f3', desc: 'Blue',
-}, {
-  color: '#03a9f4', desc: 'Light Blue',
-}, {
-  color: '#00bcd4', desc: 'Cyan',
-}, {
-  color: '#009688', desc: 'Teal',
-}, {
-  color: '#4caf50', desc: 'Green',
-}, {
-  color: '#7cb342', desc: 'Light Green',
-}, {
-  color: '#c0ca33', desc: 'Lime',
-}, {
-  color: '#f9a825', desc: 'Yellow',
-}, {
-  color: '#ffa000', desc: 'Amber',
-}, {
-  color: '#fb8c00', desc: 'Orange',
-}, {
-  color: '#ff7043', desc: 'Deep Orange',
-}, {
-  color: '#795548', desc: 'Brown',
-}, {
-  color: '#757575', desc: 'Grey',
-}, {
-  color: '#546e7a', desc: 'Blue Grey',
-},
+const colors: Array<{ desc: string, color: string }> = [
+  { color: 'auto', desc: 'auto' },
+  { color: '#FFF', desc: 'classical white' },
+  { color: '#A00', desc: 'Lily Red' },
+  { color: '#e91e63', desc: 'Margatroid Magenta' },
+  { color: '#222', desc: 'Breathy Darkness' },
+  { color: '#ef5350', desc: 'Red' },
+  { color: '#ab47bc', desc: 'Purple' },
+  { color: '#7e57c2', desc: 'Deep Purple' },
+  { color: '#3f51b5', desc: 'Indigo' },
+  { color: '#2196f3', desc: 'Blue' },
+  { color: '#03a9f4', desc: 'Light Blue' },
+  { color: '#00bcd4', desc: 'Cyan' },
+  { color: '#009688', desc: 'Teal' },
+  { color: '#4caf50', desc: 'Green' },
+  { color: '#7cb342', desc: 'Light Green' },
+  { color: '#c0ca33', desc: 'Lime' },
+  { color: '#f9a825', desc: 'Yellow' },
+  { color: '#ffa000', desc: 'Amber' },
+  { color: '#fb8c00', desc: 'Orange' },
+  { color: '#ff7043', desc: 'Deep Orange' },
+  { color: '#795548', desc: 'Brown' },
+  { color: '#757575', desc: 'Grey' },
+  { color: '#546e7a', desc: 'Blue Grey' },
 ]
 export default colors
diff --git a/src/theme.js b/src/theme.js
@@ -1,7 +1,7 @@
-import { createMuiTheme } from '@material-ui/core'
+import createPalette from '@material-ui/core/styles/createPalette'
 import blue from '@material-ui/core/colors/blue'
 import grey from '@material-ui/core/colors/grey'
-import { withStyles } from '@material-ui/core/styles'
+import { createMuiTheme, withStyles } from '@material-ui/core/styles'
 import PropTypes from 'prop-types'
 
 const globalStyles = withStyles((theme) => ({
@@ -41,75 +41,176 @@ function CustomCssEl () {
 }
 
 CustomCssEl.propTypes = { classes: PropTypes.object.isRequired }
-
 export const CustomCssBaseline = globalStyles(CustomCssEl)
 
-const lightTheme = createMuiTheme({
-  palette: {
-    type: 'light',
-    footer: {
-      background: grey[200],
-      text: grey[700],
-    },
-    details: {
-      border: blue[500],
-      main: blue[50],
-    },
-    blockquote: 'rgba(0,0,0,.12)',
-    inlineCode: {
-      color: '#37474f',
-      background: 'hsla(0,0%,85%,.5)',
-    },
-    search: {
-      messageBackground: grey[100],
-      highlight: '#174d8c',
+const lightColor = createPalette({ type: 'light' })
+const darkColor = createPalette({ type: 'dark' })
+const paletteKeys = [
+  'primary', 'secondary', 'text', 'background', 'action',
+  'error', 'warning', 'info', 'success']
+
+// Workaround for material-ui color.
+function htr (hex, alpha = '1') {
+  let c
+  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+    c = hex.substring(1).split('')
+    if (c.length === 3) {
+      c = [c[0], c[0], c[1], c[1], c[2], c[2]]
+    }
+    c = '0x' + c.join('')
+    return [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + alpha
+  }
+  if (hex.startsWith('rgba')) {
+    return hex.slice(5, -1)
+  }
+  throw new Error('Bad Hex ' + hex)
+}
+
+function applyDefaults (theme, ...keys) {
+  const k = {}
+  function applyDefault (key) {
+    for (const el of Object.keys(theme[key])) {
+      if (/^(#|rgba)/.test(`${theme[key][el]}`)) {
+        k[`--${key}-${el}`] = htr(theme[key][el].toString())
+      }
+    }
+  }
+  keys.forEach(applyDefault)
+  return k
+}
+
+const lightCss = {
+  '@global': {
+    '.themeLight': {
+      '--primary-color': htr(lightColor.primary.main),
+      '--footer-bg': htr(grey[200]),
+      '--footer-text': htr(grey[700]),
+      '--details-border': htr(blue[500]),
+      '--details-main': htr(blue[50]),
+      '--blockquote': '255, 255, 255, .12',
+      '--inline-color': '#37474f',
+      '--inline-bg-hsla': 'hsla(0,0%,85%,.5)',
+      '--search-bg': htr(grey[100]),
+      '--search-highlight': '#174d8c',
+      '--tab-hover': htr('#000'),
+      '--divider': htr(lightColor.divider),
+      '--subtitle-text': '0, 0, 0, .7',
+      '--alert-info-bg': htr(blue[50]),
+      ...applyDefaults(lightColor, ...paletteKeys),
     },
-    tab: {
-      colorOnHover: '#000',
+  },
+}
+
+const darkCss = {
+  '@global': {
+    '.themeDark': {
+      '--primary-color': htr(darkColor.primary.main),
+      '--paper-color': htr(darkColor.background.paper),
+      '--bg-color': htr(darkColor.background.default),
+      '--footer-bg': htr(grey[900]),
+      '--footer-text': htr(grey[300]),
+      '--details-border': htr(blue[500]),
+      '--details-main': htr(grey[700]),
+      '--blockquote': '255, 255, 255, .12',
+      '--inline-color': htr(grey[100]),
+      '--inline-bg-hsla': 'hsla(0,0%,85%,.5)',
+      '--search-bg': htr(grey[700]),
+      '--search-highlight': '#acccf1',
+      '--tab-hover': htr('#fff'),
+      '--divider': htr(darkColor.divider),
+      '--subtitle-text': '255, 255, 255. .7',
+      '--alert-info-bg': htr(grey[900]),
+      ...applyDefaults(darkColor, ...paletteKeys),
     },
-    subTitle: 'rgba(0,0,0,.7)',
   },
-})
+}
 
-const darkTheme = createMuiTheme({
-  overrides: {
-    MuiCssBaseline: {
-      '@global': {
-        img: {
-          filter: 'brightness(0.8) contrast(1.2)',
-          transition: 'filter 0.2s',
-          transitionTimingFunction: 'ease',
-          '&:hover': {
-            filter: 'brightness(1) contrast(1)',
-          },
-        },
+function getThemeCssEl (style) {
+  function ThemeCssEl () {
+    return null
+  }
+  ThemeCssEl.propTypes = { classes: PropTypes.object.isRequired }
+  return style(ThemeCssEl)
+}
+
+export const LightCssBaseline = getThemeCssEl(withStyles(() => lightCss))
+export const DarkCssBaseline = getThemeCssEl(withStyles(() => darkCss))
+export const AutoCssBaseline = getThemeCssEl(withStyles(() => {
+  return {
+    '@global': {
+      '.themeAuto': lightCss['@global']['.themeLight'],
+      '@media (prefers-color-scheme: dark)': {
+        '.themeAuto': darkCss['@global']['.themeDark'],
       },
     },
-  },
+  }
+}))
+function applyAdaptives (...keys) {
+  const rst = {}
+  function applyAdaptive (key) {
+    const k = {}
+    for (const el of Object.keys(lightColor[key])) {
+      k[el] = /^(#|rgba)/.test(`${lightColor[key][el]}`)
+        ? `rgba(var(--${key}-${el}))`
+        : lightColor[key][el]
+    }
+    rst[key] = k
+  }
+  keys.forEach(applyAdaptive)
+  return rst
+}
+
+const adaptiveTheme = createMuiTheme({
   palette: {
-    type: 'dark',
+    primary: {
+      main: 'rgba(var(--primary-color))',
+    },
+    ...applyAdaptives(...paletteKeys),
     footer: {
-      background: grey[900],
-      text: grey[300],
+      background: 'rgba(var(--footer-bg))',
+      text: 'rgba(var(--footer-text))',
     },
     details: {
-      border: blue[500],
-      main: grey[700],
+      border: 'rgba(var(--details-border))',
+      main: 'rgba(var(--details-main))',
     },
-    blockquote: 'rgba(255,255,255,.12)',
+    blockquote: 'rgba(var(--blockqoute))',
     inlineCode: {
-      color: grey[100],
-      background: 'hsla(0,0%,60%,.5)',
+      color: 'rgba(var(--inline-color))',
+      background: 'var(--inline-bg-hsla)',
     },
     search: {
-      messageBackground: grey[700],
-      highlight: '#acccf1',
+      messageBackground: 'rgba(var(--search-bg))',
+      highlight: 'rgba(var(--search-highlight))',
     },
     tab: {
-      colorOnHover: '#fff',
+      colorOnHover: 'rgba(var(--tab-hover))',
+    },
+    divider: 'rgba(var(--divider))',
+    getContrastText (color) {
+      if (color.startsWith('rgba(v')) return 'rgba(var(--text-primary))'
+      else return lightColor.getContrastText(color)
+    },
+    subTitle: 'rgba(var(--subtitle-text))',
+  },
+  // Material-UI hard-coded and/or used color manipulator in several components
+  // override them here as a workaround
+  overrides: {
+    MuiChip: {
+      root: {
+        color: 'rgba(var(--text-main))',
+      },
+      outlined: {
+        border: '1px solid rgba(var(--divider))',
+      },
+    },
+    MuiAlert: {
+      standardInfo: {
+        color: 'rgba(var(--text-main))',
+        backgroundColor: 'rgba(var(--alert-info-bg))',
+      },
     },
-    subTitle: 'rgba(255,255,255,.7)',
   },
 })
 
-export { lightTheme, darkTheme }
+export { adaptiveTheme }