Dark Mode

piterator-org · Aug 13, 2023 · 74504d0 · 74504d0
1 parent 653af06
commit 74504d0
Show file tree

Hide file tree

Showing 24 changed files with 107 additions and 47 deletions.
diff --git a/packages/viewer/src/app/NavBar.tsx b/packages/viewer/src/app/NavBar.tsx
@@ -10,7 +10,7 @@ export default function NavBar() {
   });
 
   return (
-    <nav className="navbar navbar-expand-md sticky-top bg-body shadow-sm">
+    <nav className="navbar navbar-expand-md sticky-top bg-body shadow-bssb-sm">
       <div className="container-lg d-flex my-1 px-3x px-md-container-default">
         <Link className="navbar-brand" href="/">
           <div
@@ -26,7 +26,7 @@ export default function NavBar() {
           </div>
         </Link>
         <button
-          className="navbar-toggler border-0 shadow-sm"
+          className="navbar-toggler border-0 shadow-bssb-sm"
           type="button"
           data-bs-toggle="collapse"
           data-bs-target="#navbarSupportedContent"
@@ -63,13 +63,13 @@ export default function NavBar() {
           </ul>
           <form className="d-flex my-tiny my-md-0" role="search">
             <input
-              className="form-control border-0 shadow-sm me-2"
+              className="form-control border-0 shadow-bssb-sm me-2"
               type="search"
               disabled
               placeholder="帖子关键词、发布者"
             />
             <button
-              className="btn btn-outline-success shadow-sm text-nowrap"
+              className="btn btn-outline-success shadow-bssb-sm text-nowrap"
               type="submit"
               disabled
             >

diff --git a/packages/viewer/src/app/SaveInput.tsx b/packages/viewer/src/app/SaveInput.tsx
@@ -29,7 +29,7 @@ export default function SaveInput() {
       }}
     >
       <input
-        className="form-control shadow rounded-start-4 border-0"
+        className="form-control shadow-bssb rounded-start-4 border-0"
         autoComplete="off"
         placeholder="帖子链接或编号"
         disabled={disabled}
@@ -42,7 +42,7 @@ export default function SaveInput() {
       <button
         className={`btn btn-${
           error ? "danger" : "success"
-        } rounded-end-4 shadow`}
+        } rounded-end-4 shadow-bssb`}
         type="submit"
         disabled={disabled}
       >

diff --git a/packages/viewer/src/app/[id]/[page]/page.tsx b/packages/viewer/src/app/[id]/[page]/page.tsx
@@ -73,7 +73,7 @@ export default async function Page({
         <Reply discussion={{ id, authorId }} reply={reply} key={reply.id} />
       ))}
       {numPages > 1 && (
-        <div className="bg-body rounded-4 shadow my-4s px-4 py-3 py-md-4 text-center">
+        <div className="bg-body rounded-4 shadow-bssb my-4s px-4 py-3 py-md-4 text-center">
           <PageButtons
             ellipsisFront={!pagesLocalAttachedFront}
             ellipsisBack={!pagesLocalAttachedBack}

diff --git a/packages/viewer/src/app/[id]/layout.tsx b/packages/viewer/src/app/[id]/layout.tsx
@@ -76,7 +76,7 @@ export default async function Page({
   return (
     <div className="row px-2 px-md-0">
       <div className="col-lg-4 col-md-5 col-12 order-md-last mb-4s">
-        <div className="rounded-4 shadow px-4 py-3">
+        <div className="rounded-4 shadow-bssb px-4 py-3">
           <div className="mb-2 fs-2 fw-semibold d-block d-md-none">{title}</div>
           <ul className="list-group">
             <li className="d-flex justify-content-between lh-lg">
@@ -117,7 +117,7 @@ export default async function Page({
           </ul>
           <div className="mt-2 mb-1">
             <a
-              className="btn btn-outline-secondary shadow-sm"
+              className="btn btn-outline-secondary shadow-bssb-sm"
               href={getDiscussionUrl(parseInt(params.id, 10))}
               target="_blank"
               rel="noopener noreferrer"
@@ -131,7 +131,7 @@ export default async function Page({
         </div>
       </div>
       <div className="col-lg-8 col-md-7 col-12">
-        <div className="bg-body rounded-4 shadow mb-4s px-4 py-3 fs-2 fw-semibold d-none d-md-block">
+        <div className="bg-body rounded-4 shadow-bssb mb-4s px-4 py-3 fs-2 fw-semibold d-none d-md-block">
           {title}
         </div>
         <Reply

diff --git a/packages/viewer/src/app/about/page.tsx b/packages/viewer/src/app/about/page.tsx
@@ -11,7 +11,7 @@ export default function Page() {
     <div className="pt-4x pb-3 pb-md-3x px-2 px-md-0">
       <div className="row justify-content-center">
         <div className="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
-          <div className="rounded-4 shadow p-3 p-md-3x">
+          <div className="rounded-4 shadow-bssb p-3 p-md-3x">
             <h2 className="mb-4 text-center">关于</h2>
             <div className="markdown">
               <p>你好，这里是由 Piterator 打造的新一代洛谷讨论保存站。</p>

diff --git a/packages/viewer/src/app/bootstrap.scss b/packages/viewer/src/app/bootstrap.scss
@@ -1,5 +1,8 @@
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
+$color-mode-type: media-query;
 
 $local-colors: (
   indigo: #5468ff,
@@ -50,6 +53,63 @@ $spacers: map-merge(
 
 $box-shadow: 0 0.375rem 1rem rgba($black, 0.1);
 
+$box-shadow-dark: 0 0.375rem 1rem rgba(108, 108, 108, 0.1);
+$box-shadow-sm-dark: 0 0.125rem 0.25rem rgba(108, 108, 108, 0.075);
+$box-shadow-lg-dark: 0 1rem 3rem rgba(108, 108, 108, 0.175);
+$box-shadow-inset-dark: inset 0 1px 2px rgba(108, 108, 108, 0.075);
+
+.shadow-bssb {
+  box-shadow: $box-shadow !important;
+}
+.shadow-bssb-sm {
+  box-shadow: $box-shadow-dark !important;
+}
+.shadow-bssb-lg {
+  box-shadow: $box-shadow-dark !important;
+}
+.shadow-bssb-inset {
+  box-shadow: $box-shadow-dark !important;
+}
+.bg-light-bssb {
+  background-color: $light !important;
+}
+.btn-light-bssb {
+  background-color: #f8f9fa !important;
+}
+.btn-light-bssb:hover {
+  background-color: #d3d4d5 !important;
+}
+.btn-light-bssb:active {
+  background-color: #c6c7c8 !important;
+}
+
+@include color-mode(dark) {
+  .shadow-bssb {
+    box-shadow: $box-shadow-dark !important;
+  }
+  .shadow-bssb-sm {
+    box-shadow: $box-shadow-sm-dark !important;
+  }
+  .shadow-bssb-lg {
+    box-shadow: $box-shadow-lg-dark !important;
+  }
+  .shadow-bssb-inset {
+    box-shadow: $box-shadow-inset-dark !important;
+  }
+  .bg-light-bssb {
+    background-color: rgba(255, 255, 255, 0.075) !important;
+  }
+  .btn-light-bssb {
+    background-color: rgba(255, 255, 255, 0.075) !important;
+  }
+  .btn-light-bssb:hover {
+    background-color: rgba(255, 255, 255, 0.18) !important;
+  }
+  .btn-light-bssb:active {
+    background-color: rgba(255, 255, 255, 0.22) !important;
+  }
+}
+
 @import "bootstrap/scss/bootstrap";
 
 .reply,

diff --git a/packages/viewer/src/app/explore/page.tsx b/packages/viewer/src/app/explore/page.tsx
@@ -16,13 +16,13 @@ export default function Page() {
           style={{ maxWidth: "40em" }}
         >
           <input
-            className="form-control shadow rounded-start-4 border-0"
+            className="form-control shadow-bssb rounded-start-4 border-0"
             autoComplete="off"
             placeholder="帖子关键词、发布者"
             disabled
           />
           <button
-            className="btn btn-primary shadow rounded-end-4"
+            className="btn btn-primary shadow-bssb rounded-end-4"
             type="button"
             disabled
           >
@@ -33,7 +33,7 @@ export default function Page() {
       <div className="px-2 px-md-0 py-5">
         <div className="row">
           <div className="col-12 col-md-8 col-xl-9">
-            <div className="rounded-4 shadow mb-4s px-3x pt-3x">
+            <div className="rounded-4 shadow-bssb mb-4s px-3x pt-3x">
               <div className="row">
                 <Suspense fallback={<Spinner className="mt-2 mb-4" />}>
                   <Discussions />
@@ -42,7 +42,7 @@ export default function Page() {
             </div>
           </div>
           <div className="col-12 col-md-4 col-xl-3">
-            <div className="rounded-4 shadow px-4 px-md-3x pt-3x pb-2x">
+            <div className="rounded-4 shadow-bssb px-4 px-md-3x pt-3x pb-2x">
               <div className="mb-2 fs-4 fw-semibold">龙王榜（7 天）</div>
               <Suspense fallback={<Spinner className="mt-4 mb-3" />}>
                 <Users />

diff --git a/packages/viewer/src/app/indices/MostViewed.tsx b/packages/viewer/src/app/indices/MostViewed.tsx
@@ -1,6 +1,6 @@
 export default function MostViewed() {
   return (
-    <div className="rounded-4 shadow px-4 py-3">
+    <div className="rounded-4 shadow-bssb px-4 py-3">
       <p className="my-5x text-center text-body-secondary">即将上线</p>
     </div>
   );

diff --git a/packages/viewer/src/app/indices/TopCharts.tsx b/packages/viewer/src/app/indices/TopCharts.tsx
@@ -9,7 +9,7 @@ export default function Page({ children }: { children: React.ReactNode[] }) {
     <div className="pt-5 pb-3 pb-md-3x px-2 px-md-0">
       <h1 className="mb-4x text-center">索引</h1>
       <select
-        className="form-select form-select-lg d-block d-md-none border-0 rounded-3 shadow-sm mb-4m"
+        className="form-select form-select-lg d-block d-md-none border-0 rounded-3 shadow-bssb-sm mb-4m"
         value={selected}
         onChange={({ target: { value } }) => setSelected(value)}
       >

diff --git a/packages/viewer/src/app/judgement/[page]/page.tsx b/packages/viewer/src/app/judgement/[page]/page.tsx
@@ -32,7 +32,7 @@ export default async function Page({ params }: { params: { page: string } }) {
         />
       ))}
       {numPages > 1 && (
-        <div className="bg-body rounded-4 shadow my-4s px-4 py-3 py-md-4 text-center">
+        <div className="bg-body rounded-4 shadow-bssb my-4s px-4 py-3 py-md-4 text-center">
           <PageButtons
             ellipsisFront={!pagesLocalAttachedFront}
             ellipsisBack={!pagesLocalAttachedBack}

diff --git a/packages/viewer/src/app/judgement/layout.tsx b/packages/viewer/src/app/judgement/layout.tsx
@@ -10,7 +10,7 @@ export default function Page({ children }: React.PropsWithChildren) {
   return (
     <div className="row px-2 px-md-0">
       <div className="col-lg-4 col-md-5 col-12 order-md-last mb-4s">
-        <div className="rounded-4 shadow px-4 py-3">
+        <div className="rounded-4 shadow-bssb px-4 py-3">
           <div className="mb-2 fs-2 fw-semibold">陶片放逐</div>
           <ul className="list-group">
             <li className="d-flex justify-content-between lh-lg">
@@ -22,7 +22,7 @@ export default function Page({ children }: React.PropsWithChildren) {
           </ul>
           <div className="mt-2 mb-1">
             <a
-              className="btn btn-outline-secondary shadow-sm"
+              className="btn btn-outline-secondary shadow-bssb-sm"
               href={judgementUrl}
               target="_blank"
               rel="noopener noreferrer"

diff --git a/packages/viewer/src/app/r/[rid]/page.tsx b/packages/viewer/src/app/r/[rid]/page.tsx
@@ -30,7 +30,7 @@ export default async function Page({ params }: { params: { rid: string } }) {
     <div className="row px-2 px-md-0">
       <div className="col-xl-9 col-lg-10 col-md-11 col-12 mt-3 mb-3x mx-auto">
         <div className="pb-3 mb-4x position-relative">
-          <div className="bg-white rounded-4 shadow">
+          <div className="rounded-4 shadow-bssb">
             <div className="px-md-4x px-4 pt-md-3x pt-2x pb-md-4x pb-4 position-relative">
               <Content
                 discussionAuthor={reply.discussion.snapshots[0].authorId}
@@ -76,7 +76,7 @@ export default async function Page({ params }: { params: { rid: string } }) {
             </div>
           </div>
         </div>
-        <div className="mt-5 bg-white rounded-4 shadow d-md-none px-4 py-3">
+        <div className="mt-5 rounded-4 shadow-bssb d-md-none px-4 py-3">
           <div className="fw-medium text-body-tertiary">
             于帖子{" "}
             <Link

diff --git a/packages/viewer/src/app/user/[uid]/TabNavigation.tsx b/packages/viewer/src/app/user/[uid]/TabNavigation.tsx
@@ -7,7 +7,7 @@ export default function TabNavigation({ uid }: { uid: string }) {
   const pathname = usePathname();
 
   return (
-    <ul className="nav nav-pills nav-fill rounded-4 shadow mb-4s">
+    <ul className="nav nav-pills nav-fill rounded-4 shadow-bssb mb-4s">
       {[
         { children: "参与", href: `/user/${uid}` },
         { children: "发帖", href: `/user/${uid}/discussions` },

diff --git a/packages/viewer/src/app/user/[uid]/layout.tsx b/packages/viewer/src/app/user/[uid]/layout.tsx
@@ -31,15 +31,15 @@ export default async function Layout({
   return (
     <div className="row px-2 px-md-0">
       <div className="col-md-4 col-12 mb-4x">
-        <div className="rounded-4 shadow px-4 py-4 text-center">
+        <div className="rounded-4 shadow-bssb px-4 py-4 text-center">
           <a
             href={getUserRealUrl(user.id)}
             target="_blank"
             rel="noopener noreferrer"
           >
             <Image
               src={getUserAvatarUrl(user.id)}
-              className="rounded-circle shadow-sm md-block mb-3x"
+              className="rounded-circle shadow-bssb-sm md-block mb-3x"
               width={96}
               height={96}
               alt={user.id.toString()}
@@ -53,7 +53,7 @@ export default async function Layout({
           </div>
           <div>
             <a
-              className="btn btn-outline-primary shadow-sm"
+              className="btn btn-outline-primary shadow-bssb-sm"
               href={getUserRealUrl(user.id)}
               target="_blank"
               rel="noopener noreferrer"

diff --git a/packages/viewer/src/app/user/[uid]/participated/UserParticipated.tsx b/packages/viewer/src/app/user/[uid]/participated/UserParticipated.tsx
@@ -70,8 +70,8 @@ export default function UserParticipated({
                 className="entry-md-avatar"
                 user={discussion.snapshots[0].author}
               />
-              <div className="entry-md-card bg-white rounded-4 shadow mb-4s">
-                <div className="entry-md-meta bg-light rounded-top-4 pe-4 py-2 overflow-ellipsis">
+              <div className="entry-md-card rounded-4 shadow-bssb mb-4s">
+                <div className="entry-md-meta bg-light-bssb rounded-top-4 pe-4 py-2 overflow-ellipsis">
                   <UserInfo user={discussion.snapshots[0].author} />
                   {discussion.snapshots[0].author.id === user.id ? (
                     <span
@@ -182,8 +182,8 @@ export default function UserParticipated({
                       <div className="timeline">
                         {discussion.replies.map((reply) => (
                           <div className="timeline-node" key={reply.id}>
-                            <div className="bg-white rounded-4 shadow-sm my-3x">
-                              <div className="timeline-connect bg-light rounded-top-4 px-4 py-2">
+                            <div className="rounded-4 shadow-bssb-sm my-3x">
+                              <div className="timeline-connect bg-light-bssb rounded-top-4 px-4 py-2">
                                 <UserInfo user={user} />
                                 {reply.authorId ===
                                 discussion.snapshots[0].author.id ? (

diff --git a/packages/viewer/src/components/DiscussionEntry.tsx b/packages/viewer/src/components/DiscussionEntry.tsx
@@ -37,14 +37,14 @@ export default function DiscussionEntry({
         <div
           className={`entry${
             decoratorBreakpoint !== undefined ? `-${decoratorBreakpoint}` : ""
-          }-card bg-white rounded-4 shadow${
+          }-card rounded-4 shadow-bssb${
             decoratorShadow ? `-${decoratorShadow}` : ""
           } mb-${decoratorShadow === "sm" ? "3x" : "4s"}`}
         >
           <div
             className={`entry${
               decoratorBreakpoint !== undefined ? `-${decoratorBreakpoint}` : ""
-            }-meta bg-light rounded-top-4 pe-4 py-2 overflow-ellipsis`}
+            }-meta bg-light-bssb rounded-top-4 pe-4 py-2 overflow-ellipsis`}
           >
             <UserInfo user={discussion.snapshots[0].author} />
           </div>

diff --git a/packages/viewer/src/components/Ostracon.tsx b/packages/viewer/src/components/Ostracon.tsx
@@ -13,8 +13,8 @@ export default function Ostracon({
 }) {
   return (
     <div className="position-relative">
-      <div className="bg-white rounded-4 shadow mb-4s">
-        <div className="bg-light rounded-top-4 px-4 py-2">
+      <div className="rounded-4 shadow-bssb mb-4s">
+        <div className="bg-light-bssb rounded-top-4 px-4 py-2">
           <span className="text-body-tertiary">
             {ostracon.time.toLocaleString("zh")}
           </span>

diff --git a/packages/viewer/src/components/UpdateButton.tsx b/packages/viewer/src/components/UpdateButton.tsx
@@ -63,7 +63,7 @@ export default function UpdateButton({
     <>
       <button
         type="button"
-        className={`btn btn-outline-primary shadow-sm ${className ?? ""}`}
+        className={`btn btn-outline-primary shadow-bssb-sm ${className ?? ""}`}
         onClick={() => {
           setDisabled(true);
           if (Number.isNaN(id) || !socketRef.current?.connected)
@@ -83,7 +83,7 @@ export default function UpdateButton({
       </button>
       <div className="toast-container position-fixed bottom-0 end-0 p-3">
         <div
-          className="toast text-bg-danger border-0 shadow"
+          className="toast text-bg-danger border-0 shadow-bssb"
           role="alert"
           aria-live="assertive"
           aria-atomic="true"

diff --git a/packages/viewer/src/components/UserAvatar.tsx b/packages/viewer/src/components/UserAvatar.tsx
@@ -18,7 +18,7 @@ export default function UserAvatar({
     <Link href={getUserUrl(id)} className={className}>
       <Image
         src={getUserAvatarUrl(id)}
-        className={`rounded-circle shadow${
+        className={`rounded-circle shadow-bssb${
           decoratorShadow ? `-${decoratorShadow}` : ""
         }`}
         width={size}

diff --git a/packages/viewer/src/components/replies/Content.tsx b/packages/viewer/src/components/replies/Content.tsx
@@ -97,7 +97,7 @@ export default function Content({
           className="position-absolute"
           style={{ display: "none" }}
         >
-          <div className="bg-body rounded-4 shadow-sm px-3 py-2x mb-2">
+          <div className="bg-body rounded-4 shadow-bssb-sm px-3 py-2x mb-2">
             <div className="d-flex me-auto">
               <div>
                 <UserAvatar className="" user={user} decoratorShadow="sm" />