fix light mode

echo8 · Dec 8, 2024 · 19f0ede · 19f0ede
1 parent 3b5d1a1
commit 19f0ede
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 13 deletions.
diff --git a/src/client/src/components/LoginForm.tsx b/src/client/src/components/LoginForm.tsx
@@ -44,7 +44,7 @@ export function LoginForm() {
               borderBottomColor="teal.600"
               borderBottomWidth="5px"
             >
-              <Box width="100%" background="gray.900" marginBottom="0.3rem">
+              <Box width="100%" background={{ base: "gray.200", _dark: "gray.900"}} marginBottom="0.3rem">
                 <Heading textAlign="center">Login to get started!</Heading>
               </Box>
             </Box>

diff --git a/src/client/src/components/MainLayout.tsx b/src/client/src/components/MainLayout.tsx
@@ -13,8 +13,14 @@ export function MainLayout() {
     <Box>
       <Box background="gray.800" padding="0.5rem">
         <Link to="/">
-          <Heading size="3xl" letterSpacing="tight">
-            <Highlight query="paste" styles={{ color: "teal.600" }}>
+          <Heading size="3xl" letterSpacing="tight" color="white">
+            <Highlight
+              query="paste"
+              styles={{
+                base: { color: "teal.400" },
+                _dark: { color: "teal.600" },
+              }}
+            >
               pastesphere
             </Highlight>
           </Heading>

diff --git a/src/client/src/components/SnippetForm.tsx b/src/client/src/components/SnippetForm.tsx
@@ -119,7 +119,7 @@ export function SnippetForm({ user }: SnippetFormProps) {
           borderWidth="3px"
           borderRadius="md"
           padding="0.2rem"
-          borderColor="gray.800"
+          borderColor={{ base: "gray.300", _dark: "gray.800" }}
         >
           <VStack>
             <HStack
@@ -129,17 +129,17 @@ export function SnippetForm({ user }: SnippetFormProps) {
               borderBottomWidth="5px"
             >
               <Input
-                background="gray.800"
+                background={{ base: "gray.200", _dark: "gray.800" }}
                 placeholder="Title"
                 {...register("title")}
               />
               <Input
-                background="gray.800"
+                background={{ base: "gray.200", _dark: "gray.800" }}
                 placeholder="Description"
                 {...register("description")}
               />
               <SelectRoot
-                background="gray.800"
+                background={{ base: "gray.200", _dark: "gray.800" }}
                 collection={snippetTypes}
                 {...register("type")}
               >
@@ -156,7 +156,7 @@ export function SnippetForm({ user }: SnippetFormProps) {
               </SelectRoot>
             </HStack>
             <Textarea
-              background="gray.800"
+              background={{ base: "gray.200", _dark: "gray.800" }}
               placeholder="Your snippet"
               rows={10}
               fontFamily="monospace"
@@ -166,7 +166,7 @@ export function SnippetForm({ user }: SnippetFormProps) {
         </Box>
         <Center margin="1.0rem">
           <Button
-            background="gray.800"
+            background={{ base: "gray.500", _dark: "gray.800" }}
             color="whiteAlpha.800"
             loading={isCreatePending}
             type="submit"

diff --git a/src/client/src/components/SnippetView.tsx b/src/client/src/components/SnippetView.tsx
@@ -9,6 +9,7 @@ import {
   Code,
   IconButton,
 } from "@chakra-ui/react";
+import { useColorMode } from "./ui/color-mode";
 import { HiOutlineDocumentText, HiLink } from "react-icons/hi2";
 import { Link } from "react-router";
 import { Highlight, themes, Prism } from "prism-react-renderer";
@@ -167,18 +168,23 @@ interface SnippetViewProps {
 }
 
 export function SnippetView({ snippet }: SnippetViewProps) {
+  const { colorMode } = useColorMode();
   return (
     <Container maxW="4xl" marginBottom="3.0rem">
       <Box
         borderWidth="3px"
         borderRadius="md"
         padding="0.2rem"
-        borderColor="gray.800"
+        borderColor={{ base: "gray.200", _dark: "gray.800" }}
         width="100%"
       >
         <Box width="100%">
           <VStack width="100%">
-            <HStack width="100%" background="gray.800" padding="0.5rem">
+            <HStack
+              width="100%"
+              background={{ base: "gray.200", _dark: "gray.800" }}
+              padding="0.5rem"
+            >
               <HStack width="90%">
                 <Icon
                   fontSize="2xl"
@@ -188,7 +194,7 @@ export function SnippetView({ snippet }: SnippetViewProps) {
                 >
                   <HiOutlineDocumentText />
                 </Icon>
-                <ChakraLink colorPalette="teal" asChild>
+                <ChakraLink colorPalette="teal" fontWeight="bold" asChild>
                   <Link to={`/user/${snippet.authorHandle}`}>
                     {snippet.authorHandle}
                   </Link>
@@ -241,7 +247,9 @@ export function SnippetView({ snippet }: SnippetViewProps) {
                   <Highlight
                     language={prismLangMap.get(snippet.type) ?? ""}
                     code={snippet.body}
-                    theme={themes.vsDark}
+                    theme={
+                      colorMode === "dark" ? themes.vsDark : themes.vsLight
+                    }
                   >
                     {({ style, tokens, getLineProps, getTokenProps }) => (
                       <Code