dark mode fix

webdoky · Feb 2, 2024 · bbce0bd · bbce0bd
1 parent 9cc5cae
commit bbce0bd
Show file tree

Hide file tree

Showing 9 changed files with 661 additions and 25 deletions.
diff --git a/assets/icon-external.svg b/assets/icon-external.svg
diff --git a/external/original-content b/external/original-content
diff --git a/src/layouts/Layout/Layout.astro b/src/layouts/Layout/Layout.astro
@@ -18,12 +18,12 @@ const { title } = Astro.props;
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{title}</title>
     <RollbarScript />
+    <DarkModeScript />
     <slot name="head" />
     <link rel="stylesheet" href="/prism-base16-ateliersulphurpool.light.css" />
   </head>
-  <body>
-    <DarkModeScript /><div
-      class="font-sans antialiased text-ui-typo bg-ui-background">
+  <body
+    ><div class="font-sans antialiased text-ui-typo bg-ui-background">
       <div class="flex flex-col justify-start min-h-screen">
         <header
           class="sticky top-0 z-10 w-full border-b bg-ui-background border-ui-border">

diff --git a/src/layouts/Layout/components/DarkModeScript.astro b/src/layouts/Layout/components/DarkModeScript.astro
@@ -3,9 +3,9 @@
 <script is:inline>
   function setDarkMode(value) {
     if (value) {
-      document.body.classList.add(LIGHTS_OUT);
+      document.documentElement.classList.add(LIGHTS_OUT);
     } else {
-      document.body.classList.remove(LIGHTS_OUT);
+      document.documentElement.classList.remove(LIGHTS_OUT);
     }
   }
   const LIGHTS_OUT = 'lights-out';

diff --git a/src/layouts/Layout/components/Header.astro b/src/layouts/Layout/components/Header.astro
@@ -66,7 +66,7 @@ const GITHUB_LINK = 'https://github.com/webdoky';
           </IconWrapper>
         </a>
 
-        <ToggleDarkMode client:only="react" />
+        <ToggleDarkMode client:idle />
       </div>
     </div>
   </div>

diff --git a/src/layouts/Layout/components/ToggleDarkMode.tsx b/src/layouts/Layout/components/ToggleDarkMode.tsx
@@ -9,13 +9,18 @@ const LIGHTS_OUT = 'lights-out';
 
 export default function ToggleDarkMode() {
   const [isDarkMode, setDarkMode] = useState(false);
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      setDarkMode(document.documentElement.classList.contains(LIGHTS_OUT));
+    }
+  }, []);
   const enableDarkMode = useCallback(() => {
     setDarkMode(true);
-    document.body.classList.add(LIGHTS_OUT);
+    document.documentElement.classList.add(LIGHTS_OUT);
   }, []);
   const disableDarkMode = useCallback(() => {
     setDarkMode(false);
-    document.body.classList.remove(LIGHTS_OUT);
+    document.documentElement.classList.remove(LIGHTS_OUT);
   }, []);
   const toggleDarkMode = useCallback(
     (prefersDark: boolean) => {

diff --git a/src/pages/docs/[...slug].astro b/src/pages/docs/[...slug].astro
@@ -79,23 +79,181 @@ const {
   </main>
 </Layout>
 
-<style lang="scss">
+<style is:global lang="scss">
   .wd-doc-page {
-    /* .sidebar {
-    @apply fixed bg-ui-background px-4 inset-x-0 bottom-0 w-full border-r border-ui-border overflow-y-auto transition-all z-40;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      @apply -mt-12 pt-20;
+    }
+
+    h2 + h3,
+    h2 + h2,
+    h3 + h3 {
+      @apply border-none -mt-20;
+    }
+
+    h2,
+    h3 {
+      @apply border-b border-ui-border pb-1 mb-3;
+    }
+
+    ul {
+      @apply list-disc;
+
+      ul {
+        list-style: circle;
+      }
+    }
+
+    ol {
+      @apply list-decimal;
+    }
+
+    ol,
+    ul {
+      @apply pl-5 py-1;
+
+      li {
+        @apply mb-2;
+
+        p {
+          @apply mb-0;
+        }
+
+        &:last-child {
+          @apply mb-0;
+        }
+      }
+    }
+
+    dl dd {
+      margin: 0 1.5em;
+    }
+
+    blockquote {
+      @apply border-l-4 border-ui-border py-2 pl-4;
+
+      p:last-child {
+        @apply mb-0;
+      }
+    }
+
+    h1 {
+      @apply text-4xl;
+
+      // needs for responsive page titles
+      word-break: break-word;
+    }
+
+    h2 {
+      @apply text-2xl;
+    }
+
+    h3 {
+      @apply text-xl;
+    }
+
+    h4 {
+      @apply text-lg;
+    }
+
+    p,
+    ol,
+    ul,
+    pre,
+    strong,
+    blockquote {
+      @apply mb-4 text-base text-ui-typo;
+    }
 
-    transform: translateX(-100%);
+    code {
+      @apply px-1 text-ui-typo bg-ui-sidebar border-b border-r border-ui-border text-sm rounded;
 
-    &.open {
-      transform: translateX(0);
+      padding-top: 0.125em;
+      padding-bottom: 0.125em;
+    }
+
+    a > code {
+      color: inherit;
+    }
+
+    pre {
+      z-index: 0;
+
+      @apply px-5 py-4 max-w-full overflow-x-auto rounded;
+
+      & + p {
+        @apply mt-4;
+      }
+
+      & > code[class*='language-'] {
+        @apply px-0 border-none leading-relaxed;
+      }
+    }
+
+    header {
+      background-color: rgb(255 255 255 / 90%);
+      backdrop-filter: blur(4px);
+    }
+
+    footer {
+      a {
+        @apply text-ui-primary underline;
+      }
+    }
+
+    table {
+      @apply text-left mb-6;
+
+      td,
+      th {
+        @apply py-3 px-4;
+
+        &:first-child {
+          @apply pl-0;
+        }
+
+        &:last-child {
+          @apply pr-0;
+        }
+      }
+
+      tr {
+        @apply border-b border-ui-border;
+
+        &:last-child {
+          @apply border-b-0;
+        }
+      }
+    }
+
+    .badge-inline svg {
+      @apply inline mr-1;
+    }
+
+    .badge-inline.badge-readonly,
+    .badge-inline.badge-optional {
+      @apply px-1 py-1 bg-ui-sidebar border-b border-r border-ui-border text-sm rounded font-bold italic;
+    }
+
+    .sidebar {
+      @apply fixed bg-ui-background px-4 inset-x-0 bottom-0 w-full border-r border-ui-border overflow-y-auto transition-all z-40;
+
+      transform: translateX(-100%);
+
+      &.open {
+        transform: translateX(0);
+      }
 
       @screen lg {
         @apply w-1/4 px-0 bg-transparent top-0 bottom-auto inset-x-auto sticky z-0;
 
         transform: translateX(0);
       }
     }
-  } */
   }
 </style>
-; ; ; ;
+1 −0		files/en-us/learn/forms/how_to_structure_a_web_form/index.md
+1 −1		package.json
+4 −4		yarn.lock
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,7 +66,7 @@ const GITHUB_LINK = 'https://github.com/webdoky'; @@
               </IconWrapper>
             </a>
-            <ToggleDarkMode client:only="react" />
+            <ToggleDarkMode client:idle />
           </div>
         </div>
       </div>
@@ Expand Down @@