diff --git a/apps/client/src/plugins/DocumentHandler/utils/ContentComponentFactory.js b/apps/client/src/plugins/DocumentHandler/utils/ContentComponentFactory.js
index dfd70b48c..cb93d75da 100644
--- a/apps/client/src/plugins/DocumentHandler/utils/ContentComponentFactory.js
+++ b/apps/client/src/plugins/DocumentHandler/utils/ContentComponentFactory.js
@@ -243,7 +243,7 @@ export const BlockQuote = ({ blockQuoteTag, defaultColors }) => {
       const bgColorItem = blockQuoteTag.attributes.getNamedItem(
         "data-background-color"
       );
-      if (bgColorItem) {
+      if (bgColorItem.value) {
         const textColor = theme.palette.getContrastText(bgColorItem.value);
         blockQuoteTag.setAttribute("data-text-color", textColor);
       }
@@ -347,7 +347,7 @@ export const AccordionSection = ({ blockQuoteTag, defaultColors }) => {
     const bgColorItem = blockQuoteTag.attributes.getNamedItem(
       "data-background-color"
     );
-    if (bgColorItem) {
+    if (bgColorItem.value) {
       const textColor = theme.palette.getContrastText(bgColorItem.value);
       blockQuoteTag.setAttribute("data-text-color", textColor);
     }
@@ -742,7 +742,7 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
     return { mapLink, headerIdentifier, documentLink, externalLink, hoverLink };
   };
 
-  const getHoverLink = (hoverLink, tagText) => {
+  const HoverLink = ({ hoverLink, tagText }) => {
     return (
       <HajkToolTip title={hoverLink}>
         <abbr
@@ -757,7 +757,10 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
     );
   };
 
-  const getExternalLink = (externalLink) => {
+  const ExternalLink = ({ externalLink }) => {
+    // Grab the theme to determine current light/dark mode
+    const theme = useTheme();
+
     return (
       <Button
         startIcon={
@@ -770,7 +773,10 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
         }
         sx={{
           padding: 0,
-          color: "info.main",
+          color:
+            theme.palette.mode === "dark"
+              ? theme.palette.info.dark
+              : theme.palette.info.main,
           ".MuiButton-startIcon": {
             marginLeft: 0,
           },
@@ -786,7 +792,10 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
     );
   };
 
-  const getMapLink = (aTag, mapLinkOrg) => {
+  const MapLink = ({ aTag, mapLinkOrg, localObserver }) => {
+    // Grab the theme to determine current light/dark mode
+    const theme = useTheme();
+
     // Attempt to safely URI Decode the supplied string. If
     // it fails, use it as-is.
     // The reason we want probably want to decode is that the
@@ -811,7 +820,10 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
         }
         sx={{
           padding: 0,
-          color: "info.main",
+          color:
+            theme.palette.mode === "dark"
+              ? theme.palette.info.dark
+              : theme.palette.info.main,
           ...(bottomMargin && { marginBottom: 1 }),
           ".MuiButton-startIcon": {
             marginLeft: 0,
@@ -830,7 +842,10 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
     );
   };
 
-  const getDocumentLink = (headerIdentifier, documentLink, isPrintMode) => {
+  const DocumentLink = ({ headerIdentifier, documentLink, isPrintMode }) => {
+    // Grab the theme to determine current light/dark mode
+    const theme = useTheme();
+
     const titleAccess = headerIdentifier
       ? "Länk till ett visst kapitel i ett dokument"
       : "Länk till ett dokument";
@@ -847,7 +862,10 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
         }
         sx={{
           padding: 0,
-          color: "info.main",
+          color:
+            theme.palette.mode === "dark"
+              ? theme.palette.info.dark
+              : theme.palette.info.main,
           ".MuiButton-startIcon": {
             marginLeft: 0,
           },
@@ -873,20 +891,28 @@ export const CustomLink = ({ aTag, localObserver, bottomMargin }) => {
 
   if (documentLink) {
     const isPrintMode = Boolean(aTag.attributes.printMode);
-    return getDocumentLink(headerIdentifier, documentLink, isPrintMode);
+    return (
+      <DocumentLink
+        headerIdentifier={headerIdentifier}
+        documentLink={documentLink}
+        isPrintMode={isPrintMode}
+      />
+    );
   }
 
   if (mapLink) {
-    return getMapLink(aTag, mapLink, localObserver);
+    return (
+      <MapLink aTag={aTag} mapLinkOrg={mapLink} localObserver={localObserver} />
+    );
   }
 
   if (externalLink) {
-    return getExternalLink(externalLink);
+    return <ExternalLink externalLink={externalLink} />;
   }
 
   if (hoverLink) {
     const tagText = aTag.text;
-    return getHoverLink(hoverLink, tagText);
+    return <HoverLink hoverLink={hoverLink} tagText={tagText} />;
   }
 
   // If we got this far it seems that _we've been trying to parse an A tag that didn't