diff --git a/source/src/pages/Search/TagSelect.tsx b/source/src/pages/Search/TagSelect.tsx index 1ef26b0..cef8e8d 100644 --- a/source/src/pages/Search/TagSelect.tsx +++ b/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, }, }), }} diff --git a/source/src/styles/globalStyle.tsx b/source/src/styles/globalStyle.tsx index 7b249b3..7010f6e 100644 --- a/source/src/styles/globalStyle.tsx +++ b/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; diff --git a/source/src/styles/theming.ts b/source/src/styles/theming.ts index 2e965c0..ec493cd 100644 --- a/source/src/styles/theming.ts +++ b/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`