made sure each theme is now using either an almost whie or almost black text color

added extra test color setting

public/css/style.scss

@@ -805,6 +805,23 @@ key {
   }
 }
 
+#words.extraColor{
+  .word{
+    & letter.correct{
+      color: var(--main-color);
+    }
+  }
+}
+
+#words.flipped.extraColor{
+  .word{
+    color: var(--main-color);
+    & letter.correct{
+      color: var(--sub-color);
+    }
+  }
+}
+
 .pageTest #resultExtraButtons{
   opacity: 0;
   display: grid;

public/index.html

@@ -219,7 +219,7 @@
         </div>
         <input id="wordsInput" class="" tabindex="0" autocomplete="off"></input>
         <div id="wordsTitle">input history</div>
-        <div id="words" class=""></div>
+        <div id="words" class="extraColor"></div>
         <div id="liveWpm">123</div>
         <div class="buttons">
           <div id="restartTestButton" class="" tabindex="0" onclick="this.blur();"><i class="fas fa-fw fa-redo-alt"></i></div>
@@ -360,6 +360,16 @@
             <div class="button off" tabindex="0" onclick="this.blur();">off</div>
           </div>
         </div>
+        <div class="section extraTestColor">
+          <h1>extra test color</h1>
+          <div class="text">
+            When enabled, the test words will be using the main color, instead of the text color.
+          </div>
+          <div class="buttons">
+            <div class="button on" tabindex="0" onclick="this.blur();">on</div>
+            <div class="button off" tabindex="0" onclick="this.blur();">off</div>
+          </div>
+        </div>
         <div class="section fontSize">
           <h1>font size</h1>
           <div class="text">Change the font size of the test words</div>

public/js/commandline.js

@@ -78,6 +78,13 @@ let commands = {
                 toggleFlipTestColors();
             }
         },
+        {
+            id: "toggleExtraTestColor",
+            display: "Toggle extra test color",
+            exec: () => {
+                toggleExtraTestColor();
+            }
+        },
         {
             id: "changeDifficulty",
             display: "Change difficulty...",

public/js/script.js

@@ -1235,6 +1235,14 @@ function flipTestColors(tf){
   }
 }
 
+function applyExtraTestColor(tc){
+  if(tc){
+    $("#words").addClass('extraColor');
+  }else{
+    $("#words").removeClass('extraColor');
+  }
+}
+
 
 $(document).on("click", "#top .logo", (e) => {
   changePage('test');

public/js/settings.js

@@ -26,6 +26,8 @@ function updateSettingsPage(){
     setSettingsButton('quickEnd', config.quickEnd);
     setSettingsButton('flipTestColors', config.flipTestColors);
     setSettingsButton('discordDot', config.showDiscordDot);
+    setSettingsButton('extraTestColor', config.extraTestColor);
+
 
     setActiveThemeButton();
     setActiveLanguageButton();
@@ -275,4 +277,16 @@ $(".pageSettings .section.flipTestColors .buttons .button.off").click(e => {
     setFlipTestColors(false);
     showNotification('Flip test colors off', 1000);
     setSettingsButton('flipTestColors', config.flipTestColors);
+})
+
+//extra color
+$(".pageSettings .section.extraTestColor .buttons .button.on").click(e => {
+    setExtraTestColor(true);
+    showNotification('Extra test color on', 1000);
+    setSettingsButton('extraTestColor', config.extraTestColor);
+})
+$(".pageSettings .section.extraTestColor .buttons .button.off").click(e => {
+    setExtraTestColor(false);
+    showNotification('Extra test color off', 1000);
+    setSettingsButton('extraTestColor', config.extraTestColor);
 })

public/js/userconfig.js

@@ -57,6 +57,7 @@ function loadConfigFromCookie() {
         setQuickEnd(newConfig.quickEnd,true);
         setFlipTestColors(newConfig.flipTestColors,true);
         setDiscordDot(newConfig.hideDiscordDot,true);
+        setExtraTestColor(newConfig.extraTestColor,true);
         if(newConfig.resultFilters == null || newConfig.resultFilters == undefined){
             newConfig.resultFilters = ["all"];
         }
@@ -169,6 +170,22 @@ function toggleFlipTestColors(){
     saveConfigToCookie();
 }
 
+//extra color
+function setExtraTestColor(extra,nosave){
+    if(extra == undefined){
+        extra = false;
+    }
+    config.extraTestColor = extra;
+    applyExtraTestColor(extra);
+    if(!nosave) saveConfigToCookie();
+}
+
+function toggleExtraTestColor(){
+    config.extraTestColor = !config.extraTestColor;
+    applyExtraTestColor(config.extraTestColor);
+    saveConfigToCookie();
+}
+
 function setCaretStyle(caretStyle, nosave) {
     if (caretStyle == null || caretStyle == undefined) {
         caretStyle = 'default';

public/themes/bliss.css

@@ -3,7 +3,7 @@
   --main-color: #665957;
   --caret-color: #f0d3c9;
   --sub-color: #f0d3c9;
-  --text-color: #665957;
+  --text-color: #fff;
   --error-color: #bd4141;
   --error-extra-color: #883434; 
 }

public/themes/laser.css

@@ -3,7 +3,7 @@
     --main-color: #009eaf;
     --caret-color: #009eaf;
     --sub-color: #b82356;
-    --text-color: #009eaf;
+    --text-color: #dbe7e8;
     --error-color: #a8d400;
     --error-extra-color: #668000;
 }

public/themes/miami.css

@@ -2,7 +2,7 @@
     --bg-color: #f35588;
     --main-color: #05dfd7;
     --caret-color: #a3f7bf;
-    --text-color: #05dfd7;
+    --text-color: #231e20;
     --sub-color: #fff591;
     --error-color: #9d72ff;
     --error-extra-color: #7353bd;

public/themes/miami_nights.css

@@ -2,7 +2,7 @@
     --bg-color: #18181a;
     --main-color: #e4609b;
     --caret-color: #e4609b;
-    --sub-color: #47bac0;
+    --sub-color: #fff;
     --text-color: #e4609b;
     --error-color: #fff591;
     --error-extra-color: #b6af68;

public/themes/red_samurai.css

@@ -3,7 +3,7 @@
     --main-color: #c79e6e;
     --caret-color: #c79e6e;
     --sub-color: #55131b;
-    --text-color: #c79e6e;
+    --text-color: #e2dad0;
     --error-color: #da3333;
     --error-extra-color: #791717;
 }

public/themes/terminal.css

@@ -3,7 +3,7 @@
     --caret-color: #79a617;
     --main-color: #79a617;
     --sub-color: #48494b;
-    --text-color: #79a617;
+    --text-color: #e7eae0;
     --error-color: #a61717;
     --error-extra-color: #731010;
 }