improved anchor style

source/src/pages/Search/TagSelect.tsx

@@ -103,7 +103,7 @@ const TagSelect = (props: TagSelectProps) => {
 							multiValue: (styles) => ({
 								...styles,
 								color: "white",
-								backgroundColor: theming.color.linkColor,
+								backgroundColor: theming.light.linkColor,
 								borderRadius: "5px",
 							}),
 							multiValueLabel: (styles) => ({
@@ -116,7 +116,7 @@ const TagSelect = (props: TagSelectProps) => {
 								marginLeft: "0.2rem",
 								":hover": {
 									backgroundColor: "white",
-									color: theming.color.linkColor,
+									color: theming.light.linkColor,
 								},
 							}),
 						}}

source/src/styles/globalStyle.tsx

@@ -10,13 +10,28 @@ import theming from "./theming"
 const anchorCSS = css`
 	a {
 		text-decoration: none;
-		color: ${theming.color.linkColor};
+
+		color: ${(props) =>
+			theming.theme(props.theme.currentTheme, {
+				light: theming.light.linkColor,
+				dark: theming.dark.linkColor,
+			})};
+
+		&:hover {
+			color: ${(props) =>
+				theming.theme(props.theme.currentTheme, {
+					light: theming.dark.linkColor,
+					dark: theming.light.linkColor,
+				})};
+		}
 	}
 
-	// header anchor offset to compensate for navbar
+	/* The "#" thingy used beside headers */
 	a.header-anchor {
+		/* compensate for navbar height*/
 		display: inline-block;
 		margin-top: 4.5rem;
+
 		color: ${(props) =>
 			theming.theme(props.theme.currentTheme, {
 				light: "lightgray",
@@ -24,6 +39,7 @@ const anchorCSS = css`
 			})};
 	}
 
+	/* footnote anchors */
 	a[id^="fnref"] {
 		display: inline;
 		padding-top: 4.5rem;

source/src/styles/theming.ts

@@ -29,9 +29,6 @@ const theming = {
 		screen_size1: "1000px",
 		screen_size2: "1500px",
 	},
-	color: {
-		linkColor: "#4592F7",
-	},
 	dark: {
 		backgroundColor0: "#202225",
 		backgroundColor1: "#36393F",
@@ -39,6 +36,7 @@ const theming = {
 		color0: "#FFFFFF",
 		color1: "#EEEEEE",
 		color2: "#CCC",
+		linkColor: "#66AAFF",
 	},
 	light: {
 		backgroundColor0: "#FFFFFF",
@@ -47,6 +45,7 @@ const theming = {
 		color0: "#000000",
 		color1: "#111111",
 		color2: "#555",
+		linkColor: "#4592F7",
 	},
 	styles: {
 		hoverCard: css`