feat: add customization for dark-mode logo

src/components/Customization/LogoUpload/logo-upload.tsx

@@ -4,6 +4,7 @@ import "./index.scss";
 import { getThemeImage } from "../../../utils";
 import Upload from "../Upload";
 import { useTranslation } from "react-i18next";
+import { DBDivider, DBInfotext } from "@db-ui/react-components";
 
 const LogoUpload = memo(() => {
   const { t } = useTranslation();
@@ -12,24 +13,56 @@ const LogoUpload = memo(() => {
   return (
     <div className="flex flex-col gap-fix-md">
       <h5>{t("logo")}</h5>
-      <div className="flex gap-fix-md justify-between">
-        <img
-          className="logo"
-          src={getThemeImage(defaultTheme.image)}
-          alt="logo"
-        />
-        <Upload
-          label="uploadLogo"
-          accept="image/*"
-          onUpload={(result) => {
-            useThemeBuilderStore.setState({
-              defaultTheme: {
-                ...defaultTheme,
-                image: result,
-              },
-            });
-          }}
-        />
+      <div className="flex gap-fix-md">
+        <div
+          className="flex flex-col gap-fix-md p-fix-sm"
+          data-color-scheme="light"
+        >
+          <DBInfotext icon="day">Light</DBInfotext>
+          <img
+            className="h-siz-md mx-auto"
+            src={getThemeImage(defaultTheme.image)}
+            alt="logo"
+          />
+          <Upload
+            size="small"
+            label="uploadLogo"
+            accept="image/*"
+            onUpload={(result) => {
+              useThemeBuilderStore.setState({
+                defaultTheme: {
+                  ...defaultTheme,
+                  image: result,
+                },
+              });
+            }}
+          />
+        </div>
+        <DBDivider margin="none" variant="vertical" />
+        <div
+          className="flex flex-col gap-fix-md p-fix-sm"
+          data-color-scheme="dark"
+        >
+          <DBInfotext icon="night">Dark</DBInfotext>
+          <img
+            className="h-siz-md mx-auto"
+            src={getThemeImage(defaultTheme.imageDark || defaultTheme.image)}
+            alt="logo"
+          />
+          <Upload
+            size="small"
+            label="uploadLogo"
+            accept="image/*"
+            onUpload={(result) => {
+              useThemeBuilderStore.setState({
+                defaultTheme: {
+                  ...defaultTheme,
+                  imageDark: result,
+                },
+              });
+            }}
+          />
+        </div>
       </div>
     </div>
   );

src/components/Customization/Upload/data.ts

@@ -2,4 +2,5 @@ export type UploadPropsType = {
   label: string;
   accept?: string;
   onUpload: (result: string) => void;
+  size?: "small";
 };

src/components/Customization/Upload/upload.tsx

@@ -3,11 +3,15 @@ import "./index.scss";
 import { useTranslation } from "react-i18next";
 import { UploadPropsType } from "./data.ts";
 
-const Upload = memo(({ label, accept, onUpload }: UploadPropsType) => {
+const Upload = memo(({ label, accept, onUpload, size }: UploadPropsType) => {
   const { t } = useTranslation();
 
   return (
-    <label className="upload-button relative" data-icon="upload">
+    <label
+      className="upload-button relative"
+      data-icon="upload"
+      data-size={size}
+    >
       {t(label)}
       <input
         type="file"

src/components/DefaultPage/default-page.tsx

@@ -39,7 +39,11 @@ const DefaultPage = ({
               <div className="db-brand">
                 <img
                   className="logo"
-                  src={getThemeImage(defaultTheme.image)}
+                  src={getThemeImage(
+                    isDark() && defaultTheme.imageDark
+                      ? defaultTheme.imageDark
+                      : defaultTheme.image,
+                  )}
                   alt="brand"
                 />
                 {name}

src/components/Landing/Header/header.tsx

@@ -9,7 +9,15 @@ const Header = () => {
   return (
     <div className="py-fix-xs px-fix-md md:py-fix-md">
       <div className="flex justify-between min-h-siz-md">
-        <img className="logo" src={getThemeImage(defaultTheme.image)} alt="brand" />
+        <img
+          className="logo"
+          src={getThemeImage(
+            isDarkMode && defaultTheme.imageDark
+              ? defaultTheme.imageDark
+              : defaultTheme.image,
+          )}
+          alt="brand"
+        />
         <a
           href="https://github.com/db-ui/theme-builder"
           target="_blank"

src/data/default-theme.json

@@ -1,6 +1,7 @@
 {
   "name": "Default Theme",
   "image": "peace-in-a-box.svg",
+  "imageDark": "peace-in-a-box-white.svg",
   "spacing": {
     "_scale": "100%",
     "responsive": {

src/utils/data.ts

@@ -143,6 +143,7 @@ export type SizingFixedType = {
 export type DefaultThemeType = {
   name: string;
   image: string;
+  imageDark: string;
   spacing: {
     responsive: ThemeTonalities;
     fixed: ThemeTonalities;