diff --git a/devNotes/twine CSS b/devNotes/twine CSS
index b4d4513e589d44734b66ccee72031176732621bd..c064756c4f23a76f38c35f165bbf1eb212205982 100644
--- a/devNotes/twine CSS	
+++ b/devNotes/twine CSS	
@@ -4,6 +4,12 @@ body {
 	overflow-x: hidden;
 }
 
+/* makes HR colorflip compatible */
+hr {
+    background:#ccc;
+    border:0;
+}
+
 /* clears SugarCube's default transition */
 .passage {
     transition: none;
diff --git a/devNotes/twine JS.txt b/devNotes/twine JS.txt
index dfdd0d1e0c8dc11a17243e121fa5708f4f86dd32..df72bf4e41da531b6f73075123b02e8eab9b14dc 100644
--- a/devNotes/twine JS.txt	
+++ b/devNotes/twine JS.txt	
@@ -11629,25 +11629,54 @@ window.HSM = function() {
 	
 /*:: colorModeJS [script]*/
 
+window.flipColors = function (lightColorMap){
+	if ( !window.savedColorMap ){
+		window.savedColorMap = setColors(lightColorMap);
+	} else {
+		restoreColors(window.savedColorMap);
+		window.savedColorMap = null;
+	}
+}
+
 window.setColors = function(colorMap){
-    let props = ["color","backgroundColor","backgroundImage"];
-    let styleSheetArray = Array.from(document.styleSheets);
-    styleSheetArray.forEach( styleSheet => {
-        let cssRules = Array.from(styleSheet.cssRules);
-        cssRules.forEach( cssRule => {
-            if ( cssRule.type === 1 ){
-                props.forEach( propName => {
-                    let currentValue = cssRule.style[propName];
-                    if (
-                        currentValue != "" &&
-                        currentValue != "inherit" &&
-                        currentValue != "transparent"){
-                        cssRule.style[propName] = colorMap[currentValue] || currentValue;
-                    }
-                })
-            }
-        });
-    });
+	let originalState = [];
+	let props = ["color","backgroundColor","backgroundImage"];
+	let styleSheetArray = Array.from(document.styleSheets);
+	styleSheetArray.forEach( styleSheet => {
+		let cssRules = Array.from(styleSheet.cssRules);
+		cssRules.forEach( cssRule => {
+			if ( cssRule.type === 1 ){
+				props.forEach( propName => {
+					let currentValue = cssRule.style[propName];
+					if (
+						currentValue != "" &&
+						currentValue != "inherit" &&
+						currentValue != "transparent"){
+						let newVal = colorMap[currentValue];
+						if ( typeof newVal != "undefined" ){
+							cssRule.style[propName] = newVal;
+							originalState.push(
+								{
+									element: cssRule,
+									propName: propName,
+									value: currentValue
+								}
+							);
+						}
+					}
+				})
+			}
+		});
+	});
+	return originalState;
+}
+
+window.restoreColors = function(styleMap){
+	styleMap.forEach(
+		item => {
+			item.element.style[item.propName] = item.value
+		}
+	)
 }
 
 /*:: HTAG Macro JS [script]*/
diff --git a/src/gui/css/mainStyleSheet.tw b/src/gui/css/mainStyleSheet.tw
index 7646f51c6fffc2a3a7b832d8b34ef06ee1ece48d..d9e3d911db5be30f18c71e8db413a0fdaa2d9717 100644
--- a/src/gui/css/mainStyleSheet.tw
+++ b/src/gui/css/mainStyleSheet.tw
@@ -4,6 +4,12 @@ body {
 	overflow-x: hidden;
 }
 
+/* makes HR colorflip compatible */
+hr {
+	background:#ccc;
+	border:0;
+}
+
 /* clears SugarCube's default transition */
 .passage {
     transition: none;
diff --git a/src/js/colorModeJS.tw b/src/js/colorModeJS.tw
index 4b68f8a642b0dc102cddff2bd8809b6f0d78245d..ca282973d7cf7f1bf6c10c200044770a53158697 100644
--- a/src/js/colorModeJS.tw
+++ b/src/js/colorModeJS.tw
@@ -1,22 +1,51 @@
 :: colorModeJS [script]
 
+window.flipColors = function (lightColorMap){
+	if ( !window.savedColorMap ){
+		window.savedColorMap = setColors(lightColorMap);
+	} else {
+		restoreColors(window.savedColorMap);
+		window.savedColorMap = null;
+	}
+}
+
 window.setColors = function(colorMap){
-    let props = ["color","backgroundColor","backgroundImage"];
-    let styleSheetArray = Array.from(document.styleSheets);
-    styleSheetArray.forEach( styleSheet => {
-        let cssRules = Array.from(styleSheet.cssRules);
-        cssRules.forEach( cssRule => {
-            if ( cssRule.type === 1 ){
-                props.forEach( propName => {
-                    let currentValue = cssRule.style[propName];
-                    if (
-                        currentValue != "" &&
-                        currentValue != "inherit" &&
-                        currentValue != "transparent"){
-                        cssRule.style[propName] = colorMap[currentValue] || currentValue;
-                    }
-                })
-            }
-        });
-    });
+	let originalState = [];
+	let props = ["color","backgroundColor","backgroundImage"];
+	let styleSheetArray = Array.from(document.styleSheets);
+	styleSheetArray.forEach( styleSheet => {
+		let cssRules = Array.from(styleSheet.cssRules);
+		cssRules.forEach( cssRule => {
+			if ( cssRule.type === 1 ){
+				props.forEach( propName => {
+					let currentValue = cssRule.style[propName];
+					if (
+						currentValue != "" &&
+						currentValue != "inherit" &&
+						currentValue != "transparent"){
+						let newVal = colorMap[currentValue];
+						if ( typeof newVal != "undefined" ){
+							cssRule.style[propName] = newVal;
+							originalState.push(
+								{
+									element: cssRule,
+									propName: propName,
+									value: currentValue
+								}
+							);
+						}
+					}
+				})
+			}
+		});
+	});
+	return originalState;
+}
+
+window.restoreColors = function(styleMap){
+	styleMap.forEach(
+		item => {
+			item.element.style[item.propName] = item.value
+		}
+	)
 }
diff --git a/src/uncategorized/options.tw b/src/uncategorized/options.tw
index fd5166a07cb689e8a2713a527317a17c37f8d622..521003511022b3e2b1b594714da5861c441676b6 100644
--- a/src/uncategorized/options.tw
+++ b/src/uncategorized/options.tw
@@ -45,7 +45,7 @@ End of week autosaving is currently @@.cyan;ENABLED@@. [[Disable|Options][$autos
 <br>
 ''COLOR CONTROL''
 <br>
-<<link "flip lighting">><<run setColors(setup.lightColorMap)>><</link>> //Currently a WIP, use at own risk.//
+<<link "flip lighting">><<run flipColors(setup.lightColorMap)>><</link>> //Currently a WIP, use at own risk.//
 
 <br>
 ''IMAGES''