From 2f02af4fff72296ec1022c1af8af0fc2a803bfa0 Mon Sep 17 00:00:00 2001
From: quenousimporte <quenousimporte@riseup.net>
Date: Wed, 15 Nov 2023 21:36:02 +0100
Subject: [PATCH] drop accent color setting refactor css with vars

---
 main.js   | 18 ++++++++----------
 style.css | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/main.js b/main.js
index cf74e3f..f21c6ea 100644
--- a/main.js
+++ b/main.js
@@ -3,7 +3,6 @@ var defaultsettings =
 	fontsize: "16px",
 	fontcolor: "rgb(55, 53, 47)",
 	lineheight: "24px",
-	accentcolor: "#5AA7CE",
 	margins: "20%",
 	savedelay: 2000,
 	defaultpreviewinsplit: false,
@@ -1317,7 +1316,6 @@ function applystyle()
 	document.body.style.fontSize = settings.fontsize;
 	document.body.style.lineHeight = settings.lineheight;
 	document.body.style.color = settings.fontcolor;
-	document.body.style.caretColor = settings.accentcolor;
 	document.body.style.marginLeft = settings.margins;
 	document.body.style.marginRight = settings.margins;
 }
@@ -2106,8 +2104,8 @@ function rawline2html(line, index, options)
 	// headings
 	if (line.startsWith("#"))
 	{
-		line = line.replace(/(#* )/, "<span style='color:" + settings.accentcolor + "'>$1</span>"); // to check!
-		line = "<span style='text-shadow: " + shadow + ";'>" + line + "</span>";
+		line = line.replace(/(#* )/, "<span class='color-accent'>$1</span>");
+		line = "<span style='text-shadow:var(--shadow);'>" + line + "</span>";
 	}
 
 	// bold and italics
@@ -2116,7 +2114,7 @@ function rawline2html(line, index, options)
 	{
 		temp = line.substring(2);
 	}
-	temp = temp.replace(/\*\*([^\*]*)\*\*/g, "<span style='text-shadow: " + shadow + ";'>&#42;&#42;$1&#42;&#42;</span>");
+	temp = temp.replace(/\*\*([^\*]*)\*\*/g, "<span style='text-shadow:var(--shadow);'>&#42;&#42;$1&#42;&#42;</span>");
 	temp = temp.replace(/\*([^\*]*)\*/g, "<em>&#42;$1&#42;</em>");
 
 	if (line.startsWith("* "))
@@ -2133,7 +2131,7 @@ function rawline2html(line, index, options)
 	{
 		if (line.startsWith(marker) && marker.trim())
 		{
-			line = line.replace(marker, "<span style='color:" + settings.accentcolor + "'>" + marker + "</span>");
+			line = line.replace(marker, "<span class='color-accent'>" + marker + "</span>");
 		}
 	});
 
@@ -2157,7 +2155,7 @@ function rawline2html(line, index, options)
 	{
 		options.code = true;
 		options.language = line.substring(3);
-		line = "<div class='color-code'>" + line.replace(new RegExp("(" + options.language + ")"), "<span style='text-shadow: " + shadow + ";color:" + settings.accentcolor + ";'>$1</span>") + "</div>";
+		line = "<div class='color-code'>" + line.replace(new RegExp("(" + options.language + ")"), "<span style='text-shadow:var(--shadow);color:var(--blue);'>$1</span>") + "</div>";
 	}
 	else if (line == "```" && options.code)
 	{
@@ -2179,7 +2177,7 @@ function rawline2html(line, index, options)
 			var keywords = languagekeywords[options.language];
 			keywords.forEach(keyword =>
 			{
-				line = line.replace(new RegExp("\\b(" + keyword + ")\\b", "ig"), "<span style='text-shadow: " + shadow + ";color:" + settings.accentcolor + "'>$1</span>");
+				line = line.replace(new RegExp("\\b(" + keyword + ")\\b", "ig"), "<span style='text-shadow:var(--shadow);color:var(--blue)'>$1</span>");
 			});
 		}
 	}
@@ -2250,8 +2248,8 @@ function rawline2html(line, index, options)
 		}
 		else
 		{
-			line = line.replace(/(\(\w\))/g, "<span style='text-shadow: " + shadow + "; color:" + settings.accentcolor + "'>$1</span>");
-			line = line.replace(/(@\w*)/g, "<span style='text-shadow: " + shadow + "; color:grey'>$1</span>");
+			line = line.replace(/(\(\w\))/g, "<span style='text-shadow:var(--shadow); color:var(--blue);'>$1</span>");
+			line = line.replace(/(@\w*)/g, "<span style='text-shadow:var(--shadow); color:grey'>$1</span>");
 			line = line.replace(/(\s\+\w*)/g, "<span style='color:grey'>$1</span>");
 		}
 	}
diff --git a/style.css b/style.css
index 1e223e2..d21e901 100644
--- a/style.css
+++ b/style.css
@@ -1,10 +1,16 @@
 /* globals */
+:root {
+	--black: rgb(55, 53, 47);
+	--blue: #5AA7CE;
+	--shadow: 0.75px 0 0;
+}
 
 body {
 	margin-left: 7%;
 	margin-right: 7%;
 	background: white;
 	font-family: system-ui;
+	caret-color: var(--blue);
 }
 
 a {
@@ -144,7 +150,11 @@ body::-webkit-scrollbar-thumb {
 /* colors */
 .color-code {
 	color:lightgray;
-	background-color:rgb(55, 53, 47);
+	background-color:var(--black);
+}
+
+.color-accent {
+	color: var(--blue);
 }
 
 /* link dialog */
@@ -152,7 +162,7 @@ body::-webkit-scrollbar-thumb {
 	border-radius: 3px;
 	opacity:1;
 	color: white;
-	background-color:rgb(55, 53, 47);
+	background-color:var(--black);
 	position:absolute;
 }