From 7a338c6f1dc48ceefced00631b691da4a094793f Mon Sep 17 00:00:00 2001 From: Igal Klebanov Date: Sat, 12 Oct 2024 02:54:27 +0300 Subject: [PATCH] docs: support light mode. (#1177) --- site/docusaurus.config.ts | 4 +- site/src/components/Playground.tsx | 7 +- site/src/components/SectionFeatures/index.tsx | 11 ++- site/src/css/custom.css | 47 +++++++--- site/src/pages/index.tsx | 86 +++++++++++-------- 5 files changed, 100 insertions(+), 55 deletions(-) diff --git a/site/docusaurus.config.ts b/site/docusaurus.config.ts index 59d22a948..d145be8d5 100644 --- 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 index 94eca0707..18d0857f2 100644 --- a/site/src/components/Playground.tsx +++ b/site/src/components/Playground.tsx @@ -1,3 +1,5 @@ +import { useColorMode } from '@docusaurus/theme-common' + export function Playground({ code, setupCode = exampleSetup, @@ -5,6 +7,8 @@ export function Playground({ 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 index 0df452c05..7ed2d3df5 100644 --- 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) { } function Feature({ title, description }: FeatureItem) { + const { isDarkTheme } = useColorMode() + return (

{title}

-

{description}

+

+ {description} +

) diff --git a/site/src/css/custom.css b/site/src/css/custom.css index 968496b8f..45b341e82 100644 --- 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 index 0651a048e..092642934 100644 --- 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 (
@@ -89,40 +91,7 @@ export default function Home(): JSX.Element { -
-
-

Looking for code examples?

-

- From finding a single record to complex joins, our docs have - examples to get you started quickly. -

- - - Jump right in - - -
-
+ ) @@ -192,13 +161,15 @@ function Quote({ } function SectionQuotes() { + const { isDarkTheme } = useColorMode() + return (
@@ -488,6 +459,8 @@ function GithubIcon() { } function SectionPlayground() { + const { isDarkTheme } = useColorMode() + return (