Setup css variables

action.yml

@@ -11,6 +11,12 @@ inputs:
   commitMsg:
     description: "commit message to be shown when adding image"
     default: "just some wholesome content. yo all!"
+  background-color:
+    description: "background color for image"
+    default: "#ffffff"
+  font-color:
+    description: "font color for image"
+    default: "#000000"
 runs:
   using: "docker"
   image: "Dockerfile"

src/generate-html.ts

@@ -14,6 +14,8 @@ function generateHtml(prop: Partial<IProps>) {
         }
         og-image-element {
           --heading-font: 'Aleo', serif;
+          --background-color: ${prop.backgroundColor};
+          --font-color: ${prop.fontColor};
         }
       </style>
       <script type="module" rel="preload" src="https://unpkg.com/@agney/og-image-element@0.1.0"></script>

src/repo-props.ts

@@ -6,9 +6,13 @@ import { getInput } from "@actions/core";
 async function getRepoProps() {
   const assetPath = getInput(`path`);
   const commitMsg = getInput(`commitMsg`);
+  const backgroundColor = getInput(`background-color`);
+  const fontColor = getInput(`font-color`);
   return {
     assetPath,
-    commitMsg
+    commitMsg,
+    backgroundColor,
+    fontColor
   };
 }
 

src/types.ts

@@ -8,6 +8,8 @@ export interface IProps {
   subtitle: string;
   filename: string;
   imageUrl: string;
+  backgroundColor: string;
+  fontColor: string;
 }
 
 export interface IFrontMatter {