docs: support light mode. (#1177)

kysely-org · Oct 11, 2024 · 7a338c6 · 7a338c6
1 parent 87c679c
commit 7a338c6
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 55 deletions.
diff --git a/site/docusaurus.config.ts b/site/docusaurus.config.ts
@@ -64,8 +64,8 @@ export default {
     },
     colorMode: {
       defaultMode: 'dark',
-      disableSwitch: true,
-      respectPrefersColorScheme: false,
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
     },
     docs: {
       sidebar: {

diff --git a/site/src/components/Playground.tsx b/site/src/components/Playground.tsx
@@ -1,10 +1,14 @@
+import { useColorMode } from '@docusaurus/theme-common'
+
 export function Playground({
   code,
   setupCode = exampleSetup,
   kyselyVersion,
   dialect = 'postgres',
   disableIframeMode = false,
 }: PlaygroundProps) {
+  const { isDarkTheme } = useColorMode()
+
   const state: PlaygroundState = {
     dialect,
     editors: { query: code, type: setupCode },
@@ -14,7 +18,7 @@ export function Playground({
     state.kysely = { type: 'tag', name: kyselyVersion }
   }
   const params = new URLSearchParams()
-  params.set('theme', 'dark')
+  params.set('theme', isDarkTheme ? 'dark' : 'light')
   if (!disableIframeMode) {
     params.set('open', '1')
     params.set('nomore', '1')
@@ -29,6 +33,7 @@ export function Playground({
         width: '100%',
         minHeight: '600px',
         borderRadius: 7,
+        border: isDarkTheme ? undefined : '1px solid var(--gray3)',
       }}
       allow="clipboard-write"
       src={`https://kyse.link/?${params}${hash}`}

diff --git a/site/src/components/SectionFeatures/index.tsx b/site/src/components/SectionFeatures/index.tsx
@@ -1,7 +1,8 @@
+import { useColorMode } from '@docusaurus/theme-common'
+import { gray } from '@radix-ui/colors'
 import type { SVGProps } from 'react'
 import clsx from 'clsx'
 import styles from './styles.module.css'
-import { gray } from '@radix-ui/colors'
 
 type FeatureItem = {
   title: string
@@ -92,12 +93,14 @@ function TickIcon(props: SVGProps<SVGSVGElement>) {
 }
 
 function Feature({ title, description }: FeatureItem) {
+  const { isDarkTheme } = useColorMode()
+
   return (
     <div className={clsx('col col--6')} style={{ padding: 10 }}>
       <div className="padding-horiz--md">
         <h3
           style={{
-            color: gray.gray4,
+            color: isDarkTheme ? gray.gray4 : gray.gray12,
             display: 'inline-flex',
             alignItems: 'center',
             gap: 8,
@@ -120,7 +123,9 @@ function Feature({ title, description }: FeatureItem) {
           </span>
           {title}
         </h3>
-        <p style={{ color: gray.gray8 }}>{description}</p>
+        <p style={{ color: isDarkTheme ? gray.gray8 : gray.gray11 }}>
+          {description}
+        </p>
       </div>
     </div>
   )

diff --git a/site/src/css/custom.css b/site/src/css/custom.css
@@ -8,21 +8,17 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-background-color: var(--gray12) !important;
   --ifm-color-primary: var(--sky9);
   --ifm-color-primary-dark: var(--sky10);
   --ifm-color-primary-darker: var(--sky11);
   --ifm-color-primary-darkest: var(--sky12);
-  --ifm-color-primary-light: var(--sky6);
-  --ifm-color-primary-lighter: var(--sky4);
-  --ifm-color-primary-lightest: var(--sky2);
+  --ifm-color-primary-light: var(--sky8);
+  --ifm-color-primary-lighter: var(--sky7);
+  --ifm-color-primary-lightest: var(--sky6);
+  --ifm-footer-background-color: var(--sky12);
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-  --ifm-footer-background-color: var(--sky12);
   --ifm-button-font-weight: 500;
-}
-
-:root {
   --shadow-color: 0deg 0% 0%;
   --shadow-elevation-low: -0.1px 0.5px 0.6px hsl(var(--shadow-color) / 0.1),
     -0.2px 0.8px 0.9px -1.2px hsl(var(--shadow-color) / 0.1),
@@ -41,7 +37,36 @@
     -14.8px 50.6px 59.3px -2.5px hsl(var(--shadow-color) / 0.1);
 }
 
-.footer--dark {
+[data-theme='dark'] {
+  --ifm-color-primary: var(--sky9);
+  --ifm-color-primary-dark: var(--sky10);
+  --ifm-color-primary-darker: var(--sky11);
+  --ifm-color-primary-darkest: var(--sky12);
+  --ifm-color-primary-light: var(--sky6);
+  --ifm-color-primary-lighter: var(--sky4);
+  --ifm-color-primary-lightest: var(--sky2);
+  --ifm-footer-background-color: var(--sky12);
+}
+
+[data-theme='light'] .footer {
+  background-image: linear-gradient(
+    180deg,
+    hsl(0deg 0% 100%) 0%,
+    hsl(227deg 10% 98%) 40%,
+    hsl(226deg 19% 97%) 58%,
+    hsl(224deg 28% 96%) 69%,
+    hsl(222deg 36% 95%) 77%,
+    hsl(220deg 45% 94%) 83%,
+    hsl(219deg 54% 93%) 89%,
+    hsl(216deg 65% 93%) 93%,
+    hsl(214deg 80% 93%) 97%,
+    hsl(211deg 100% 93%) 100%
+  );
+  --ifm-footer-title-color: var(--ifm-color-black);
+  --ifm-footer-link-color: var(--gray12);
+}
+
+[data-theme='dark'] .footer {
   background-image: linear-gradient(
     180deg,
     hsl(0deg 0% 9%) 0%,
@@ -57,10 +82,6 @@
   );
 }
 
-.navbar--dark {
-  --ifm-navbar-background-color: var(--gray12);
-}
-
 .navbar__title {
   text-transform: uppercase;
   font-weight: 300;

diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react'
 import clsx from 'clsx'
+import { useColorMode } from '@docusaurus/theme-common'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import Layout from '@theme/Layout'
 import { SectionFeatures } from '@site/src/components/SectionFeatures'
@@ -77,6 +78,7 @@ function HomepageHeader() {
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext()
+
   return (
     <Layout title={siteConfig.title}>
       <div className={styles.siteWrapper}>
@@ -89,40 +91,7 @@ export default function Home(): JSX.Element {
 
         <SectionPlayground />
 
-        <section
-          style={{
-            display: 'grid',
-            placeItems: 'center',
-            minHeight: '100vh',
-            background: `radial-gradient(circle, var(--blue12) 0%, #171717 40%)`,
-          }}
-        >
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              padding: '128px 0',
-              maxWidth: 460,
-              textAlign: 'center',
-            }}
-          >
-            <h1>Looking for code examples?</h1>
-            <p>
-              From finding a single record to complex joins, our docs have
-              examples to get you started quickly.
-            </p>
-            <span style={{ display: 'flex', gap: 8 }}>
-              <a
-                href="/docs/category/examples"
-                style={{ width: '220px' }}
-                className="button button--primary button--lg"
-              >
-                Jump right in
-              </a>
-            </span>
-          </div>
-        </section>
+        <SectionExamplesCTA />
       </main>
     </Layout>
   )
@@ -192,13 +161,15 @@ function Quote({
 }
 
 function SectionQuotes() {
+  const { isDarkTheme } = useColorMode()
+
   return (
     <section
       style={{
         display: 'grid',
         placeItems: 'center',
         minHeight: '100vh',
-        background: `radial-gradient(circle, var(--sky12) 0%, #171717 40%)`,
+        background: `radial-gradient(circle, var(--${isDarkTheme ? 'blue12' : 'sky4'}) 0%, ${isDarkTheme ? '#171717' : 'white'} 40%)`,
       }}
     >
       <div className="container" style={{ textAlign: 'center' }}>
@@ -488,6 +459,8 @@ function GithubIcon() {
 }
 
 function SectionPlayground() {
+  const { isDarkTheme } = useColorMode()
+
   return (
     <section className="container">
       <div
@@ -508,7 +481,7 @@ function SectionPlayground() {
           Modify the query on the left and view the generated SQL on the right.
         </p>
         <iframe
-          src="https://stackblitz.com/edit/react-ts-pppzf5?embed=1&file=playground.ts&hideExplorer=1&hideNavigation=1&theme=dark"
+          src={`https://stackblitz.com/edit/react-ts-pppzf5?embed=1&file=playground.ts&hideExplorer=1&hideNavigation=1&theme=${isDarkTheme ? 'dark' : 'light'}`}
           style={{
             width: '100%',
             height: '100%',
@@ -526,3 +499,44 @@ function SectionPlayground() {
     </section>
   )
 }
+
+function SectionExamplesCTA() {
+  const { isDarkTheme } = useColorMode()
+
+  return (
+    <section
+      style={{
+        display: 'grid',
+        placeItems: 'center',
+        minHeight: '100vh',
+        background: `radial-gradient(circle, var(--${isDarkTheme ? 'blue12' : 'sky4'}) 0%, ${isDarkTheme ? '#171717' : 'white'} 40%)`,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '128px 0',
+          maxWidth: 460,
+          textAlign: 'center',
+        }}
+      >
+        <h1>Looking for code examples?</h1>
+        <p>
+          From finding a single record to complex joins, our docs have examples
+          to get you started quickly.
+        </p>
+        <span style={{ display: 'flex', gap: 8 }}>
+          <a
+            href="/docs/category/examples"
+            style={{ width: '220px' }}
+            className="button button--primary button--lg"
+          >
+            Jump right in
+          </a>
+        </span>
+      </div>
+    </section>
+  )
+}