feat(website): add dark mode (pmndrs#1048)

* feat(website): add dark mode

* fix(website): add dark styles for inline code blocks

website/.babelrc

@@ -14,7 +14,6 @@
           ]
         }
       }
-    ],
-    "jotai/babel/preset"
+    ]
   ]
 }

website/gatsby-config.js

@@ -65,6 +65,15 @@ module.exports = {
       },
     },
     `gatsby-plugin-postcss`,
+    {
+      resolve: 'gatsby-plugin-use-dark-mode',
+      options: {
+        classNameDark: 'dark',
+        classNameLight: 'light',
+        storageKey: 'darkMode',
+        minify: true,
+      },
+    },
     {
       resolve: `gatsby-plugin-algolia`,
       options: {
@@ -89,9 +98,9 @@ module.exports = {
         },
       },
     },
-    `gatsby-plugin-remove-trailing-slashes`,
   ],
   jsxRuntime: 'automatic',
+  trailingSlash: 'never',
   flags: {
     FAST_DEV: true,
   },

website/package.json

@@ -27,15 +27,16 @@
     "gatsby-plugin-mdx": "^3.7.0",
     "gatsby-plugin-postcss": "^5.7.0",
     "gatsby-plugin-react-helmet": "^5.7.0",
-    "gatsby-plugin-remove-trailing-slashes": "^4.7.0",
     "gatsby-plugin-sitemap": "^5.7.0",
+    "gatsby-plugin-use-dark-mode": "^1.4.0",
     "gatsby-source-filesystem": "^4.7.0",
     "jotai": "^1.6.0",
     "prism-react-renderer": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-instantsearch-dom": "^6.22.0"
+    "react-instantsearch-dom": "^6.22.0",
+    "use-dark-mode": "^2.3.1"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.4.0",

website/src/components/button.js

