feat: update darkmode

premieroctet · Mar 6, 2024 · 3cd7214 · 3cd7214
1 parent 14ddc00
commit 3cd7214
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/apps/docs/components/Hero.tsx b/apps/docs/components/Hero.tsx
@@ -13,7 +13,7 @@ export const GitHubIcon = () => (
 
 export function Hero() {
   return (
-    <div className="h-[35rem] w-full rounded-md flex md:items-center md:justify-center bg-transparent antialiased relative overflow-hidden border-b border-dashed">
+    <div className="h-[35rem] w-full flex md:items-center md:justify-center bg-transparent antialiased relative overflow-hidden border-b border-dashed dark:border-b-stone-500">
       <Spotlight
         className="-top-40 left-0 md:left-60 md:-top-20"
         fill="#82e9a6"
@@ -29,7 +29,7 @@ export function Hero() {
         <div className="mt-10 max-w-xl text-center mx-auto flex flex-raw gap-4 justify-center">
           <Link
             href="/docs"
-            className="bg-black dark:bg-gray-800 dark:hover:bg-gray-700 rounded-lg px-6 py-3 text-white text-md font-semibold hover:bg-gray-800 transition-colors duration-300 ease-in-out"
+            className="bg-black dark:bg-white dark:hover:bg-gray-700 rounded-lg px-6 py-3 text-white dark:text-black text-md font-semibold hover:bg-gray-800 dark:hover:bg-white/80 transition-colors duration-300 ease-in-out"
           >
             Documentation
           </Link>

diff --git a/apps/docs/components/bento/Skeletons.tsx b/apps/docs/components/bento/Skeletons.tsx
@@ -188,24 +188,24 @@ export const SkeletonFour = () => {
     >
       <motion.div
         variants={variants}
-        className="flex flex-row rounded-full border border-neutral-100 dark:border-white/[0.2] p-2  items-center space-x-2 bg-white dark:bg-black"
+        className="flex flex-row rounded-full border border-neutral-100 dark:border-white/[0.4] p-2  items-center space-x-2 bg-white dark:bg-black"
       >
         <MagnifyingGlassIcon className="h-6 w-6" />
-        <div className="w-full bg-gray-100 h-4 rounded-full dark:bg-neutral-900" />
+        <div className="w-full bg-gray-100 h-4 rounded-full dark:bg-neutral-700" />
       </motion.div>
       <motion.div
         variants={variantsSecond}
-        className="flex flex-row rounded-full border border-neutral-100 dark:border-white/[0.2] p-2 items-center space-x-2 w-3/4 ml-auto bg-white dark:bg-black"
+        className="flex flex-row rounded-full border border-neutral-100 dark:border-white/[0.4] p-2 items-center space-x-2 w-3/4 ml-auto bg-white dark:bg-black"
       >
-        <div className="w-full bg-gray-100 h-4 rounded-full dark:bg-neutral-900" />
+        <div className="w-full bg-gray-100 h-4 rounded-full dark:bg-neutral-700" />
         <FunnelIcon className="h-6 w-6" />
       </motion.div>
       <motion.div
         variants={variants}
-        className="flex flex-row rounded-full border border-neutral-100 dark:border-white/[0.2] p-2 items-center space-x-2 bg-white dark:bg-black"
+        className="flex flex-row rounded-full border border-neutral-100 dark:border-white/[0.4] p-2 items-center space-x-2 bg-white dark:bg-black"
       >
         <AdjustmentsVerticalIcon className="h-6 w-6" />
-        <div className="w-full bg-gray-100 h-4 rounded-full dark:bg-neutral-900" />
+        <div className="w-full bg-gray-100 h-4 rounded-full dark:bg-neutral-700" />
       </motion.div>
     </motion.div>
   );

diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
@@ -14,7 +14,7 @@ import { FeaturesBento } from "@/components/bento/FeaturesBento";
   <div className="w-full bg-grid-small-black/20 dark:bg-grid-small-white/20">
     <div className="max-w-4xl mx-auto flex flex-col gap-10">
       <Subtitle>Getting Started</Subtitle>
-      <div className="bg-black text-white font-mono px-5 py-3 rounded-md mx-auto inline-block shadow-[0_10px_20px_rgba(230,253,238,1)]">
+      <div className="bg-black text-white font-mono px-5 py-3 rounded-md mx-auto inline-block shadow-[0_10px_20px_rgba(230,253,238,1)] dark:shadow-[0_10px_20px_rgba(255,255,255,0.4)]">
         yarn add @premieroctet/next-admin prisma-json-schema-generator
       </div>
     </div>