added option for setting default color

src/App.js

@@ -1,5 +1,14 @@
 import React, { useState, useRef } from "react";
-import { Button, Collapse, InputAdornment, TextField } from "@material-ui/core";
+import {
+  Button,
+  Collapse,
+  InputAdornment,
+  TextField,
+  FormControl,
+  Select,
+  makeStyles,
+  InputLabel
+} from "@material-ui/core";
 import code from "./code";
 import "./styles.css";
 
@@ -26,6 +35,16 @@ function validNotionUrl(url) {
   }
 }
 
+const useStyles = makeStyles((theme) => ({
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2)
+  }
+}));
+
 export default function App() {
   const [slugs, setSlugs] = useState([]);
   const [myDomain, setMyDomain] = useState("");
@@ -36,35 +55,40 @@ export default function App() {
   const [customScript, setCustomScript] = useState("");
   const [optional, setOptional] = useState(false);
   const [copied, setCopied] = useState(false);
-  const handleMyDomain = e => {
+  const [defaultColor, setDefaultColor] = useState("");
+  const handleMyDomain = (e) => {
     setMyDomain(e.target.value);
     setCopied(false);
   };
-  const handleNotionUrl = e => {
+  const handleNotionUrl = (e) => {
     setNotionUrl(e.target.value);
     setCopied(false);
   };
-  const handlePageTitle = e => {
+  const handlePageTitle = (e) => {
     setPageTitle(e.target.value);
     setCopied(false);
   };
-  const handlePageDescription = e => {
+  const handlePageDescription = (e) => {
     setPageDescription(e.target.value);
     setCopied(false);
   };
-  const handleGoogleFont = e => {
+  const handleGoogleFont = (e) => {
     setGoogleFont(e.target.value);
     setCopied(false);
   };
-  const handleCustomScript = e => {
+  const handleCustomScript = (e) => {
     setCustomScript(e.target.value);
     setCopied(false);
   };
+  const handleColorChange = (e) => {
+    setDefaultColor(e.target.value);
+    setCopied(false);
+  };
   const addSlug = () => {
     setSlugs([...slugs, ["", ""]]);
     setCopied(false);
   };
-  const deleteSlug = index => {
+  const deleteSlug = (index) => {
     setSlugs([...slugs.slice(0, index), ...slugs.slice(index + 1)]);
     setCopied(false);
   };
@@ -104,6 +128,7 @@ export default function App() {
         pageTitle,
         pageDescription,
         googleFont,
+        defaultColor,
         customScript
       })
     : undefined;
@@ -114,6 +139,7 @@ export default function App() {
     document.execCommand("copy");
     setCopied(true);
   };
+  const classes = useStyles();
   return (
     <section style={{ maxWidth: 666 }}>
       <TextField
@@ -150,7 +176,7 @@ export default function App() {
               label="Pretty Link"
               margin="normal"
               placeholder="about"
-              onChange={e => handleCustomURL(e.target.value, index)}
+              onChange={(e) => handleCustomURL(e.target.value, index)}
               value={customUrl}
               variant="outlined"
             />
@@ -160,7 +186,7 @@ export default function App() {
               key="value"
               margin="normal"
               placeholder={DEFAULT_NOTION_URL}
-              onChange={e => handleNotionPageURL(e.target.value, index)}
+              onChange={(e) => handleNotionPageURL(e.target.value, index)}
               value={notionPageUrl}
               variant="outlined"
             />
@@ -221,6 +247,22 @@ export default function App() {
           value={googleFont}
           variant="outlined"
         />
+        <FormControl className={classes.formControl}>
+          <InputLabel htmlFor="age-native-simple">Default Color</InputLabel>
+          <Select
+            native
+            value={defaultColor}
+            onChange={handleColorChange}
+            inputProps={{
+              name: "age",
+              id: "age-native-simple"
+            }}
+          >
+            <option aria-label="None" value="" />
+            <option value={"light"}>Light</option>
+            <option value={"dark"}>Dark</option>
+          </Select>
+        </FormControl>
         <TextField
           fullWidth
           label="Paste Your Custom Script"
@@ -261,4 +303,4 @@ export default function App() {
       )}
     </section>
   );
-}
+}

src/code.js

@@ -1,27 +1,28 @@
 function getId(url) {
-    try {
-        const id = new URL(url).pathname.slice(-32);
-        if (id.match(/[0-9a-f]{32}/)) return id;
-        return '';
-    } catch (e) {
-        return '';
-    }
+  try {
+    const id = new URL(url).pathname.slice(-32);
+    if (id.match(/[0-9a-f]{32}/)) return id;
+    return "";
+  } catch (e) {
+    return "";
+  }
 }
 
 export default function code(data) {
-    const {
-        myDomain,
-        notionUrl,
-        slugs,
-        pageTitle,
-        pageDescription,
-        googleFont,
-        customScript,
-    } = data;
-    let url = myDomain.replace('https://', '').replace('http://', '');
-    if (url.slice(-1) === '/') url = url.slice(0, url.length - 1);
+  const {
+    myDomain,
+    notionUrl,
+    slugs,
+    pageTitle,
+    pageDescription,
+    googleFont,
+    customScript,
+    defaultColor
+  } = data;
+  let url = myDomain.replace("https://", "").replace("http://", "");
+  if (url.slice(-1) === "/") url = url.slice(0, url.length - 1);
 
-    return `  /* CONFIGURATION STARTS HERE */
+  return `  /* CONFIGURATION STARTS HERE */
 
   /* Step 1: enter your domain name like fruitionsite.com */
   const MY_DOMAIN = '${url}';
@@ -34,22 +35,25 @@ export default function code(data) {
   const SLUG_TO_PAGE = {
     '': '${getId(notionUrl)}',
 ${slugs
-    .map(([pageUrl, notionUrl]) => {
-        const id = getId(notionUrl);
-        if (!id || !pageUrl) return '';
-        return `    '${pageUrl}': '${id}',\n`;
-    })
-    .join('')}  };
+  .map(([pageUrl, notionUrl]) => {
+    const id = getId(notionUrl);
+    if (!id || !pageUrl) return "";
+    return `    '${pageUrl}': '${id}',\n`;
+  })
+  .join("")}  };
 
   /* Step 3: enter your page title and description for SEO purposes */
-  const PAGE_TITLE = '${pageTitle || ''}';
-  const PAGE_DESCRIPTION = '${pageDescription || ''}';
+  const PAGE_TITLE = '${pageTitle || ""}';
+  const PAGE_DESCRIPTION = '${pageDescription || ""}';
 
   /* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */
-  const GOOGLE_FONT = '${googleFont || ''}';
+  const GOOGLE_FONT = '${googleFont || ""}';
+
+  /* Step 5: select the default color mode (dark or light) */
+  const DEFAULT_COLOR = \`${defaultColor || ""}\`;
 
-  /* Step 5: enter any custom scripts you'd like */
-  const CUSTOM_SCRIPT = \`${customScript || ''}\`;
+  /* Step 6: enter any custom scripts you'd like */
+  const CUSTOM_SCRIPT = \`${customScript || ""}\`;
 
   /* CONFIGURATION ENDS HERE */
 
@@ -207,11 +211,13 @@ ${slugs
   class BodyRewriter {
     constructor(SLUG_TO_PAGE) {
       this.SLUG_TO_PAGE = SLUG_TO_PAGE;
+      this.DEFAULT_COLOR = DEFAULT_COLOR;
     }
     element(element) {
       element.append(\`<div style="display:none">Powered by <a href="http://fruitionsite.com">Fruition</a></div>
       <script>
       const SLUG_TO_PAGE = \${JSON.stringify(this.SLUG_TO_PAGE)};
+      const DEFAULT_COLOR = \${JSON.stringify(this.DEFAULT_COLOR)};
       const PAGE_TO_SLUG = {};
       const slugs = [];
       const pages = [];
@@ -257,7 +263,12 @@ ${slugs
         el.className = 'toggle-mode';
         el.addEventListener('click', toggle);
         nav.appendChild(el);
-        onLight();
+        if (DEFAULT_COLOR !== 'dark') {
+          onLight();
+        }
+        else {
+          onDark();
+        }
       }
       const observer = new MutationObserver(function() {
         if (redirected) return;