Merge pull request #313 from ssoda01/feat/add-dark-theme-config

guansss · web-flow · commit 5c8a9b72bf85 · 2024-06-19T23:16:53.000+08:00
feat: add dark theme config #310
diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
@@ -106,9 +106,9 @@ const InlineCondition: FCC<{
   title?: string
 }> = ({ title, children }) => (
   <div className="min-w-[5em] text-lg leading-none">
-    <span className="text-zinc-500 mr-0.5 tabular-nums font-bold">
+    <span className="text-zinc-500 dark:text-slate-100 mr-0.5 tabular-nums font-bold">
       {children}
     </span>
-    <span className="text-zinc-400 text-xs">{title}</span>
+    <span className="text-zinc-400 dark:text-slate-200 text-xs">{title}</span>
   </div>
 )
diff --git a/src/components/FactItem.tsx b/src/components/FactItem.tsx
@@ -19,8 +19,8 @@ export const FactItem: FCC<{
       className,
     )}
   >
-    {icon && <Icon icon={icon} className="mr-2 text-zinc-500" />}
-    <div className="text-sm mr-2 text-zinc-500">{title}</div>
+    {icon && <Icon icon={icon} className="mr-2 text-zinc-500 dark:text-slate-100" />}
+    <div className="text-sm mr-2 text-zinc-500 dark:text-slate-100">{title}</div>
     {children}
   </div>
 )
