Fixed link generator name and theme query string

Author: DenverCoder1

src/components/addons.js

@@ -185,6 +185,22 @@ const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) =>
       </label>
     </>
 
+const CustomizeStreakStats = ({ prefix, options, onUpdate }) => (
+  <>
+    <label htmlFor={`${prefix}-theme`}>
+      Theme:&nbsp;
+      <select
+        id={`${prefix}-theme`}
+        onChange={({ target: { value } }) => onUpdate("theme", value)}
+        defaultValue={options.theme}
+      >
+        <option value="default">default</option>
+        <option value="dark">dark</option>
+      </select>
+    </label>
+  </>
+)
+
 const Addons = props => {
   const [debounce, setDebounce] = useState(undefined);
   const [badgeOptions, setBadgeOptions] = useState({

src/components/markdown.js

@@ -147,21 +147,6 @@ const Markdown = props => {
     }
     return ""
   }
-  const DisplayStreakStats = ({ show, github, options }) => {
-    if (show) {
-      return (
-        <>
-          {`<p>&nbsp;<img align="center" src="${streakStatsLinkGenerator({
-            github: github,
-            options,
-          })}" alt="${github}" /></p>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
   const isSocial = social => {
     return (
       social.dev ||
@@ -254,6 +239,21 @@ const Markdown = props => {
     }
     return ""
   }
+  const DisplayStreakStats = props => {
+    if (props.show) {
+      return (
+        <>
+          {`<p><img align="center" src="${streakStatsLinkGenerator({
+            github: props.github,
+            options: props.options,
+          })}" alt="${props.github}" /></p>`}
+          <br />
+          <br />
+        </>
+      )
+    }
+    return ""
+  }
   return (
     <div id="markdown-content" className="break-words">
       <>

src/utils/link-generators.js

@@ -13,11 +13,19 @@ const githubStatsStylingQueryString = options => {
   return query_string
 }
 
+const streakStatsStylingQueryString = options => {
+  const params = {
+    ...(options.theme && options.theme !== "none") && { theme: options.theme },
+  }
+  const query_string = Object.entries(params).map(([key, value]) => `${key}=${value}`).join("&")
+  return query_string
+}
+
 export const githubStatsLinkGenerator = ({github, options}) =>
   `https://github-readme-stats.vercel.app/api?username=${github}&${githubStatsStylingQueryString(options)}`
 
 export const topLanguagesLinkGenerator = ({github, options}) =>
  `https://github-readme-stats.vercel.app/api/top-langs?username=${github}&${githubStatsStylingQueryString(options)}&layout=compact`
 
-export const githubStreakLinkGenerator = ({github, options}) =>
- `https://github-readme-streak-stats.herokuapp.com/?user=${github}`
+export const streakStatsLinkGenerator = ({github, options}) =>
+ `https://github-readme-streak-stats.herokuapp.com/?user=${github}&${streakStatsStylingQueryString(options)}`