From 05a1885ecdc35190384cc3a1b9b42c1139aa8c17 Mon Sep 17 00:00:00 2001
From: ssoda01 <1443898356@qq.com>
Date: Thu, 13 Jun 2024 17:45:09 +0800
Subject: [PATCH] feat: add dark theme config #310
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat: 修复部分样式问题

feat: add color name

feat: fix less code

feat: update dark theme config

feat: add dark theme
---
 src/components/ActionCard.tsx                |   4 +-
 src/components/FactItem.tsx                  |   4 +-
 src/components/HelperText.tsx                |   2 +-
 src/components/OperationCard.tsx             |   4 +-
 src/components/drawer/NavAside.tsx           |   2 +-
 src/components/entity/EDifficulty.tsx        |   2 +-
 src/components/entity/ELevel.tsx             |   4 +-
 src/components/viewer/OperationRating.tsx    |   4 +-
 src/components/viewer/OperationSetViewer.tsx |   4 +-
 src/components/viewer/OperationViewer.tsx    |   6 +-
 src/layouts/AppLayout.tsx                    |   2 +-
 src/pages/index.tsx                          |   4 +-
 src/styles/blueprint.less                    | 105 +++++++++++++++++--
 13 files changed, 118 insertions(+), 29 deletions(-)

diff --git a/src/components/ActionCard.tsx b/src/components/ActionCard.tsx
index b890cda0..00458cd6 100644
--- 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
index 5c147269..c57df083 100644
--- 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
index 27bd3d3e..6c851254 100644
--- 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
index 2ae56114..6cbeceb7 100644
--- 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
index b83049fa..9c829590 100644
--- 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
index d32532af..5afd8ce5 100644
--- 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
index 099ad158..8948d244 100644
--- 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
index 4f611a9b..dc7a2869 100644
--- a/src/components/viewer/OperationRating.tsx
+++ b/src/components/viewer/OperationRating.tsx
@@ -80,7 +80,7 @@ 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
@@ -88,7 +88,7 @@ export const OperationRating: FC<{
       )}
       <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
index 914bb59b..2c48c960 100644
--- 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
index 62ddd20a..638a0b1b 100644
--- 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
index 467a336d..372f0161 100644
--- 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
index 33155f56..cf6b39f5 100644
--- 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
index 9f6a01c3..5c4e43df 100644
--- 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;
+    }
   }
 }