Adding feature of changing color of displayed equation.

app.js

@@ -77,13 +77,22 @@ conversionRouter.post('/convert', async (req, res) => {
       return;
     }
 
+    // Define a regular expression pattern to match a 6-character string of numbers or letters.
+    const colorPattern = /^[0-9a-zA-Z]{6}$/;
+
+    if (!colorPattern.test(req.body.outputColor)) {
+      res.end(JSON.stringify({ error: 'Invalid color format. It should be a 6-character string of numbers and/or letters.' }));
+      return;
+    }
+
     const equation = req.body.latexInput.trim();
     const fileFormat = req.body.outputFormat.toLowerCase();
     const outputScale = scaleMap[req.body.outputScale];
+    const fontColor = req.body.outputColor;
 
     // Generate and write the .tex file
     await fsPromises.mkdir(`${tempDir}/${id}`);
-    await fsPromises.writeFile(`${tempDir}/${id}/equation.tex`, getLatexTemplate(equation));
+    await fsPromises.writeFile(`${tempDir}/${id}/equation.tex`, getLatexTemplate(equation, fontColor));
 
     // Run the LaTeX compiler and generate a .svg file
     await execAsync(getDockerCommand(id, outputScale));
@@ -133,7 +142,7 @@ app.listen(port, () => console.log(`Latex2Image listening at http://localhost:${
 //// Helper functions
 
 // Get the LaTeX document template for the requested equation
-function getLatexTemplate(equation) {
+function getLatexTemplate(equation, fontColor) {
   return `
     \\documentclass[12pt]{article}
     \\usepackage{amsmath}
@@ -143,8 +152,12 @@ function getLatexTemplate(equation) {
     \\usepackage{siunitx}
     \\usepackage[utf8]{inputenc}
     \\thispagestyle{empty}
+    \\definecolor{mycolor}{HTML}{${fontColor}}
     \\begin{document}
+    \{
+    \\color{mycolor}  
     ${equation}
+    \}
     \\end{document}`;
 }
 

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "latex2image-web",
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {

static/index.html

@@ -42,6 +42,12 @@
                                     </select>
                                 </div>
                             </div>
+                            <div class="col-sm-6">
+                                <div class="form-group">
+                                    <label for="outputColorSelect">Font color (HEX format without '#')</label>
+                                    <input type="text" class="form-control" id="outputColorSelect" placeholder="000000">
+                                </div>
+                            </div>
                             <div class="col-sm-6">
                                 <div class="form-group">
                                     <label for="outputScaleSelect">Scale</label>

static/latex2image-client.js

@@ -57,7 +57,8 @@ $(document).ready(function() {
       data: {
         latexInput: latexInput,
         outputFormat: $('#outputFormatSelect').val(),
-        outputScale: $('#outputScaleSelect').val()
+        outputScale: $('#outputScaleSelect').val(),
+        outputColor: $('#outputColorSelect').val()
       },
       success: function(data) {
         $('#convertButton').prop('disabled', false);