feat: Dark Mode (#11077)

* dark mode wip * add theme switcher * adjust tailwind dark mode strategy * fix mobile menu dark mode * use global .dark selector instead of media query * fix useEffect warning * add dark mode to platformGrid * use CSS varialble * adjust tooltip dark mode styles * fix relayMetrics dark mode styles * top level suppressHydrationWarning Co-authored-by: Charly Gomez <[email protected]> * fixes * add elevated backgrounds to cards on home page on dark mode --------- Co-authored-by: Charly Gomez <[email protected]>
getsentry · Aug 28, 2024 · b6e1a71 · b6e1a71
1 parent 91c7770
commit b6e1a71
Show file tree

Hide file tree

Showing 29 changed files with 357 additions and 117 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -6,9 +6,12 @@
 
 .radix-themes {
   --cursor-button: pointer;
-  --iris-9: var(--accent-purple);
-  --iris-a9: var(--accent-purple);
+  --iris-9: var(--accent);
+  --iris-a9: var(--accent);
   --shadow-6: 0px 4px 16px 0px rgba(31, 22, 51, 0.1);
+  --foreground-secondary: var(--gray-11);
+  --accent: var(--accent-purple);
+  --foreground: var(--gray-12);
   ::selection {
     background-color: var(--accent-a7);
   }
@@ -17,6 +20,17 @@
   }
 }
 