@@ -16,22 +16,21 @@ export const Button = ({
   ...rest
 }) => {
   const buttonClassNames = cx(
-    'inline-flex items-center border',
+    'inline-flex items-center border dark:!shadow-none select-none',
     !small
       ? 'px-6 py-3 space-x-4 shadow-md rounded-md sm:rounded-lg text-base'
       : 'px-3 py-1.5 space-x-2 shadow-sm rounded sm:rounded-md text-xs',
     !dark
-      ? 'border-gray-200 hover:border-blue-200 bg-gray-100 hover:bg-blue-100 text-black'
-      : 'border-gray-700 hover:border-blue-700 bg-gray-900 text-gray-300',
+      ? 'border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900 hover:bg-blue-100 text-black dark:text-gray-300'
+      : 'border-gray-800 bg-gray-900 text-gray-300',
     !disabled ? 'cursor-pointer' : 'cursor-not-allowed',
-    'select-none',
     className
   )
 
   const iconClassNames = cx(
     'flex-shrink-0 object-contain fill-current',
     !small ? 'w-6 h-6' : 'w-4 h-4',
-    !dark ? 'text-gray-700' : 'text-gray-300'
+    !dark ? 'text-gray-700 dark:text-gray-300' : 'text-gray-300'
   )
 
   if (onClick && to) {

website/src/components/code-sandbox.js

@@ -1,6 +1,6 @@
 export const CodeSandbox = ({ id, tests }) => {
   return (
-    <div className="mb-8 overflow-hidden shadow-lg rounded-md sm:rounded-lg border-b border-gray-200">
+    <div className="mb-8 overflow-hidden shadow-lg !dark:shadow-none rounded-md sm:rounded-lg border-b border-gray-200 dark:border-gray-800">
       <iframe
         title={id}
         className="w-full h-[400px]"

website/src/components/docs.js

@@ -16,7 +16,7 @@ export const Docs = ({ className = '', ...rest }) => {
       {navLinks.map((section, index) => (
         <div key={index}>
           {section.title && (
-            <div className="relative -left-0.5 font-bold text-gray-350 text-sm uppercase tracking-widest">
+            <div className="relative -left-0.5 font-bold text-gray-350 dark:text-gray-650 text-sm uppercase tracking-widest">
               {section.title}
             </div>
           )}
@@ -26,8 +26,8 @@ export const Docs = ({ className = '', ...rest }) => {
                 <Link
                   to={`/docs/${doc.slug}`}
                   onClick={() => setIsMenuOpen(false)}
-                  className="relative -left-3 inline-block px-2 py-1 border border-transparent hover:!border-gray-200 hover:bg-gray-100 rounded text-lg"
-                  activeClassName="bg-blue-100 !border-blue-200"
+                  className="relative -left-3 inline-block px-2 py-1 border border-transparent hover:!border-blue-200 dark:hover:!border-teal-800 hover:bg-blue-100 dark:hover:bg-teal-950 rounded text-lg"
+                  activeClassName="!border-blue-200 dark:!border-teal-900 bg-blue-100 dark:bg-teal-950"
                   partiallyActive>
                   {doc.meta.title}
                 </Link>

website/src/components/inline-code.js

@@ -1,6 +1,6 @@
 export const InlineCode = ({ children }) => {
   return (
-    <code className="relative -top-px px-1 py-0.5 bg-gray-100 rounded text-black">
+    <code className="relative -top-px px-1 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-black dark:text-gray-400">
       {children}
     </code>
   )

website/src/components/intro.js

@@ -11,7 +11,7 @@ export const Intro = () => {
           title="Jotai mascot"
           alt="Jotai mascot"
         />
-        <div className="relative w-2/3 lg:w-3/4 p-4 lg:p-8 space-y-4 bg-gray-100 rounded-xl text-sm sm:text-base md:text-lg text-gray-700 leading-snug lg:leading-normal speech-bubble">
+        <div className="relative w-2/3 lg:w-3/4 p-4 lg:p-8 space-y-4 bg-gray-100 dark:bg-gray-900 rounded-xl text-sm sm:text-base md:text-lg text-gray-700 dark:text-gray-300 leading-snug lg:leading-normal speech-bubble">
           <div>
             No extra re-renders, state resides within React, and you get the
             full benefits from suspense and concurrent features.

website/src/components/jotai.js

@@ -10,8 +10,8 @@ export const Jotai = ({ isDocsPage = false, small = false, ...rest }) => {
           <Logo
             className={cx(
               isDocsPage
-                ? 'text-gray-300 hover:text-black transition ease-in-out duration-300'
-                : 'text-black',
+                ? 'text-gray-300 dark:text-white hover:text-black dark:hover:text-white transition ease-in-out duration-300 '
+                : 'text-black dark:text-white',
               !small
                 ? 'w-full max-w-[12rem] lg:max-w-[16rem] 2xl:max-w-[18rem]'
                 : 'w-[4rem]'
@@ -24,7 +24,7 @@ export const Jotai = ({ isDocsPage = false, small = false, ...rest }) => {
         className={cx(
           !small
             ? 'mt-2 2xl:mt-6 space-x-6 lg:space-x-4 2xl:space-x-6 text-gray-400'
-            : 'mt-1 space-x-2 text-gray-350',
+            : 'mt-1 space-x-2 text-gray-350 dark:text-gray-500',
           'flex items-center'
         )}>
         <div

website/src/components/layout.js

@@ -1,16 +1,49 @@
+import cx from 'classnames'
+import useDarkMode from 'use-dark-mode'
 import {
   Footer,
+  Icon,
   Main,
   Menu,
   SearchModal,
   Sidebar,
   Wrapper,
 } from '../components'
 
+const INITIAL_STATE = false
+
+const DARK_MODE_CONFIG = {
+  classNameDark: 'dark',
+  classNameLight: 'light',
+}
+
 export const Layout = ({ showDocs = false, children }) => {
+  const darkMode = useDarkMode(INITIAL_STATE, DARK_MODE_CONFIG)
+
+  const lightModeIconClassNames = cx(
+    darkMode.value ? 'opacity-100' : 'opacity-0',
+    'w-5 h-5 fill-current transition-opacity ease-in-out duration-300'
+  )
+
+  const darkModeIconClassNames = cx(
+    darkMode.value ? 'opacity-0' : 'opacity-100',
+    'absolute left-0 top-0 w-5 h-5 fill-current transition-opacity ease-in-out duration-300'
+  )
+
   return (
     <>
       <Wrapper>
+        <header className="absolute lg:fixed top-0 right-0">
+          <button
+            type="button"
+            onClick={darkMode.toggle}
+            className="relative inline-flex justify-center items-center m-4 w-7 h-7 rounded-full text-black dark:text-gray-400">
+            <div className="relative">
+              <Icon icon="sun" className={lightModeIconClassNames} />
+              <Icon icon="moon" className={darkModeIconClassNames} />
+            </div>
+          </button>
+        </header>
         <Sidebar showDocs={showDocs} />
         <Main>
           <div className="prose">{children}</div>

website/src/components/menu.js

@@ -9,7 +9,7 @@ export const Menu = () => {
   return (
     <>
       <div className="fixed left-0 bottom-0 right-0 lg:hidden">
-        <div className="flex justify-center w-full p-4 space-x-4 border-t border-gray-700 bg-gray-900">
+        <div className="flex justify-center w-full p-4 space-x-4 border-t border-gray-700 dark:border-gray-800 bg-gray-900">
           <Button
             icon="github"
             to="https://github.com/pmndrs/jotai"
@@ -46,7 +46,7 @@ export const Menu = () => {
             : 'opacity-0 pointer-events-none',
           'fixed inset-0 z-50 flex items-end max-h-screen p-4 sm:p-6 bg-black/75 transition ease-in-out duration-300'
         )}>
-        <div className="w-full max-h-full overflow-y-scroll p-8 border border-gray-300 rounded-lg bg-white shadow-2xl !overscroll-none">
+        <div className="w-full max-h-full overflow-y-scroll p-8 border border-gray-300 dark:border-gray-800 rounded-lg bg-white dark:bg-gray-950 shadow-2xl dark:!shadow-none !overscroll-none">
           <div className="px-3 pb-16 sm:pb-0">
             <div className="-mx-3 mb-6">
               <SearchButton className="w-full" />

website/src/components/modal.js

@@ -3,11 +3,11 @@ import * as Dialog from '@radix-ui/react-dialog'
 export const Modal = ({ isOpen, onOpenChange, children, ...rest }) => (
   <Dialog.Root open={isOpen} onOpenChange={onOpenChange} {...rest}>
     <Dialog.Portal>
-      <div className="fixed top-0 right-0 bottom-0 w-8 h-full bg-white z-100" />
+      <div className="fixed top-0 right-0 bottom-0 w-8 h-full bg-white dark:bg-gray-950 z-100" />
       <Dialog.Overlay className="fixed inset-0 z-[1000] flex justify-center bg-black/50 backdrop-blur p-8 sm:p-12 lg:p-32">
         <div className="w-full max-w-3xl">
           <Dialog.Content className="min-w-full z-[1001]">
-            <div className="bg-white rounded-lg shadow-xl overflow-hidden">
+            <div className="bg-white dark:bg-gray-950 rounded-lg shadow-xl dark:!shadow-none overflow-hidden">
               {children}
             </div>
           </Dialog.Content>

website/src/components/search-modal.js

@@ -51,7 +51,7 @@ const SearchBox = ({ currentRefinement, refine }) => (
     placeholder="Search here..."
     value={currentRefinement}
     onChange={(event) => refine(event.currentTarget.value)}
-    className="flex items-center w-full px-4 py-2 ring-0 border border-gray-300 rounded-lg bg-white text-lg"
+    className="flex items-center w-full px-4 py-2 ring-0 border border-gray-300 dark:border-gray-800 rounded-lg bg-white dark:bg-gray-950 text-lg text-black dark:text-gray-200"
   />
 )
 
@@ -88,10 +88,15 @@ const Hit = ({ hit }) => {
       to={`/docs/${slug}`}
       className="flex my-6 space-x-3 group">
       <div>
-        <Icon icon="file" className="w-6 h-6 fill-current text-blue-400" />
+        <Icon
+          icon="file"
+          className="w-6 h-6 fill-current text-blue-400 dark:text-teal-600"
+        />
       </div>
       <div>
-        <div className="font-semibold text-xl">{title}</div>
+        <div className="font-semibold text-xl text-white dark:text-gray-200">
+          {title}
+        </div>
         {excerpt && (
           <div className="mt-1 text-sm text-gray-500 leading-snug">
             {excerpt}

website/src/demos/core.js

@@ -10,7 +10,7 @@ export const CoreDemo = () => {
       <input
         value={text}
         onChange={(event) => setText(event.target.value)}
-        className="w-full focus:!ring-transparent"
+        className="w-full focus:!ring-transparent bg-transparent"
       />
     )
   }
@@ -58,7 +58,7 @@ const App = () => {
   return (
     <>
       <div className="py-8 text-sm">
-        <div className="flex items-center px-4 py-2 focus-within:ring border border-gray-300 rounded-lg bg-white text-lg">
+        <div className="flex items-center px-4 py-2 focus-within:ring border border-gray-300 dark:border-gray-800 rounded-lg bg-white dark:bg-gray-950 text-lg">
           <Input />
           <Uppercase />
         </div>