From 5f4abb928aa1ba0461e430758839216f52cca95d Mon Sep 17 00:00:00 2001 From: Xennis Date: Wed, 29 May 2024 16:36:13 +0200 Subject: [PATCH] Improve support for dark mode and RTL --- examples/nextjs/src/app/layout.tsx | 14 +++++- .../nextjs/src/components/toggle-button.tsx | 47 +++++++++++++++++++ examples/nextjs/tailwind.config.ts | 1 + packages/render/src/block.tsx | 8 ++-- packages/render/src/components/checkbox.tsx | 2 +- .../src/thirdparty/react-notion-x/styles.css | 2 +- 6 files changed, 66 insertions(+), 8 deletions(-) create mode 100644 examples/nextjs/src/components/toggle-button.tsx diff --git a/examples/nextjs/src/app/layout.tsx b/examples/nextjs/src/app/layout.tsx index 6690c05..90d9db6 100644 --- a/examples/nextjs/src/app/layout.tsx +++ b/examples/nextjs/src/app/layout.tsx @@ -1,5 +1,7 @@ import { Inter } from "next/font/google" import "./globals.css" +import { classNames } from "@react-notion-cms/render/dist/util" +import { ToggleDarkModeButton, ToggleRtlDirectionButton } from "@/components/toggle-button" const inter = Inter({ subsets: ["latin"] }) @@ -10,8 +12,16 @@ export default function RootLayout({ }>) { return ( - - {children} + +
+
+
+ + +
+
+
+
{children}
) diff --git a/examples/nextjs/src/components/toggle-button.tsx b/examples/nextjs/src/components/toggle-button.tsx new file mode 100644 index 0000000..8680e99 --- /dev/null +++ b/examples/nextjs/src/components/toggle-button.tsx @@ -0,0 +1,47 @@ +"use client" + +import { useState } from "react" +import { classNames } from "@react-notion-cms/render/dist/util" + +const Button = ({ className, ...props }: React.ComponentPropsWithoutRef<"button">) => { + return ( + + ) +} + +export const ToggleDarkModeButton = () => { + const [darkMode, setDarkMode] = useState(false) + + const handleClick = () => { + const enabled = !darkMode + setDarkMode(enabled) + if (enabled) { + document.querySelector("html")?.classList.add("dark") + } else { + document.querySelector("html")?.classList.remove("dark") + } + } + + return +} + +export const ToggleRtlDirectionButton = () => { + const [rtlDirection, setRtlDirection] = useState(false) + + const handleClick = () => { + const enabled = !rtlDirection + setRtlDirection(enabled) + if (enabled) { + document.body.style.direction = "rtl" + } else { + document.body.style.direction = "ltr" + } + } + + return +} diff --git a/examples/nextjs/tailwind.config.ts b/examples/nextjs/tailwind.config.ts index ad023de..39e7ac5 100644 --- a/examples/nextjs/tailwind.config.ts +++ b/examples/nextjs/tailwind.config.ts @@ -1,6 +1,7 @@ import type { Config } from "tailwindcss" const config: Config = { + darkMode: "selector", content: [ "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", diff --git a/packages/render/src/block.tsx b/packages/render/src/block.tsx index 395fba1..851843f 100644 --- a/packages/render/src/block.tsx +++ b/packages/render/src/block.tsx @@ -114,7 +114,7 @@ const Block = ({ block, options }: { block: BlockObjectResponseWithChildren; opt style={{ marginTop: "1px", marginBottom: "1px" }} className="box-border flex w-full select-none overflow-hidden rounded-[3px] border border-solid border-[--fg-color-1] no-underline dark:border-[--bg-color-0]" > -
+
{/* ref: .notion-bookmark-title */} {title && (
@@ -186,7 +186,7 @@ const Block = ({ block, options }: { block: BlockObjectResponseWithChildren; opt } return ( // ref: .notion-row -
+
{columnListChildren.map((column, index) => { return ( // ref: .notion-column @@ -285,7 +285,7 @@ const Block = ({ block, options }: { block: BlockObjectResponseWithChildren; opt
{imageHasCaption ? ( // ref: .notion-asset-caption -
+
) : ( @@ -318,7 +318,7 @@ const Block = ({ block, options }: { block: BlockObjectResponseWithChildren; opt
diff --git a/packages/render/src/components/checkbox.tsx b/packages/render/src/components/checkbox.tsx index ec75278..0569e33 100644 --- a/packages/render/src/components/checkbox.tsx +++ b/packages/render/src/components/checkbox.tsx @@ -6,7 +6,7 @@ export const Checkbox = ({ checked }: { checked: boolean }) => { content = ( // ref: .notion-property-checkbox-checked
- +
diff --git a/packages/render/src/thirdparty/react-notion-x/styles.css b/packages/render/src/thirdparty/react-notion-x/styles.css index ed12c3c..5776d56 100644 --- a/packages/render/src/thirdparty/react-notion-x/styles.css +++ b/packages/render/src/thirdparty/react-notion-x/styles.css @@ -50,7 +50,7 @@ --notion-gray_background_co: rgba(235, 236, 237, 0.3); } -.dark-mode { +.dark { --fg-color: rgba(255, 255, 255, 0.9); --fg-color-0: var(--fg-color); --fg-color-1: var(--fg-color);