feat: added inbuilt themes (#105)

* feat: added inbuilt themes

* docs: added theming docs

* docs: update docs

src/renderRepoCard.js

@@ -1,7 +1,7 @@
 const {
   kFormatter,
   encodeHTML,
-  fallbackColor,
+  getCardColors,
   FlexLayout,
 } = require("../src/utils");
 const icons = require("./icons");
@@ -16,7 +16,14 @@ const renderRepoCard = (repo, options = {}) => {
     isArchived,
     forkCount,
   } = repo;
-  const { title_color, icon_color, text_color, bg_color, show_owner } = options;
+  const {
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    show_owner,
+    theme = "default_repocard",
+  } = options;
 
   const header = show_owner ? nameWithOwner : name;
   const langName = primaryLanguage ? primaryLanguage.name : "Unspecified";
@@ -30,10 +37,14 @@ const renderRepoCard = (repo, options = {}) => {
     desc = `${description.slice(0, 55)}..`;
   }
 
-  const titleColor = fallbackColor(title_color, "#2f80ed");
-  const iconColor = fallbackColor(icon_color, "#586069");
-  const textColor = fallbackColor(text_color, "#333");
-  const bgColor = fallbackColor(bg_color, "#FFFEFE");
+  // returns theme based colors with proper overrides and defaults
+  const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    theme,
+  });
 
   const totalStars = kFormatter(stargazers.totalCount);
   const totalForks = kFormatter(forkCount);
@@ -82,7 +93,7 @@ const renderRepoCard = (repo, options = {}) => {
       .archive-badge { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; }
       .archive-badge rect { opacity: 0.2 }
       </style>
-      <rect data-testid="card-border" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
+      <rect data-testid="card-bg" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
       <svg class="icon" x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16">
         ${icons.contribs}
       </svg>

src/renderStatsCard.js

@@ -1,4 +1,4 @@
-const { kFormatter, fallbackColor, FlexLayout } = require("../src/utils");
+const { kFormatter, getCardColors, FlexLayout } = require("../src/utils");
 const getStyles = require("./getStyles");
 const icons = require("./icons");
 
@@ -44,14 +44,19 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     icon_color,
     text_color,
     bg_color,
+    theme = "default",
   } = options;
 
   const lheight = parseInt(line_height);
 
-  const titleColor = fallbackColor(title_color, "#2f80ed");
-  const iconColor = fallbackColor(icon_color, "#4c71f2");
-  const textColor = fallbackColor(text_color, "#333");
-  const bgColor = fallbackColor(bg_color, "#FFFEFE");
+  // returns theme based colors with proper overrides and defaults
+  const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    theme,
+  });
 
   // Meta data for creating text nodes with createTextNode function
   const STATS = {
@@ -127,7 +132,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     ? ""
     : `
     <rect 
-      data-testid="card-border"
+      data-testid="card-bg"
       x="0.5"
       y="0.5"
       width="494"

src/utils.js

@@ -1,4 +1,5 @@
 const axios = require("axios");
+const themes = require("../themes");
 
 const renderError = (message) => {
   return `
@@ -77,6 +78,40 @@ function FlexLayout({ items, gap, direction }) {
   });
 }
 
+// returns theme based colors with proper overrides and defaults
+function getCardColors({
+  title_color,
+  text_color,
+  icon_color,
+  bg_color,
+  theme,
+  fallbackTheme = "default",
+}) {
+  const defaultTheme = themes[fallbackTheme];
+  const selectedTheme = themes[theme] || defaultTheme;
+
+  // get the color provided by the user else the theme color
+  // finally if both colors are invalid fallback to default theme
+  const titleColor = fallbackColor(
+    title_color || selectedTheme.title_color,
+    "#" + defaultTheme.title_color
+  );
+  const iconColor = fallbackColor(
+    icon_color || selectedTheme.icon_color,
+    "#" + defaultTheme.icon_color
+  );
+  const textColor = fallbackColor(
+    text_color || selectedTheme.text_color,
+    "#" + defaultTheme.text_color
+  );
+  const bgColor = fallbackColor(
+    bg_color || selectedTheme.bg_color,
+    "#" + defaultTheme.bg_color
+  );
+
+  return { titleColor, iconColor, textColor, bgColor };
+}
+
 module.exports = {
   renderError,
   kFormatter,
@@ -86,4 +121,5 @@ module.exports = {
   parseBoolean,
   fallbackColor,
   FlexLayout,
+  getCardColors,
 };