diff --git a/src/components/HelperText.tsx b/src/components/HelperText.tsx
@@ -22,7 +22,7 @@ export const HelperText: FCC<{
   }
 
   return (
-    <div className={clsx('flex text-gray-600 text-xs items-center', className)}>
+    <div className={clsx('flex text-gray-600 dark:text-zinc-400 text-xs items-center', className)}>
       <Icon icon="info-sign" size={12} className="mr-1.5" />
       <div>{child()}</div>
     </div>
diff --git a/src/components/OperationCard.tsx b/src/components/OperationCard.tsx
@@ -61,7 +61,7 @@ export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
             />
           </div>
           <div>
-            <div className="text-sm text-zinc-600 mb-2 font-bold">
+            <div className="text-sm text-zinc-600 dark:text-slate-100 mb-2 font-bold">
               干员/干员组
             </div>
             <OperatorTags operation={operation} />
@@ -187,7 +187,7 @@ export const OperationCard = ({ operation }: { operation: Operation }) => {
             />
           </div>
           <div className="md:w-1/2">
-            <div className="text-sm text-zinc-600 mb-2 font-bold">
+            <div className="text-sm text-zinc-600 dark:text-slate-100 mb-2 font-bold">
               干员/干员组
             </div>
             <OperatorTags operation={operation} />
diff --git a/src/components/drawer/NavAside.tsx b/src/components/drawer/NavAside.tsx
@@ -23,7 +23,7 @@ export const NavAside = () => {
               <div className="flex-col w-full" key={link.to}>
                 <NavLink
                   to={link.to}
-                  className="text-sm text-zinc-600 !no-underline"
+                  className="text-sm text-zinc-600 dark:text-slate-100 !no-underline"
                   onClick={() => toggleNav()}
                 >
                   {({ isActive }) => (
diff --git a/src/components/entity/EDifficulty.tsx b/src/components/entity/EDifficulty.tsx
@@ -32,7 +32,7 @@ const DifficultyTag: FC<{
           'transition border border-solid !text-xs cursor-help tracking-tight !px-2 !py-1 !mx-1 !my-1 leading-none !min-h-0',
           hardLevel
             ? 'bg-red-400 hover:bg-red-500 border-red-700 text-red-900'
-            : 'bg-slate-200 hover:bg-slate-300 border-slate-300 text-slate-700',
+            : 'bg-slate-200 hover:bg-slate-300 border-slate-300  text-slate-700 dark:bg-slate-900 dark:text-slate-100',
         )}
       >
         {content}
diff --git a/src/components/entity/ELevel.tsx b/src/components/entity/ELevel.tsx
@@ -20,7 +20,7 @@ export const NeoELevel: FC<{
   }
 
   return (
-    <Tag className="transition border border-solid !text-xs tracking-tight !px-2 !py-1 !my-1 leading-none !min-h-0 bg-slate-200 border-slate-300 text-slate-700">
+    <Tag className="transition border border-solid !text-xs tracking-tight !px-2 !py-1 !my-1 leading-none !min-h-0 bg-slate-200 border-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-100">
       <div className="flex items-center">
         <div className="flex whitespace-pre">
           <span className="inline-block font-bold my-auto">{catThree}</span>
@@ -47,7 +47,7 @@ export const ELevel: FC<{
   }
 
   return (
-    <Tag className="transition border border-solid !text-xs tracking-tight !p-1 leading-none !min-h-0 bg-slate-200 border-slate-300 text-slate-700">
+    <Tag className="transition border border-solid !text-xs tracking-tight !p-1 leading-none !min-h-0 dark:bg-slate-900 dark:text-slate-100">
       <div className="flex items-center mx-1">
         <div className="flex flex-col mr-2">
           <H4 className="inline-block font-bold my-auto">{catThree}</H4>
diff --git a/src/components/viewer/OperationRating.tsx b/src/components/viewer/OperationRating.tsx
@@ -80,15 +80,15 @@ export const OperationRating: FC<{
                 layout === 'horizontal' ? IconSize.STANDARD : IconSize.LARGE
               }
               icon="star-empty"
-              className="text-zinc-600"
+              className="text-zinc-600 dark:text-slate-100"
             />
           }
           readonly
         />
       )}
       <div
         className={clsx(
-          'text-sm text-zinc-500',
+          'text-sm text-zinc-500 dark:text-slate-100',
           layout === 'horizontal' && !operation.notEnoughRating && 'mr-1.5',
         )}
       >
diff --git a/src/components/viewer/OperationSetViewer.tsx b/src/components/viewer/OperationSetViewer.tsx
@@ -219,13 +219,13 @@ function OperationSetViewerInner({
 
         <div className="flex flex-col items-start select-none tabular-nums">
           <FactItem title="发布于" icon="time">
-            <span className="text-gray-800 font-bold">
+            <span className="text-gray-800 dark:text-slate-100 font-bold">
               <RelativeTime moment={operationSet.createTime} />
             </span>
           </FactItem>
 
           <FactItem title="作者" icon="user">
-            <span className="text-gray-800 font-bold">
+            <span className="text-gray-800 dark:text-slate-100 font-bold">
               {operationSet.creator}
             </span>
           </FactItem>
diff --git a/src/components/viewer/OperationViewer.tsx b/src/components/viewer/OperationViewer.tsx
@@ -339,17 +339,17 @@ function OperationViewerInner({
 
         <div className="flex flex-col items-start select-none tabular-nums">
           <FactItem title="浏览量" icon="eye-open">
-            <span className="text-gray-800 font-bold">{operation.views}</span>
+            <span className="text-gray-800 dark:text-slate-100 font-bold">{operation.views}</span>
           </FactItem>
 
           <FactItem title="发布于" icon="time">
-            <span className="text-gray-800 font-bold">
+            <span className="text-gray-800 dark:text-slate-100 font-bold">
               <RelativeTime moment={operation.uploadTime} />
             </span>
           </FactItem>
 
           <FactItem title="作者" icon="user">
-            <span className="text-gray-800 font-bold">
+            <span className="text-gray-800 dark:text-slate-100 font-bold">
               {operation.uploader}
             </span>
           </FactItem>
diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx
@@ -53,7 +53,7 @@ export const AppLayout: FCC = ({ children }) => (
           <NavLink
             key={link.to}
             to={link.to}
-            className="text-sm text-zinc-600 !no-underline ml-2"
+            className="text-sm text-zinc-600 dark:text-slate-100 !no-underline ml-2"
           >
             {({ isActive }) => (
               <Button minimal icon={link.icon} active={isActive}>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -78,13 +78,13 @@ export const IndexPage: ComponentType = withGlobalErrorBoundary(() => {
 
         <AnnPanel className="mb-4" />
 
-        <div className="flex flex-wrap leading-relaxed mb-8">
+        <div className="flex flex-wrap leading-relaxed mb-8 section-social-links">
           {SOCIAL_LINKS.map((link) => (
             <a
               href={link.href}
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center text-zinc-600 no-underline"
+              className="flex items-center text-zinc-600 dark:text-slate-100 no-underline"
             >
               {link.icon}
               <span>{link.label}</span>
diff --git a/src/styles/blueprint.less b/src/styles/blueprint.less
@@ -235,22 +235,111 @@ body {
 }
 
 .bp4-dark {
+  @dark-content-bg: #2f343c;
+
+  // background
   .docs-content-wrapper {
     @apply min-h-screen;
-    background-color: #2f343c;
+    background-color: @dark-content-bg;
+  }
+
+  // navbar
+  .bp4-navbar {
+
+    a,
+    .bp4-tag span {
+      @apply text-slate-50;
+    }
+  }
+
+  // 首页右侧友情链接
+  .section-social-links {
+    svg {
+      color: #8abbff;
+    }
+
+    span:hover {
+      @apply text-slate-50;
+    }
   }
+
+
+  // 作业详情页
+  .bp4-card p,
+  .bp4-card div,
+  .markdown-body,
+  .markdown-body blockquote,
+  .markdown-body span {
+    @apply text-slate-100;
+  }
+
+  .markdown-body blockquote {
+    @apply bg-zinc-900;
+  }
+
+  // 通用样式 - 按钮、tag、提示
+  .bp4-button {
+    .bp4-button-text {
+      @apply text-slate-50;
+    }
+
+    &.bp4-minimal.bp4-intent-danger:hover:enabled {
+      @apply bg-red-500;
+    }
+  }
+
   .bp4-tag {
-    background-color: #141c2b;
+    @apply bg-slate-900 text-slate-200;
+
     &.bp4-intent-danger {
-      background-color: #b3303f;
+      @apply bg-red-500;
     }
+
     &.bp4-intent-primary {
-      background-color: #3498db;
+      @apply bg-blue-500;
+    }
+
+  }
+
+  .bp4-callout p {
+    @apply text-slate-50;
+  }
+
+  .bp4-label {
+
+    p,
+    span,
+    div {
+      @apply text-slate-100;
     }
   }
-  div,
-  p,
-  span {
-    color: #fff;
+
+  .bp4-text-muted {
+    @apply text-slate-100;
+  }
+
+  .bp4-menu {
+    .bp4-menu-item.bp4-selected {
+      @apply text-slate-100;
+    }
+  }
+
+  .bp4-form-group {
+    .bp4-form-helper-text {
+      @apply text-slate-100;
+    }
+
+    .bp4-input-group input {
+      @apply text-slate-100;
+    }
+  }
+
+  .bp4-tabs {
+
+    div,
+    span,
+    p {
+      @apply text-slate-100;
+    }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -19,8 +19,8 @@ export const FactItem: FCC<{`
`19`	`19`	`className,`
`20`	`20`	`)}`
`21`	`21`	`>`
`22`		`- {icon && <Icon icon={icon} className="mr-2 text-zinc-500" />}`
`23`		`- <div className="text-sm mr-2 text-zinc-500">{title}</div>`
	`22`	`+ {icon && <Icon icon={icon} className="mr-2 text-zinc-500 dark:text-slate-100" />}`
	`23`	`+ <div className="text-sm mr-2 text-zinc-500 dark:text-slate-100">{title}</div>`
`24`	`24`	`{children}`
`25`	`25`	`</div>`
`26`	`26`	`)`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export const HelperText: FCC<{`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`return (`
`25`		`- <div className={clsx('flex text-gray-600 text-xs items-center', className)}>`
	`25`	`+ <div className={clsx('flex text-gray-600 dark:text-zinc-400 text-xs items-center', className)}>`
`26`	`26`	`<Icon icon="info-sign" size={12} className="mr-1.5" />`
`27`	`27`	`<div>{child()}</div>`
`28`	`28`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export const NavAside = () => {`
`23`	`23`	`<div className="flex-col w-full" key={link.to}>`
`24`	`24`	`<NavLink`
`25`	`25`	`to={link.to}`
`26`		`- className="text-sm text-zinc-600 !no-underline"`
	`26`	`+ className="text-sm text-zinc-600 dark:text-slate-100 !no-underline"`
`27`	`27`	`onClick={() => toggleNav()}`
`28`	`28`	`>`
`29`	`29`	`{({ isActive }) => (`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ const DifficultyTag: FC<{`
`32`	`32`	`'transition border border-solid !text-xs cursor-help tracking-tight !px-2 !py-1 !mx-1 !my-1 leading-none !min-h-0',`
`33`	`33`	`hardLevel`
`34`	`34`	`? 'bg-red-400 hover:bg-red-500 border-red-700 text-red-900'`
`35`		`- : 'bg-slate-200 hover:bg-slate-300 border-slate-300 text-slate-700',`
	`35`	`+ : 'bg-slate-200 hover:bg-slate-300 border-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-100',`
`36`	`36`	`)}`
`37`	`37`	`>`
`38`	`38`	`{content}`
Original file line number	Diff line number	Diff line change
`@@ -80,15 +80,15 @@ export const OperationRating: FC<{`
`80`	`80`	`layout === 'horizontal' ? IconSize.STANDARD : IconSize.LARGE`
`81`	`81`	`}`
`82`	`82`	`icon="star-empty"`
`83`		`- className="text-zinc-600"`
	`83`	`+ className="text-zinc-600 dark:text-slate-100"`
`84`	`84`	`/>`
`85`	`85`	`}`
`86`	`86`	`readonly`
`87`	`87`	`/>`
`88`	`88`	`)}`
`89`	`89`	`<div`
`90`	`90`	`className={clsx(`
`91`		`- 'text-sm text-zinc-500',`
	`91`	`+ 'text-sm text-zinc-500 dark:text-slate-100',`
`92`	`92`	`layout === 'horizontal' && !operation.notEnoughRating && 'mr-1.5',`
`93`	`93`	`)}`
`94`	`94`	`>`