+.dark {
+  .radix-themes {
+    --accent: var(--accent-11);
+  }
+
+  --codeColor: #ff88b6 !important;
+  --border-color: var(--gray-a2) !important;
+  --tw-prose-bold: var(--foreground) !important;
+  --darkPurple: var(--foreground) !important;
+}
+
 .icon {
   margin-left: 0.25em;
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,6 +5,8 @@ import type {Metadata} from 'next';
 import {Rubik} from 'next/font/google';
 import Script from 'next/script';
 
+import {ThemeProvider} from 'sentry-docs/components/theme-provider';
+
 const rubik = Rubik({
   weight: ['400', '500', '700'],
   style: ['normal', 'italic'],
@@ -29,10 +31,17 @@ export const metadata: Metadata = {
 export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html lang="en">
-      <body className={`${rubik.variable} text-darkPurple`}>
-        <Theme accentColor="iris" grayColor="sand" radius="large" scaling="95%">
-          {children}
-        </Theme>
+      <body className={`${rubik.variable}`}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Theme accentColor="iris" grayColor="sand" radius="large" scaling="95%">
+            {children}
+          </Theme>
+        </ThemeProvider>
       </body>
       <Script
         defer

diff --git a/apps/changelog/src/app/layout.tsx b/apps/changelog/src/app/layout.tsx
@@ -33,7 +33,7 @@ export const metadata: Metadata = {
 export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html lang="en">
-      <body className={`${rubik.variable} text-darkPurple`}>
+      <body className={`${rubik.variable}`}>
         <Theme accentColor="iris" grayColor="sand" radius="large" scaling="95%">
           {children}
         </Theme>

diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "micromark": "^4.0.0",
     "next": "14.2.4",
     "next-mdx-remote": "^4.4.1",
+    "next-themes": "^0.3.0",
     "nextjs-toploader": "^1.6.6",
     "parse-numeric-range": "^1.3.0",
     "platformicons": "^6.0.2",

diff --git a/src/components/breadcrumbs/style.module.scss b/src/components/breadcrumbs/style.module.scss
@@ -7,7 +7,7 @@
 
   a {
     text-decoration: none;
-    color: var(--gray-11);
+    color: var(--foreground-secondary);
 
     &:hover {
       color: var(--accent-purple);
@@ -21,5 +21,5 @@
   font-size: 12px;
   display: inline-block;
   margin-right: 6px;
-  color: var(--gray-10);
+  color: var(--foreground-secondary);
 }
diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx
@@ -54,11 +54,12 @@ export function DocPage({
         <main className="main-content flex w-full mt-[var(--header-height)] flex-1 mx-auto">
           <div
             className={[
-              'mx-auto lg:mx-0 pt-6 px-6 prose max-w-full prose-slate prose-a:no-underline hover:prose-a:underline',
-              'prose-code:font-normal prose-code:font-mono marker:text-accent-purple prose-li:my-1',
-              'prose-headings:mt-0 prose-headings:font-medium prose-headings:relative',
-              'prose-blockquote:font-normal prose-blockquote:border-l-[3px] prose-em:font-medium',
+              'mx-auto lg:mx-0 pt-6 px-6 prose dark:prose-invert max-w-full text-[var(--gray-12)] prose-a:no-underline hover:prose-a:underline',
+              'prose-code:font-normal prose-code:font-mono marker:text-[var(--accent)] prose-li:my-1',
+              'prose-headings:mt-0 prose-headings:font-medium prose-headings:relative prose-headings:text-[var(--gray-12)]',
+              'prose-blockquote:font-normal prose-blockquote:border-l-[3px] prose-em:font-medium prose-blockquote:text-[var(--gray-12)]',
               'prose-img:my-2',
+              'prose-strong:text-[var(--gray-12)]',
               fullWidth ? 'max-w-none w-full' : 'w-[75ch] xl:max-w-[calc(100%-250px)]',
             ].join(' ')}
           >

diff --git a/src/components/docPage/type.scss b/src/components/docPage/type.scss
@@ -1,16 +1,23 @@
+// dark mode
+.dark .prose {
+  --heading-color: var(--gray-12);
+}
+
 .prose {
+  --heading-color: var(--darkPurple);
+  --link-decoration: none;
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
+    color: var(--heading-color);
     &:hover .anchorlink {
       opacity: 1;
     }
 
     a {
-      text-decoration: none;
       font-weight: 500;
     }
 
@@ -19,13 +26,14 @@
     }
 
     a.autolink-heading {
-      color: var(--darkPurple);
+      color: var(--heading-color);
     }
 
     code {
       color: var(--darkPurple);
       font-weight: 400;
-      background-color: var(--gray-100);
+      background-color: var(--gray-1);
+      border: 1px solid var(--gray-a4);
       padding: 3px 6px;
       border-radius: 4px;
       white-space: nowrap;
@@ -48,7 +56,7 @@
   hgroup h2 {
     font-weight: 300;
     font-size: 1.3rem;
-    color: #3c4257;
+    color: var(--foreground-secondary);
     line-height: 2rem;
     margin-bottom: 1.75rem;
   }
@@ -84,7 +92,7 @@
   }
 
   a {
-    color: var(--accent-9);
+    color: var(--accent);
     font-weight: normal;
 
     img {
@@ -125,7 +133,7 @@
   img {
     border: 1px solid var(--border-color);
     border-radius: 4px;
-    box-shadow: 0 2px rgba(222, 226, 230, 0.5);
+    box-shadow: 0 2px var(--gray-a4);
   }
 
   ol ol,
@@ -143,7 +151,7 @@
 
     td,
     th {
-      border: 1px solid var(--border-color);
+      border: 1px solid var(--gray-4);
       padding: 0.75rem;
       vertical-align: top;
     }

diff --git a/src/components/expandable.tsx b/src/components/expandable.tsx
@@ -80,7 +80,7 @@ export function Expandable({title, children, permalink}: Props) {
     return () => {
       window.removeEventListener('hashchange', onHashChange);
     };
-  }, []);
+  }, [title, permalink]);
 
   return (
     <ExpandableWrapper>

diff --git a/src/components/githubCTA/styles.module.css b/src/components/githubCTA/styles.module.css
@@ -1,10 +1,13 @@
 .cta {
-  background: var(--accent-2);
+  background: var(--accent-a2);
   margin-top: 4rem;
   margin-bottom: 2rem;
   padding: 1rem 1.25rem;
   border-radius: 0.25em;
   small {
     font-size: 0.9rem;
   }
+  strong {
+    color: var(--foreground);
+  }
 }
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -8,6 +8,7 @@ import sidebarStyles from './sidebar/style.module.scss';
 import {MobileMenu} from './mobileMenu';
 import {NavLink} from './navlink';
 import {Search} from './search';
+import {ThemeToggle} from './theme-toggle';
 
 export const sidebarToggleId = sidebarStyles['navbar-menu-toggle'];
 
@@ -19,7 +20,7 @@ type Props = {
 
 export function Header({pathname, searchPlatforms, noSearch}: Props) {
   return (
-    <header className="bg-white h-[var(--header-height)] w-full z-50 border-b border-gray fixed top-0">
+    <header className="bg-[var(--gray-1)] h-[var(--header-height)] w-full z-50 border-b border-[var(--gray-a3)] fixed top-0">
       {/* define a header-height variable for consumption by other components */}
       <style>{':root { --header-height: 80px; }'}</style>
       <nav className="mx-auto px-6 lg:px-8 py-2 flex items-center text-primary">
@@ -32,7 +33,7 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
               className="inline-flex items-center cursor-pointer"
             >
               <HamburgerMenuIcon
-                className="inline text-[var(--gray-10)]"
+                className="inline dark:text-[var(--foreground)] text-[var(--gray-10)]"
                 strokeWidth="1.8"
                 width="22"
                 height="22"
@@ -43,10 +44,15 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
         <a
           href="/"
           title="Sentry error monitoring"
-          className="flex flex-shrink-0 items-center lg:w-[calc(var(--sidebar-width,300px)-2rem)] text-2xl font-medium text-darkPurple"
+          className="flex flex-shrink-0 items-center lg:w-[calc(var(--sidebar-width,300px)-2rem)] text-2xl font-medium text-[var(--foreground)]"
         >
           <div className="h-full pb-[6px]">
-            <Image src={SentryLogoSVG} alt="Sentry's logo" width={40} className="h-16" />
+            <Image
+              src={SentryLogoSVG}
+              alt="Sentry's logo"
+              width={40}
+              className="h-16 dark:invert"
+            />
           </div>
           Docs
         </a>
@@ -65,6 +71,7 @@ export function Header({pathname, searchPlatforms, noSearch}: Props) {
           >
             Get Started
           </NavLink>
+          <ThemeToggle />
         </div>
         <div className="lg-xl:hidden ml-auto">
           <MobileMenu pathname={pathname} searchPlatforms={searchPlatforms} />

diff --git a/src/components/home.tsx b/src/components/home.tsx
@@ -59,7 +59,7 @@ export async function Home() {
         <h2 className="text-2xl mt-16 mb-6 font-medium">Get to know us</h2>
         <div className="flex flex-wrap gap-6">
           <Link href="/product/sentry-basics/" className="w-full">
-            <div className="flex flex-col md:flex-row shadow p-6 rounded gap-4">
+            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4">
               <Image src={RocketImage} height={64} alt="Rocket image" />
               <div className="space-y-2">
                 <h3 className="text-xl font-medium">What is Sentry?</h3>
@@ -71,7 +71,7 @@ export async function Home() {
             </div>
           </Link>
           <Link href="/organization" className="w-full md:w-[calc(50%-12px)]">
-            <div className="flex flex-col md:flex-row shadow p-6 rounded gap-4 h-full">
+            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
               <Image
                 src={OrganizationImage}
                 height={64}
@@ -85,7 +85,7 @@ export async function Home() {
             </div>
           </Link>
           <Link href="/pricing" className="w-full md:w-[calc(50%-12px)]">
-            <div className="flex flex-col md:flex-row shadow p-6 rounded gap-4 h-full">
+            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
               <Image
                 src={CalculatorImage}
                 height={64}
@@ -99,7 +99,7 @@ export async function Home() {
             </div>
           </Link>
           <Link href="/api" className="w-full md:w-[calc(50%-12px)]">
-            <div className="flex flex-col md:flex-row shadow p-6 rounded gap-4 h-full">
+            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
               <Image
                 src={PlugImage}
                 height={64}
@@ -113,7 +113,7 @@ export async function Home() {
             </div>
           </Link>
           <Link href="/cli" className="w-full md:w-[calc(50%-12px)]">
-            <div className="flex flex-col md:flex-row shadow p-6 rounded gap-4 h-full">
+            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
               <Image
                 src={TerminalImage}
                 height={64}
@@ -127,7 +127,7 @@ export async function Home() {
             </div>
           </Link>
           <Link href="/security-legal-pii" className="w-full md:w-[calc(50%-12px)]">
-            <div className="flex flex-col md:flex-row shadow p-6 rounded gap-4 h-full">
+            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
               <Image
                 src={SecurityImage}
                 height={64}
@@ -141,7 +141,7 @@ export async function Home() {
             </div>
           </Link>
           <Link href="/concepts" className="w-full md:w-[calc(50%-12px)]">
-            <div className="flex flex-col md:flex-row shadow p-6 rounded gap-4 h-full">
+            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
               <Image
                 src={ConceptsImage}
                 height={64}
@@ -158,7 +158,7 @@ export async function Home() {
         <h2 className="text-2xl mt-10 mb-6 font-medium">Talk to us</h2>
         <div className="flex flex-col md:flex-row gap-6">
           <Link href="https://discord.com/invite/sentry" className="w-full">
-            <div className="flex flex-col md:flex-row shadow p-6 rounded gap-4">
+            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
               <Image src={ChatBubble} height={64} alt="Chat bubble image" />
               <div className="space-y-2">
                 <h3 className="text-xl font-medium">Sentry Discord</h3>
@@ -167,7 +167,7 @@ export async function Home() {
             </div>
           </Link>
           <Link href="https://sentry.zendesk.com/hc/en-us/" className="w-full">
-            <div className="flex flex-col md:flex-row shadow p-6 rounded gap-4">
+            <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
               <Image src={SupportImage} height={64} alt="Support image" />
               <div className="space-y-2">
                 <h3 className="text-xl font-medium">Support</h3>
@@ -197,7 +197,7 @@ export async function Home() {
               width="18"
               viewBox="0 0 16 13"
               fill="none"
-              className="inline-block ml-1 fill-darkPurple"
+              className="inline-block ml-1 fill-[var(--foreground)]"
             >
               <path d="M13.5535 1.01557C12.5023 0.5343 11.3926 0.192868 10.2526 0C10.0966 0.278859 9.95549 0.565767 9.82978 0.859525C8.61551 0.676548 7.38069 0.676548 6.16642 0.859525C6.04065 0.565798 5.8995 0.278893 5.74358 0C4.6029 0.194497 3.49241 0.536739 2.44013 1.01809C0.351097 4.10886 -0.215208 7.12286 0.0679445 10.0941C1.29134 10.998 2.66066 11.6854 4.11639 12.1265C4.44418 11.6856 4.73423 11.2179 4.98347 10.7283C4.51008 10.5515 4.05318 10.3334 3.61805 10.0765C3.73257 9.99339 3.84457 9.90782 3.9528 9.82476C5.21892 10.4202 6.60084 10.7289 7.99999 10.7289C9.39914 10.7289 10.7811 10.4202 12.0472 9.82476C12.1567 9.91411 12.2687 9.99969 12.3819 10.0765C11.946 10.3338 11.4882 10.5524 11.014 10.7296C11.2629 11.2189 11.553 11.6863 11.8811 12.1265C13.338 11.6872 14.7084 11.0001 15.932 10.0953C16.2643 6.64968 15.3645 3.66336 13.5535 1.01557ZM5.34213 8.26679C4.55308 8.26679 3.9012 7.55073 3.9012 6.66981C3.9012 5.78889 4.53043 5.06654 5.33961 5.06654C6.1488 5.06654 6.79565 5.78889 6.7818 6.66981C6.76796 7.55073 6.14628 8.26679 5.34213 8.26679ZM10.6578 8.26679C9.86754 8.26679 9.21817 7.55073 9.21817 6.66981C9.21817 5.78889 9.8474 5.06654 10.6578 5.06654C11.4683 5.06654 12.1101 5.78889 12.0963 6.66981C12.0824 7.55073 11.462 8.26679 10.6578 8.26679Z" />
             </svg>
@@ -231,7 +231,7 @@ function FooterLink({
           width="18"
           viewBox="0 0 16 16"
           fill="none"
-          className="inline-block ml-2 fill-darkPurple"
+          className="inline-block ml-2 fill-[var(--foreground)]"
         >
           <g>
             <path d="M10 0C9.44687 0 9 0.446875 9 1C9 1.55313 9.44687 2 10 2H12.5844L6.29375 8.29375C5.90312 8.68437 5.90312 9.31875 6.29375 9.70938C6.68437 10.1 7.31875 10.1 7.70937 9.70938L14 3.41563V6C14 6.55312 14.4469 7 15 7C15.5531 7 16 6.55312 16 6V1C16 0.446875 15.5531 0 15 0H10ZM2.5 1C1.11875 1 0 2.11875 0 3.5V13.5C0 14.8813 1.11875 16 2.5 16H12.5C13.8813 16 15 14.8813 15 13.5V10C15 9.44687 14.5531 9 14 9C13.4469 9 13 9.44687 13 10V13.5C13 13.775 12.775 14 12.5 14H2.5C2.225 14 2 13.775 2 13.5V3.5C2 3.225 2.225 3 2.5 3H6C6.55312 3 7 2.55312 7 2C7 1.44687 6.55312 1 6 1H2.5Z" />