feat(theming): add theme-ui

ComposableWeb · Jan 27, 2020 · d79635f · d79635f
1 parent aebe05f
commit d79635f
Show file tree

Hide file tree

Showing 7 changed files with 2,488 additions and 51 deletions.
diff --git a/packages/poolbase-app/package.json b/packages/poolbase-app/package.json
@@ -26,7 +26,8 @@
     "firebase-functions": "^3.3.0",
     "next": "^9.2.1",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "theme-ui": "^0.3.1"
   },
   "devDependencies": {
     "@types/node": "^13.5.0",

diff --git a/packages/poolbase-app/src/app/components/Header.tsx b/packages/poolbase-app/src/app/components/Header.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { useColorMode } from 'theme-ui';
+
+export default function Header() {
+  const [colorMode, setColorMode] = useColorMode();
+  return (
+    <header>
+      <button onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}>
+        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
+      </button>
+    </header>
+  );
+}
diff --git a/packages/poolbase-app/src/app/pages/_app.tsx b/packages/poolbase-app/src/app/pages/_app.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import App from 'next/app';
+import { ThemeProvider, Styled } from 'theme-ui';
+
+import Header from '../components/Header';
+import theme from '../theme';
+
+class MyApp extends App {
+  // Only uncomment this method if you have blocking data requirements for
+  // every single page in your application. This disables the ability to
+  // perform automatic static optimization, causing every page in your app to
+  // be server-side rendered.
+  //
+  // static async getInitialProps(appContext) {
+  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
+  //   const appProps = await App.getInitialProps(appContext);
+  //
+  //   return { ...appProps }
+  // }
+
+  render() {
+    const { Component, pageProps } = this.props;
+    return (
+      <ThemeProvider theme={theme}>
+        <Header />
+        <Styled.root as="main">
+          <Component {...pageProps} />
+        </Styled.root>
+      </ThemeProvider>
+    );
+  }
+}
+
+export default MyApp;
diff --git a/packages/poolbase-app/src/app/pages/_document.tsx b/packages/poolbase-app/src/app/pages/_document.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
diff --git a/packages/poolbase-app/src/app/theme/index.ts b/packages/poolbase-app/src/app/theme/index.ts
@@ -0,0 +1,41 @@
+export default {
+  useColorSchemeMediaQuery: true,
+  useCustomProperties: true,
+  colors: {
+    text: '#000',
+    background: '#fff',
+    primary: '#07c',
+    secondary: '#609',
+    modes: {
+      dark: {
+        text: '#fff',
+        background: '#222',
+        primary: '#0cf',
+        secondary: '#90c',
+      },
+    },
+  },
+  fonts: {
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    heading: 'inherit',
+  },
+  styles: {
+    root: {
+      fontFamily: 'body',
+      color: 'text',
+      bg: 'background',
+    },
+    h1: {
+      fontSize: [4, 5, 6],
+      color: 'primary',
+    },
+    a: {
+      color: 'primary',
+      textDecoration: 'none',
+      ':hover': {
+        color: 'secondary',
+        textDecoration: 'underline',
+      },
+    },
+  },
+};