commit

packages/guider/src/client/components/markdown/inline.tsx

@@ -6,7 +6,7 @@ export function MarkdownStrong(props: MarkdownProps) {
     <strong
       {...props.attrs}
       className={classNames(
-        'gd-font-semibold gd-text-textHeading gd-text-opacity-85',
+        'gd-font-semibold gd-text-textHeading gd-text-opacity-85 dark:text-black',
         props.attrs.class,
       )}
     >

packages/guider/src/client/components/markdown/paragraph.tsx

@@ -9,7 +9,7 @@ export type MarkdownParagraphProps = {
 
 export function MarkdownParagraph(props: MarkdownParagraphProps) {
   return (
-    <p className="gd-mb-3 gd-leading-relaxed" {...props.attrs}>
+    <p className="gd-mb-3 gd-leading-relaxed sub-description" {...props.attrs}>
       {props.children}
     </p>
   );

packages/guider/src/client/partials/header/header.tsx

@@ -17,7 +17,10 @@ export function HeaderInternal() {
   const [isDark, setIsDark] = useState(false);
   const { site, settings } = useGuider(ctx?.meta);
 
-  console.log(settings.colors.background);
+  useEffect(() => {
+    // Apply theme based on state
+    document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+  }, [isDark]);
 
   const [isScrolledFromTop, setIsScrolledFromTop] = useState(false);
 
@@ -35,42 +38,32 @@ export function HeaderInternal() {
   return (
     <div
       className={classNames(
-        'gd-sticky gd-z-50 gd-top-0 gd-bg-bg gd-transition-colors gd-duration-300 gd-mb-8',
+        'gd-sticky gd-z-50 gd-top-0 gd-transition-colors gd-duration-300 gd-mb-8',
         isScrolledFromTop ? 'gd-bg-opacity-100' : 'gd-bg-opacity-0',
+        { 'gd-dark': isDark, 'gd-light': !isDark }
       )}
     >
       <header
         className={classNames(
           'gd-max-w-[1480px] gd-mx-auto',
           'gd-p-6 gd-pb-0 gd-border-b gd-border-line',
-          isScrolledFromTop ? 'gd-bg-opacity-100' : 'gd-bg-opacity-0',
+          isScrolledFromTop ? 'gd-bg-opacity-100' : 'gd-bg-opacity-0'
         )}
       >
         <div className="gd-fixed neato-guider-overlay gd-transition-opacity gd-duration-150 gd-opacity-0 gd-inset-0 gd-bg-gradient-to-b gd-from-black/80 gd-to-transparent gd-z-[60] gd-pointer-events-none" />
         <div className="gd-flex gd-justify-between gd-mb-6 gd-items-center">
-          <div className="gd-flex gd-items-center">
+          <div>
             <GuiderLogo />
-            {site.dropdown.length > 0 ? (
-              <>
-                <div className="gd-w-px gd-h-6 gd-bg-line gd-rotate-12 gd-mx-4" />
-                <HeaderDropdown dropdown={site.dropdown} />
-              </>
-            ) : null}
-            <HeaderSearch />
           </div>
-          <div className="gd-hidden md:gd-flex gd-items-center gd-space-x-3">
-            <HeaderNav items={site.navigation} />
-            {site.github ? (
-              <GithubDisplay
-                org={site.github.split('/')[0]}
-                repo={site.github.split('/', 2)[1]}
-              />
-            ) : null}
+          <HeaderSearch />
+          <div className='gd-flex gd-items-center gd-space-x-6'>
+           <h4 className='gd-text-sm'>Email Support</h4>
+              <button className='gd-text-sm dark:gd-bg-transparent dark:gd-border dark:gd-border-[#2E5CFF] dark:gd-bg-[#0E1226] dark:gd-text-[#2E5CFF] gd-bg-[#2E5CFF] gd-text-white gd-py-1 gd-px-4 gd-rounded-full'>Polymarket</button>
+            {isDark ?
+              <Moon onClick={() => setIsDark(false)} /> :
+              <Sun onClick={() => setIsDark(true)} />
+            }
           </div>
-          {/* {isDark ?
-            <Moon onClick={() => setIsDark(false)} /> :
-            <Sun onClick={() => setIsDark(true)} />
-          } */}
           <div className="gd-flex md:gd-hidden gd-items-center">
             {site.navigation.length > 0 || site.github ? (
               <TopMobileNav

packages/guider/src/client/partials/header/search/button.tsx

@@ -5,7 +5,7 @@ export function SearchButton(props: { onClick?: () => void }) {
     <button
       type="button"
       onClick={props.onClick}
-      className="!gd-bg-bgDark gd-gap-2 gd-py-1.5 gd-px-2 gd-text-left md:gd-w-48 hover:!gd-bg-bgLight active:gd-scale-95 hover:gd-text-textHeading gd-transition-[color,transform] gd-border gd-border-bgLightest gd-rounded-md gd-flex gd-items-center"
+      className="header-search-btn !gd-bg-bgDark gd-gap-2 gd-py-1.5 gd-px-2 gd-text-left md:gd-w-48 hover:!gd-bg-bgLight active:gd-scale-95 hover:gd-text-textHeading gd-transition-[color,transform] gd-border gd-border-bgLightest gd-rounded-md gd-flex gd-items-center"
     >
       <Icon
         icon="mingcute:search-2-fill"

packages/guider/src/client/partials/layout/theme.tsx

@@ -55,7 +55,7 @@ export function ThemeProvider() {
   }, [serializedSettings, overwrittenColors]);
   return (
     <Helmet helmetData={helmetData}>
-      <body
+      <body className='dark:gd-bg-red-300'
         style={
           Object.entries(style)
             .map((v) => v.join(': '))

packages/guider/src/client/partials/logo/logo.tsx

@@ -11,7 +11,8 @@ export function LogoInternal() {
 
   const content = (
     <span className="gd-text-base gd-font-bold gd-text-textHeading">
-      <img src={logoSrc} alt={site.logo.name ?? 'Guider'} style={{ height: 'auto', maxHeight: '50px' }} />
+      <img className='dark:gd-block gd-hidden site-logo' src={logoSrc} alt={site.logo.name ?? 'Guider'} />
+      <img className='dark:gd-hidden gd-block site-logo' src={"https://mintlify.s3-us-west-1.amazonaws.com/polymarket/logo/light.svg"} alt={site.logo.name ?? 'Guider'} />
     </span>
   );
   // const content = (

packages/guider/src/styles/global.css

@@ -2,9 +2,9 @@ html {
   scrollbar-gutter: stable;
 }
 
-body {
-	@apply gd-bg-bg gd-text-text gd-relative;
-}
+/* body {
+  @apply gd-bg-bg gd-text-text gd-relative;
+} */
 
 #__next {
   @apply gd-min-h-screen;
@@ -41,3 +41,137 @@ body[data-mobile-stop-overflow="true"] {
   /* For some reason the styles don't get applied without the width */
   width: 13px;
 }
+
+
+p.gd-font-bold.gd-mb-2.gd-text-primary.gd-text-sm {
+  font-size: 14px;
+  color: #2E5CFF;
+  font-weight: 500;
+}
+
+a.gd-flex.gd-items-center.gd-w-full.gd-py-1\.5.gd-text-sm.gd-px-4.gd-rounded-lg.hover\:gd-text-textLight.hover\:gd-bg-bgLight {
+  color: #99A1B1;
+
+}
+
+a.neato-guider-active-link.gd-flex.gd-items-center.gd-w-full.gd-py-1\.5.gd-text-sm.gd-px-4.gd-rounded-lg.gd-bg-bgLightest.gd-text-primary {
+  background-color: var(--menu-bg-color);
+  color: #2E5CFF;
+  font-weight: 500 !important;
+}
+
+a.hover\:gd-text-textLight.gd-transition-colors.gd-duration-100.gd-text-primary {
+  color: #2E5CFF;
+}
+
+span.gd-size-7.gd-flex.gd-text-sm.gd-border-t-2.gd-justify-center.gd-items-center.gd-rounded-md.gd-transition-\[background-color\,color\,border-color\].gd-duration-100.group-hover\:gd-bg-bgLightest.group-hover\:gd-text-textHeading.gd-border-bgLightest.gd-bg-bgLight {
+  background-color: transparent !important;
+  border: 0.5px solid var(--box-border-color);
+}
+
+span.gd-size-7.gd-flex.gd-text-sm.gd-border-t-2.gd-justify-center.gd-items-center.gd-rounded-md.gd-transition-\[background-color\,color\,border-color\].gd-duration-100.group-hover\:gd-bg-bgLightest.group-hover\:gd-text-textHeading.gd-border-bgLightest.gd-bg-bgLight .iconify-icon {
+  color: #8E99B2 !important
+}
+
+a.hover\:gd-text-textLight.gd-transition-colors.gd-duration-100 {
+  color: #99A1B1;
+}
+
+.sub-description,
+.sub-description strong {
+  font-size: 18px;
+  color: var(--text-color) !important;
+  font-weight: 400;
+  line-height: 28px;
+}
+
+a.pl-4.group.flex.items-center.lg\:text-sm.lg\:leading-6.mb-5.sm\:mb-4.font-medium.text-gray-600.hover\:text-gray-900.dark\:text-gray-400.dark\:hover\:text-gray-300{
+  color: var(--text-color) !important;
+
+}
+
+article h3 {
+  font-weight: 500 !important;
+}
+
+/* body {
+  background-color: #0A0B10 !important;
+} */
+
+button.header-search-btn {
+  width: 450px;
+  text-align: left;
+  border: 1px solid var(--box-border-color);
+  border-radius: 9px;
+  padding: 5px 15px;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
+  background-color: var(--background-color) !important;
+}
+
+button.header-search-btn svg{
+  color: white;
+}
+
+button.header-search-btn .gd-opacity-50{
+  opacity: 1 !important;
+}
+
+/* header .gd-flex.gd-justify-between.gd-mb-6.gd-items-center .gd-flex.gd-items-center{
+  width: 100%;
+} */
+.site-logo{
+  width: 130px;
+}
+header .gd-flex.gd-justify-between.gd-mb-6.gd-items-center .gd-flex.gd-items-center div:nth-child(1){
+  width: 20%;
+  background-color: var(--background-color) !important;
+}
+
+header .gd-flex.gd-justify-between.gd-mb-6.gd-items-center .gd-flex.gd-items-center div:nth-child(4){
+  width: 30%;
+}
+
+.gd-w-px.gd-h-6.gd-bg-line.gd-rotate-12.gd-mx-4{
+  opacity: 0;
+}
+
+.gd-border-line{
+  border-color: var(--box-border-color) !important;
+}
+
+span.gd-flex-1.gd-transition-colors.gd-duration-100,
+header .gd-flex.gd-justify-between.gd-mb-6.gd-items-center .gd-flex.gd-items-center div:nth-child(1) span,
+header span.gd-text-right.gd-text-xs.gd-hidden.md\:gd-inline-block,
+header span.gd-flex-1.gd-hidden.md\:gd-inline-block{
+  color: #99A1B1;
+}
+
+
+/* Light theme */
+:root {
+  --background-color: #ffffff;
+  --text-color: #374256;
+  --heading-text-color: #121A2E;
+  --menu-bg-color: #EAEEFF;
+  --box-border-color: #DFE3EC;
+}
+
+/* Dark theme */
+[data-theme='dark'] {
+  --background-color: #0A0B10;
+  --text-color: #99A1B1;
+  --heading-text-color: #DFE3EC;
+  --menu-bg-color: #0E1328;
+  --box-border-color: #22252a;
+}
+
+/* Apply theme variables */
+body {
+  background-color: var(--background-color) ;
+  color: var(--text-color);
+}
+
+.gd-text-textHeading{
+  color: var(--heading-text-color) !important;
+
+}