feat: override theme dark-mode class

newrelic · May 6, 2022 · 7182892 · 7182892
1 parent eeae132
commit 7182892
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,4 +1,7 @@
 exports.onClientEntry = () => {
+  if (localStorage && 'setItem' in localStorage) {
+    localStorage.setItem('darkMode', 'false');
+  }
   const pageBodyClass = document.body.classList;
   if (pageBodyClass.contains('dark-mode')) {
     pageBodyClass.replace('dark-mode', 'light-mode');

diff --git a/src/components/GlobalStyles.js b/src/components/GlobalStyles.js
@@ -32,6 +32,8 @@ const GlobalStyles = styled.div`
   --brand-primary-text-color: var(--brand-grey-black);
   --brand-secondary-text-color: var(--brand-white);
 
+  background-color: var(--brand-white);
+
   /* FONTS */
   @font-face {
     font-family: 'Söhne-Buch';

diff --git a/src/components/LandingBanner/index.js b/src/components/LandingBanner/index.js
@@ -100,7 +100,7 @@ const LandingBanner = ({ quickstart, className, location }) => {
           <div
             css={css`
               align-self: start;
-              background-color: white;
+              background-color: var(--brand-white);
               border-radius: 0 0 7px 7px;
               grid-area: logo;
               justify-self: center;

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -295,7 +295,8 @@ const QuickstartsPage = ({ data, location }) => {
           grid-template-rows: 1fr auto;
           grid-gap: 20px;
           min-height: calc(100vh - var(--global-header-height));
-          margin: var(--banner-height) auto;
+          margin: 0 auto;
+          padding: var(--banner-height) 0;
 
           max-width: var(--site-max-width);