fix: shadow dom font and colors variants

Signed-off-by: Innei <i@innei.in>
2024-09-03 22:30:57 +08:00 · 2024-09-03 22:30:57 +08:00 · 0355d4fb6b
parent 85785f6ea7
commit 0355d4fb6b
9 changed files with 120 additions and 65 deletions
--- a/src/renderer/__debug_proxy.html
+++ b/src/renderer/__debug_proxy.html
@ -43,7 +43,37 @@
    <!-- favicon -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <title>Follow</title>
-
+    <script>
+      function setTheme() {
+        let e = "follow:color-mode",
+          t = document.documentElement,
+          a = localStorage.getItem(e);
+        function h() {
+          return window.matchMedia
+            ? window.matchMedia("(prefers-color-scheme: dark)").matches
+              ? "dark"
+              : window.matchMedia("(prefers-color-scheme: light)").matches
+              ? "light"
+              : void 0
+            : void 0;
+        }
+        if (!a) {
+          t.dataset.theme = h() || "light";
+          return;
+        }
+        switch ((a = JSON.parse(a))) {
+          case "dark":
+            t.dataset.theme = "dark";
+            break;
+          case "light":
+            t.dataset.theme = "light";
+            break;
+          case "system":
+            t.dataset.theme = h() || "light";
+        }
+      }
+      setTheme();
+    </script>
    <script>
      (function () {
        var e =
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@ -29,6 +29,10 @@
      name="twitter:image"
      content="https://app.follow.is/opengraph-image.png"
    />
+
+    <script>
+    function setTheme(){let e="follow:color-mode",t=document.documentElement,a=localStorage.getItem(e);function h(){return window.matchMedia?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":window.matchMedia("(prefers-color-scheme: light)").matches?"light":void 0:void 0}if(!a){t.dataset.theme=h()||"light";return}switch(a=JSON.parse(a)){case"dark":t.dataset.theme="dark";break;case"light":t.dataset.theme="light";break;case"system":t.dataset.theme=h()||"light"}}setTheme();
+    </script>
  </head>
  <body>
    <div id="root">
--- a/src/renderer/src/components/common/ShadowDOM.tsx
+++ b/src/renderer/src/components/common/ShadowDOM.tsx
@ -103,8 +103,12 @@ export const ShadowDOM: FC<PropsWithChildren<React.HTMLProps<HTMLElement>>> & {
  return (
    <root.div {...rest}>
      <ShadowDOMContext.Provider value={true}>
-        <div data-theme={dark ? "dark" : "light"}>
-          <head>{stylesElements}</head>
+        <div
+          id="shadow-html"
+          data-theme={dark ? "dark" : "light"}
+          className="font-theme"
+        >
+          {stylesElements}
          {props.children}
        </div>
      </ShadowDOMContext.Provider>
--- a/src/renderer/src/components/ui/markdown/components/Toc.tsx
+++ b/src/renderer/src/components/ui/markdown/components/Toc.tsx
@ -230,52 +230,54 @@ export const Toc: Component = ({ className }) => {
          </ul>
        </HoverCard.Trigger>
        <HoverCard.Portal forceMount>
-          <AnimatePresence>
-            {hoverShow && (
-              <HoverCard.Content side="left" align="start" asChild>
-                <m.ul
-                  initial={{ opacity: 0, x: 110 }}
-                  animate={{ opacity: 1, x: 100 }}
-                  exit={{ opacity: 0, x: 110, transition: { duration: 0.1 } }}
-                  transition={{ duration: 0.5, type: "spring" }}
-                  className={cn(
-                    "relative z-10 -mt-1 rounded-xl border bg-white px-3 py-1 text-xs drop-shadow-xl dark:bg-neutral-950",
-                    "max-h-[calc(100svh-4rem)] overflow-auto scrollbar-none",
-                  )}
-                >
-                  {toc.map((heading, index) => (
-                    <li
-                      key={heading.title}
-                      className="flex h-[24px] w-full items-center"
-                    >
-                      <button
-                        className={cn(
-                          "group flex w-full cursor-pointer justify-between",
-                          index === currentScrollRange[0] ? "text-accent" : "",
-                        )}
-                        type="button"
-                        onClick={() => {
-                          handleScrollTo(
-                            index,
-                            heading.$heading,
-                            heading.anchorId,
-                          )
-                        }}
+          <div>
+            <AnimatePresence>
+              {hoverShow && (
+                <HoverCard.Content side="left" align="start" asChild>
+                  <m.ul
+                    initial={{ opacity: 0, x: 110 }}
+                    animate={{ opacity: 1, x: 100 }}
+                    exit={{ opacity: 0, x: 110, transition: { duration: 0.1 } }}
+                    transition={{ duration: 0.5, type: "spring" }}
+                    className={cn(
+                      "relative z-10 -mt-1 rounded-xl border bg-white px-3 py-1 text-xs drop-shadow-xl dark:bg-neutral-950",
+                      "max-h-[calc(100svh-4rem)] overflow-auto scrollbar-none",
+                    )}
+                  >
+                    {toc.map((heading, index) => (
+                      <li
+                        key={heading.title}
+                        className="flex h-[24px] w-full items-center"
                      >
-                        <span className="duration-200 group-hover:text-accent/80">
-                          {heading.title}
-                        </span>
+                        <button
+                          className={cn(
+                            "group flex w-full cursor-pointer justify-between",
+                            index === currentScrollRange[0] ? "text-accent" : "",
+                          )}
+                          type="button"
+                          onClick={() => {
+                            handleScrollTo(
+                              index,
+                              heading.$heading,
+                              heading.anchorId,
+                            )
+                          }}
+                        >
+                          <span className="duration-200 group-hover:text-accent/80">
+                            {heading.title}
+                          </span>

-                        <span className="ml-4 text-[8px] opacity-50">
-                          H{heading.depth}
-                        </span>
-                      </button>
-                    </li>
-                  ))}
-                </m.ul>
-              </HoverCard.Content>
-            )}
-          </AnimatePresence>
+                          <span className="ml-4 text-[8px] opacity-50">
+                            H{heading.depth}
+                          </span>
+                        </button>
+                      </li>
+                    ))}
+                  </m.ul>
+                </HoverCard.Content>
+              )}
+            </AnimatePresence>
+          </div>
        </HoverCard.Portal>
      </HoverCard.Root>
    </div>
--- a/src/renderer/src/components/user-button.tsx
+++ b/src/renderer/src/components/user-button.tsx
@ -76,7 +76,7 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {

  return (
    <DropdownMenu>
-      <DropdownMenuTrigger className="!outline-none focus-visible:bg-theme-item-hover">
+      <DropdownMenuTrigger asChild className="!outline-none focus-visible:bg-theme-item-hover">
        <ActionButton tooltip="Profile">
          <UserAvatar className="h-5 p-0 [&_*]:border-0" hideName />
        </ActionButton>
--- a/src/renderer/src/modules/entry-content/index.tsx
+++ b/src/renderer/src/modules/entry-content/index.tsx
@ -236,9 +236,20 @@ export const EntryContentRender: Component<{ entryId: string }> = ({
                  {!isInReadabilityMode ? (
                    <ShadowDOM>
                      <HTML
-                        accessory={isPeekModal ? undefined : <ContainerToc key={entryId} />}
+                        accessory={
+                          isPeekModal ? undefined : (
+                            <ContainerToc key={entryId} />
+                          )
+                        }
                        as="article"
                        className="prose dark:prose-invert prose-h1:text-[1.6em]"
+                        style={
+                          readerFontFamily ?
+                              {
+                                fontFamily: readerFontFamily,
+                              } :
+                            undefined
+                        }
                        renderInlineStyle={readerRenderInlineStyle}
                      >
                        {content}
--- a/src/renderer/src/styles/base.css
+++ b/src/renderer/src/styles/base.css
@ -1,4 +1,5 @@
-html {
+html,
+#shadow-html {
  --fo-font-family: "SN Pro", system-ui, sans-serif;
 }

--- a/src/renderer/src/styles/colors.css
+++ b/src/renderer/src/styles/colors.css
@ -1,16 +1,16 @@
-:root {
+[data-theme="light"] {
  --fo-vibrancy-background: theme(colors.native.active);
  --fo-vibrancy-foreground: 0, 0%, 45%;
+
  --fo-text-primary: 0, 0%, 10%;

-  /* TODO replace with own color */
-  --fo-background: theme(colors.background);
+  --fo-item-active: theme(colors.zinc.400/0.3);
+  --fo-item-hover: theme(colors.zinc.400/0.2);

  --fo-inactive: 0, 0%, 80%;
  --fo-disabled: 0, 0%, 70%;

-  --fo-item-active: theme(colors.zinc.400/0.3);
-  --fo-item-hover: theme(colors.zinc.400/0.2);
+  --fo-background: theme(colors.background);

  --fo-modal-background: theme(colors.zinc.50/0.8);
  --fo-modal-background-opaque: theme(colors.zinc.50);
@ -22,16 +22,16 @@

 [data-theme="dark"] {
  --fo-vibrancy-foreground: 0, 0%, 83%;
-
  --fo-vibrancy-background: theme(colors.native.active);

+  --fo-text-primary: 0, 0%, 80%;
+
  --fo-item-active: theme(colors.neutral.600/0.4);
  --fo-item-hover: theme(colors.neutral.700/0.3);

  --fo-inactive: 0, 0%, 50%;
  --fo-disabled: 0, 0%, 35%;

-  --fo-text-primary: 0, 0%, 80%;
  --fo-background: theme(colors.background);

  --fo-modal-background: theme(colors.neutral.900/0.8);
@ -42,7 +42,7 @@
  --fo-button-hover: theme(colors.neutral.400/0.15);
 }

-:root {
+[data-theme="light"] {
  --fo-native: 240 1.6% 87.6%;
  --fo-native-active: 240 0.9% 78.2%;
 }
@ -51,12 +51,12 @@
  --fo-native-active: 20 2.1% 28.4%;
 }

-:root[data-build-type="web"] {
+[data-build-type="web"] {
  --fo-native: 240 4.8% 95.9%;
  --fo-native-active: 240 4.9% 83.9%;
 }

-:root[data-build-type="web"][data-theme="dark"] {
+[data-build-type="web"][data-theme="dark"] {
  --fo-native: 240 5.9% 10%;
  --fo-native-active: 240 3.7% 15.9%;
 }
--- a/src/renderer/src/styles/tailwind.css
+++ b/src/renderer/src/styles/tailwind.css
@ -4,7 +4,14 @@

@layer base {
  /* shadcn colors */
-  :root {
+
+  :root,
+  #shadow-html {
+    --radius: 0.5rem;
+    --a: theme("colors.theme.accent.DEFAULT");
+  }
+
+  [data-theme="light"] {
    --background: 0 0% 100%;
    --foreground: 20 14.3% 4.1%;
    --card: 0 0% 100%;
@ -38,10 +45,6 @@
  }
 }

-:root {
-  --a: theme("colors.theme.accent.DEFAULT");
-}
-
@layer base {
  * {
    @apply border-border;