From 77893ff1e7a91a69182c8c0d94a21133b9f38bfd Mon Sep 17 00:00:00 2001 From: Dan Lebowitz Date: Thu, 28 Oct 2021 22:41:30 +0100 Subject: [PATCH 1/6] Dark more tweaks --- beta/colors.js | 1 + beta/src/components/Layout/Nav/Nav.tsx | 10 +--- .../components/MDX/CodeBlock/CodeBlock.tsx | 12 +++-- .../components/MDX/Sandpack/CustomPreset.tsx | 6 ++- beta/src/components/MDX/Sandpack/Themes.tsx | 48 ++++++++++++++++--- beta/src/components/useMenu.tsx | 5 ++ beta/src/styles/sandpack.css | 37 +++++++------- 7 files changed, 78 insertions(+), 41 deletions(-) diff --git a/beta/colors.js b/beta/colors.js index 1c3e26f11ba..bac74d41e9d 100644 --- a/beta/colors.js +++ b/beta/colors.js @@ -23,6 +23,7 @@ module.exports = { 'secondary-button-dark': '#404756', // gray-70 // Gray + 'gray-95': '#16181D', 'gray-90': '#23272F', 'gray-80': '#343A46', 'gray-70': '#404756', diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx index af8f2066ba7..cb7a2a97bb8 100644 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ b/beta/src/components/Layout/Nav/Nav.tsx @@ -91,15 +91,7 @@ function inferSection(pathname: string): 'learn' | 'reference' | 'home' { export default function Nav() { const {pathname} = useRouter(); - const {isOpen, toggleOpen} = React.useContext(MenuContext); - // TODO: persist - // TODO: respect system pref - const [isDark, setIsDark] = React.useState(() => { - if (typeof document === 'undefined') { - return false; - } - return document.documentElement.classList.contains('dark'); - }); + const {isOpen, toggleOpen, isDark, setIsDark} = React.useContext(MenuContext); const section = inferSection(pathname); function handleFeedback() { diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx index 55d5e069901..61ddf923a8d 100644 --- a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx +++ b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx @@ -11,8 +11,10 @@ import { SandpackThemeProvider, } from '@codesandbox/sandpack-react'; import rangeParser from 'parse-numeric-range'; +import {MenuContext} from 'components/useMenu'; -import {CodeBlockLightTheme} from '../Sandpack/Themes'; +import {GithubLightTheme} from '../Sandpack/Themes'; +import {NightOwlTheme} from '../Sandpack/Themes'; import styles from './CodeBlock.module.css'; interface InlineHiglight { @@ -47,7 +49,7 @@ const CodeBlock = React.forwardRef( const linesToHighlight = getHighlightLines(metastring); const highlightedLineConfig = linesToHighlight.map((line) => { return { - className: 'bg-github-highlight', + className: 'bg-github-highlight dark:bg-opacity-10', line, }; }); @@ -77,11 +79,12 @@ const CodeBlock = React.forwardRef( const language = className.substring(9); const filename = '/index.' + language; const decorators = getDecoratedLineInfo(); + const {isDark} = React.useContext(MenuContext); return (
- +
- +
{ const [isOpen, setIsOpen] = React.useState(false); + // TODO: persist + // TODO: respect system pref + const [isDark, setIsDark] = React.useState(false); const menuRef = React.useRef(null); const router = useRouter(); @@ -57,6 +60,8 @@ export const useMenu = () => { toggleOpen, menuRef, isOpen, + isDark, + setIsDark, }; }; diff --git a/beta/src/styles/sandpack.css b/beta/src/styles/sandpack.css index 589d79f02e2..b7125742377 100644 --- a/beta/src/styles/sandpack.css +++ b/beta/src/styles/sandpack.css @@ -3,30 +3,30 @@ */ .sp-tabs .sp-tab-button { - color: #087EA4; + color: #087ea4; padding: 0 4px; } html.dark .sp-tabs .sp-tab-button { - color: #149ECA; + color: #149eca; } .sp-tabs .sp-tab-button:hover { - color: #087EA4; + color: #087ea4; } html.dark .sp-tabs .sp-tab-button:hover { - color: #149ECA; + color: #149eca; } .sp-tabs .sp-tab-button[data-active='true'] { - color: #087EA4; - border-bottom: 2px solid #087EA4; + color: #087ea4; + border-bottom: 2px solid #087ea4; } html.dark .sp-tabs .sp-tab-button[data-active='true'] { - color: #149ECA; - border-bottom: 2px solid #149ECA; + color: #149eca; + border-bottom: 2px solid #149eca; } .sp-stack .sp-code-editor, @@ -60,23 +60,17 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] { * * If you know a better way to keep them from diverging, send a PR. */ - .sp-layout { +.sp-layout { border-bottom-left-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; } - -.cm-activeLine { - background: rgba(245, 247, 250, var(--tw-bg-opacity)) !important; -} -.sp-code-editor { - background: white !important; -} .sp-stack { height: initial !important; width: fit-content !important; } .sp-cm { -webkit-text-size-adjust: none !important; + padding: 0 !important; } .cm-wrap, .cm-wrap .cm-gutters { @@ -96,21 +90,22 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] { } .sp-cm.sp-pristine .cm-scroller { overflow: auto !important; + padding: 18px 0 !important; } .sp-layout { overflow: initial !important; - border:0px solid transparent !important; + border: 0px solid transparent !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; } -html.dark .sp-layout>:not(:first-child) { - border-color: #343A46; +html.dark .sp-layout > :not(:first-child) { + border-color: #343a46; } html.dark .sp-layout { - background-color: #343A46; + background-color: #343a46; } html.dark .sp-loading { - background-color: #23272F; + background-color: #23272f; } @media (min-width: 768px) { From 89c930cd094ecdcc69e15c362a7f3ab1dea21bbe Mon Sep 17 00:00:00 2001 From: Amitoj Singh Date: Fri, 29 Oct 2021 14:14:04 +0300 Subject: [PATCH 2/6] create ThemeProvider.tsx --- beta/src/modules/ThemeProvider.tsx | 54 ++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 beta/src/modules/ThemeProvider.tsx diff --git a/beta/src/modules/ThemeProvider.tsx b/beta/src/modules/ThemeProvider.tsx new file mode 100644 index 00000000000..9ef785644e6 --- /dev/null +++ b/beta/src/modules/ThemeProvider.tsx @@ -0,0 +1,54 @@ +import { createContext, Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from "react"; + +export enum ColorMode { + light = 'light', + dark = 'dark' +} + + +export const ThemeContext = createContext<{ + colorMode: ColorMode, + setColorMode: Dispatch> +}>({ + colorMode: ColorMode.light, + setColorMode: () => { } +}); + +export const ThemeProvider: FC = ({ children }) => { + const [colorMode, setColorMode] = useState(ColorMode.light); + const colorModeKey = "@app/colorMode"; + + useEffect(() => { + const savedColorMode = localStorage.getItem(colorModeKey); + if (savedColorMode) { + setColorMode(savedColorMode as ColorMode); + } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + setColorMode(ColorMode.dark); + } else { + setColorMode(ColorMode.light) + } + }, []) + + + useEffect(() => { + localStorage.setItem(colorModeKey, colorMode); + if (!document) return; + colorMode === ColorMode.dark ? + document.documentElement.classList.add(ColorMode.dark) : + document.documentElement.classList.remove(ColorMode.dark) + }, [colorMode]) + + + return ( + ({ + colorMode, + setColorMode + }), + [colorMode] + )}> + {children} + + ) +} \ No newline at end of file From dc4ef311d6aa677e74fe20b0638ec7ec6986dde8 Mon Sep 17 00:00:00 2001 From: Amitoj Singh Date: Fri, 29 Oct 2021 14:24:58 +0300 Subject: [PATCH 3/6] add colorMode transition and toggle Signed-off-by: Amitoj Singh --- beta/src/components/Layout/Nav/MobileNav.tsx | 10 ++-- beta/src/components/Layout/Nav/Nav.tsx | 54 ++++++++----------- .../src/components/Layout/Sidebar/Sidebar.tsx | 22 ++++---- beta/src/components/Search.tsx | 22 ++++---- beta/src/components/useMenu.tsx | 9 +--- beta/src/modules/ThemeProvider.tsx | 8 +-- beta/src/pages/_app.tsx | 17 +++--- beta/src/pages/_document.tsx | 4 +- 8 files changed, 64 insertions(+), 82 deletions(-) diff --git a/beta/src/components/Layout/Nav/MobileNav.tsx b/beta/src/components/Layout/Nav/MobileNav.tsx index a6b6cc919b0..90ed70e0d28 100644 --- a/beta/src/components/Layout/Nav/MobileNav.tsx +++ b/beta/src/components/Layout/Nav/MobileNav.tsx @@ -4,9 +4,9 @@ import * as React from 'react'; import cn from 'classnames'; -import {RouteItem} from 'components/Layout/useRouteMeta'; -import {useRouter} from 'next/router'; -import {SidebarRouteTree} from '../Sidebar'; +import { RouteItem } from 'components/Layout/useRouteMeta'; +import { useRouter } from 'next/router'; +import { SidebarRouteTree } from '../Sidebar'; import sidebarHome from '../../../sidebarHome.json'; import sidebarLearn from '../../../sidebarLearn.json'; import sidebarReference from '../../../sidebarReference.json'; @@ -22,7 +22,7 @@ function inferSection(pathname: string): 'learn' | 'reference' | 'home' { } export function MobileNav() { - const {pathname} = useRouter(); + const { pathname } = useRouter(); const [section, setSection] = React.useState(() => inferSection(pathname)); let tree = null; @@ -40,7 +40,7 @@ export function MobileNav() { return ( <> -
+
setSection('home')}> diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx index cb7a2a97bb8..ce827f4b3cf 100644 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ b/beta/src/components/Layout/Nav/Nav.tsx @@ -5,15 +5,16 @@ import * as React from 'react'; import cn from 'classnames'; import NextLink from 'next/link'; -import {useRouter} from 'next/router'; +import { useRouter } from 'next/router'; -import {IconClose} from 'components/Icon/IconClose'; -import {IconHamburger} from 'components/Icon/IconHamburger'; -import {Search} from 'components/Search'; -import {MenuContext} from 'components/useMenu'; +import { IconClose } from 'components/Icon/IconClose'; +import { IconHamburger } from 'components/Icon/IconHamburger'; +import { Search } from 'components/Search'; +import { MenuContext } from 'components/useMenu'; -import {Logo} from '../../Logo'; +import { Logo } from '../../Logo'; import NavLink from './NavLink'; +import { ColorMode, ThemeContext } from 'modules/ThemeProvider'; const feedbackIcon = ( { + setColorMode(colorMode === ColorMode.dark ? ColorMode.light : ColorMode.dark) + }, [colorMode]) + return ( -
@@ -166,18 +164,10 @@ export default function Nav() {
diff --git a/beta/src/components/Layout/Sidebar/Sidebar.tsx b/beta/src/components/Layout/Sidebar/Sidebar.tsx index 5a5b6c5f1f3..24e62548a1a 100644 --- a/beta/src/components/Layout/Sidebar/Sidebar.tsx +++ b/beta/src/components/Layout/Sidebar/Sidebar.tsx @@ -4,18 +4,18 @@ import * as React from 'react'; import cn from 'classnames'; -import {SidebarContext} from 'components/Layout/useRouteMeta'; -import {MenuContext} from 'components/useMenu'; -import {useMediaQuery} from '../useMediaQuery'; -import {SidebarRouteTree} from './SidebarRouteTree'; -import {Search} from 'components/Search'; -import {Button} from 'components/Button'; -import {MobileNav} from '../Nav/MobileNav'; +import { SidebarContext } from 'components/Layout/useRouteMeta'; +import { MenuContext } from 'components/useMenu'; +import { useMediaQuery } from '../useMediaQuery'; +import { SidebarRouteTree } from './SidebarRouteTree'; +import { Search } from 'components/Search'; +import { Button } from 'components/Button'; +import { MobileNav } from '../Nav/MobileNav'; const SIDEBAR_BREAKPOINT = 1023; -export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) { - const {menuRef, isOpen} = React.useContext(MenuContext); +export function Sidebar({ isMobileOnly }: { isMobileOnly?: boolean }) { + const { menuRef, isOpen } = React.useContext(MenuContext); const isMobileSidebar = useMediaQuery(SIDEBAR_BREAKPOINT); let routeTree = React.useContext(SidebarContext); const isHidden = isMobileOnly && !isMobileSidebar; @@ -62,7 +62,7 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) { return (