From a92c34d9df1f67bb2e6980073d6b7961ed4ff044 Mon Sep 17 00:00:00 2001
From: Paige Calvert <paige@replicated.com>
Date: Wed, 16 Apr 2025 10:47:02 -0600
Subject: [PATCH] match styles to open in chatgpt dropdown

---
 src/theme/EditThisPage/index.js          | 23 +++++++++-
 src/theme/EditThisPage/styles.module.css | 56 ++++++++++++++++++++----
 2 files changed, 69 insertions(+), 10 deletions(-)

diff --git a/src/theme/EditThisPage/index.js b/src/theme/EditThisPage/index.js
index 35b0c4bf1c..8138bad845 100644
--- a/src/theme/EditThisPage/index.js
+++ b/src/theme/EditThisPage/index.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Translate from "@docusaurus/Translate";
 import { ThemeClassNames } from "@docusaurus/theme-common";
 import ReportIcon from "../../../static/images/report.svg";
@@ -17,6 +17,25 @@ export default function EditThisPage({ editUrl }) {
     typeof window !== "undefined"
       ? url.substring(url.lastIndexOf("/") + 1)
       : "";
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+  
+  // Check for dark theme
+  useEffect(() => {
+    const checkTheme = () => {
+      setIsDarkTheme(document.documentElement.getAttribute('data-theme') === 'dark');
+    };
+    
+    checkTheme();
+    
+    // Listen for theme changes
+    const observer = new MutationObserver(checkTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme']
+    });
+    
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <div className={styles.githubLinksWrapper}>
@@ -42,7 +61,7 @@ export default function EditThisPage({ editUrl }) {
         target="_blank"
         rel="noreferrer noopener"
         className={ThemeClassNames.common.editThisPage}
-        style={{ textAlign: "right", textDecoration: "none" }}
+        style={{ textDecoration: "none" }}
       >
         <div className={styles.iconTextWrapper}>
           <ReportIcon className={styles.icon} />
diff --git a/src/theme/EditThisPage/styles.module.css b/src/theme/EditThisPage/styles.module.css
index f2bb423a7a..bed9697dca 100644
--- a/src/theme/EditThisPage/styles.module.css
+++ b/src/theme/EditThisPage/styles.module.css
@@ -9,31 +9,71 @@
   width: 18px;
   height: 18px;
   margin-right: 7px;
-  fill:#6DD2D2
+  fill: var(--ifm-color-gray-800, #444950);
+  transition: fill 0.2s ease;
 }
 
 .iconTextWrapper { 
   display: flex;
   align-items: center;
-  border: 2px solid #6DD2D2;
-  padding: 8px;
+  border: 1px solid var(--ifm-color-gray-400, #cfd3d9);
+  padding: 0.45rem 0.5rem;
   border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--ifm-color-gray-800, #444950);
+  background-color: transparent;
+  transition: all 0.2s ease;
 }
+
 .iconTextWrapper:hover { 
-  color: #ffffff; 
-  background-color: #6DD2D2;
-  fill:#ffffff;
+  background-color: var(--ifm-color-gray-100, #f5f6f7);
+  border-color: var(--ifm-color-gray-500, #a8acb3);
   cursor: pointer;
 }
+
+.iconTextWrapper:active {
+  transform: translateY(1px);
+}
+
+.iconTextWrapper:focus {
+  box-shadow: 0 0 0 2px var(--ifm-color-gray-300, #dadde1);
+  outline: none;
+}
+
 .iconTextWrapper:hover .icon { 
-  fill:#ffffff;
+  fill: var(--ifm-color-gray-800, #444950);
 }
 
 .githubLinksWrapper { 
-  display:flex;
+  display: flex;
   gap: 10px;
 }
 
+/* Dark mode styles */
+html[data-theme='dark'] .iconTextWrapper {
+  color: var(--ifm-color-gray-300, #dadde1);
+  border-color: var(--ifm-color-gray-600, #606770);
+  background-color: transparent;
+}
+
+html[data-theme='dark'] .icon {
+  fill: var(--ifm-color-gray-300, #dadde1);
+}
+
+html[data-theme='dark'] .iconTextWrapper:hover {
+  background-color: var(--ifm-color-gray-800, #444950);
+  border-color: var(--ifm-color-gray-500, #a8acb3);
+}
+
+html[data-theme='dark'] .iconTextWrapper:focus {
+  box-shadow: 0 0 0 2px var(--ifm-color-gray-700, #606770);
+}
+
+html[data-theme='dark'] .iconTextWrapper:hover .icon {
+  fill: var(--ifm-color-gray-300, #dadde1);
+}
+
 @media (max-width: 500px) {
   .githubLinksWrapper {
     flex-direction: column;