diff --git a/gatsby-config.js b/gatsby-config.js index 58bda4c1d..f10a4cecf 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -69,6 +69,7 @@ module.exports = { policy: [{ userAgent: '*', allow: '/' }], }, }, + 'gatsby-plugin-use-dark-mode', 'gatsby-plugin-sitemap', 'gatsby-plugin-meta-redirect', { diff --git a/package-lock.json b/package-lock.json index 8bb108b6f..748b81c30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4406,6 +4406,11 @@ "wonka": "^4.0.14" } }, + "@use-it/event-listener": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@use-it/event-listener/-/event-listener-0.1.3.tgz", + "integrity": "sha512-UCHkLOVU+xj3/1R8jXz8GzDTowkzfIDPESOBlVC2ndgwUSBEqiFdwCoUEs2lcGhJOOiEdmWxF+T23C5+60eEew==" + }, "@webassemblyjs/ast": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz", @@ -14034,6 +14039,15 @@ } } }, + "gatsby-plugin-use-dark-mode": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/gatsby-plugin-use-dark-mode/-/gatsby-plugin-use-dark-mode-1.1.2.tgz", + "integrity": "sha512-qZEg4XmCgeq4M7ojxMUTFFj951QMGb95pWnxsSvb4nsTWTYSb0qeRE+hR/4rE5GIFnh/w9GrwuyMwStM7o7R6Q==", + "requires": { + "prop-types": "^15.7.2", + "terser": "^4.0.0" + } + }, "gatsby-react-router-scroll": { "version": "3.0.7", "resolved": "https://registry.npmjs.org/gatsby-react-router-scroll/-/gatsby-react-router-scroll-3.0.7.tgz", @@ -29378,6 +29392,23 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, + "use-dark-mode": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/use-dark-mode/-/use-dark-mode-2.3.1.tgz", + "integrity": "sha512-hmcdJR96tTustRQdaQwe6jMrZHnmPqXBxgy4jaQ4gsfhwajsCpjECuq9prgDe9XxMx/f9r96o2/md6O4Lwhwjg==", + "requires": { + "@use-it/event-listener": "^0.1.2", + "use-persisted-state": "^0.3.0" + } + }, + "use-persisted-state": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/use-persisted-state/-/use-persisted-state-0.3.0.tgz", + "integrity": "sha512-UlWEq0JYg7NbvcRBZ1g6Bwe4SEbYfr1wr/D5mrmfCzSxXSwsPRYygGLlsxHcW58Rf7gGwRPBT23sNVvyVn4WYg==", + "requires": { + "@use-it/event-listener": "^0.1.2" + } + }, "utif": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/utif/-/utif-2.0.1.tgz", diff --git a/package.json b/package.json index a5d9ebad3..c430e6b3e 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "gatsby-plugin-sass": "^2.3.4", "gatsby-plugin-sharp": "^2.6.14", "gatsby-plugin-sitemap": "^2.4.5", + "gatsby-plugin-use-dark-mode": "^1.1.2", "gatsby-remark-images": "^3.3.10", "gatsby-source-filesystem": "^2.3.11", "gatsby-transformer-remark": "^2.8.15", @@ -36,7 +37,8 @@ "react-live": "^2.2.2", "react-markdown": "^4.3.1", "react-middle-ellipsis": "^1.1.0", - "react-shadow": "^18.1.2" + "react-shadow": "^18.1.2", + "use-dark-mode": "^2.3.1" }, "devDependencies": { "@newrelic/eslint-plugin-newrelic": "^0.3.0", diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss index 9771924da..f537ab547 100644 --- a/src/components/Button.module.scss +++ b/src/components/Button.module.scss @@ -14,19 +14,35 @@ } .primary { - color: #fff; + color: var(--color-white); border-color: var(--color-brand-800); background-color: var(--color-brand-800); + + :global(.dark-mode) & { + color: var(--primary-background-color); + background-color: var(--color-brand-400); + border-color: var(--color-brand-400); + } } .normal { color: var(--color-neutrals-800); border-color: var(--color-neutrals-100); background-color: var(--color-neutrals-100); + + :global(.dark-mode) & { + color: var(--color-white); + border-color: var(--color-dark-100); + background-color: var(--color-dark-100); + } } .plain { color: var(--color-brand-800); border-color: transparent; background-color: transparent; + + :global(.dark-mode) & { + color: var(--color-brand-400); + } } diff --git a/src/components/CallToAction.js b/src/components/CallToAction.js deleted file mode 100644 index f965c6795..000000000 --- a/src/components/CallToAction.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import styles from './CallToAction.module.scss'; -import PropTypes from 'prop-types'; - -const CallToAction = ({ step, text, children }) => { - return ( -
- {step &&
{step}
} - {text &&

{text}

} - {children} -
- ); -}; -CallToAction.propTypes = { - step: PropTypes.string, - text: PropTypes.string, - children: PropTypes.node.isRequired, -}; -export default CallToAction; diff --git a/src/components/CallToAction.module.scss b/src/components/CallToAction.module.scss deleted file mode 100644 index 29ad93ed3..000000000 --- a/src/components/CallToAction.module.scss +++ /dev/null @@ -1,88 +0,0 @@ -.container { - font-size: 0.75rem; - margin: 0 0 5%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: var(--color-white); - box-shadow: var(--boxshadow); - padding: 2.75rem 1.45rem; - - h3 { - font-size: 1.25rem; - margin-top: 0.5rem; - margin-bottom: 1rem; - } - - a { - text-decoration: none; - color: var(--color-brand-800); - margin-top: 1.45rem; - } - - p { - margin-bottom: 0.5rem; - } - - select { - width: 100%; - } - - input { - margin: 0; - width: 74%; - } - - button { - height: 2rem; - font-size: 0.74rem; - font-weight: normal; - padding: 0.5rem 0.75rem; - } - - form { - margin: 0; - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - } - @media (max-width: 500px) { - background: none; - border-radius: 0; - border: none; - box-shadow: none; - p { - margin-bottom: 0.5rem; - } - input { - width: 70%; - margin-right: 0.5rem; - } - select { - width: 100%; - } - button { - width: 100%; - } - form { - width: 100%; - button { - width: 25%; - } - } - } -} - -.step { - height: 50px; - width: 50px; - border-radius: 50%; - background: var(--color-neutrals-100); - display: flex; - justify-content: center; - align-items: center; - font-weight: 600; - font-size: 2.25rem; -} diff --git a/src/components/Callouts.module.scss b/src/components/Callouts.module.scss index 6501b1ffc..c79fefc4f 100644 --- a/src/components/Callouts.module.scss +++ b/src/components/Callouts.module.scss @@ -3,22 +3,35 @@ .tip { padding: 1.25rem 0.3rem 1.25rem 1.25rem; margin: 1.55rem 3rem 1.55rem 1.25rem; + color: var(--primary-text-color); + h4 { - margin-top: 0.1rem !important; - font-size: 0.8rem !important; + font-size: 0.75rem !important; text-transform: uppercase; - color: var(--color-neutrals-800) !important; + color: var(--heading-text-color); } } .caution { border-left: 4px solid var(--color-red-400); background: var(--color-red-100); + + :global(.dark-mode) & { + background: var(--color-red-900); + } } .important { border-left: 4px solid var(--color-yellow-400); background: var(--color-yellow-100); + + :global(.dark-mode) & { + background: var(--color-yellow-900); + } } .tip { border-left: 4px solid var(--color-green-400); background: var(--color-green-100); + + :global(.dark-mode) & { + background: var(--color-green-900); + } } diff --git a/src/components/CodeDef/CodeDef.module.scss b/src/components/CodeDef/CodeDef.module.scss index 290b27d0f..f52bde13e 100644 --- a/src/components/CodeDef/CodeDef.module.scss +++ b/src/components/CodeDef/CodeDef.module.scss @@ -5,6 +5,10 @@ .identifier { color: var(--color-neutrals-700); + + :global(.dark-mode) & { + color: var(--color-dark-700); + } } .type { @@ -12,6 +16,11 @@ border-radius: 0.125rem; color: var(--color-green-500); background: var(--color-green-050); + + :global(.dark-mode) & { + color: var(--color-green-600); + background: var(--color-green-100); + } } .comment { @@ -20,12 +29,20 @@ > p { display: inline; } + + :global(.dark-mode) & { + color: var(--color-dark-600); + } } .keyword, .bracket, .operator { color: var(--color-neutrals-600); + + :global(.dark-mode) & { + color: var(--color-dark-600); + } } .block { @@ -34,6 +51,10 @@ .string { color: var(--color-green-500); + + :global(.dark-mode) & { + color: var(--color-green-200); + } } .number { diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js index d9b094f16..9a58cec1f 100644 --- a/src/components/CodeSnippet.js +++ b/src/components/CodeSnippet.js @@ -2,13 +2,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import Button from './Button'; import Highlight, { defaultProps } from 'prism-react-renderer'; -import github from 'prism-react-renderer/themes/github'; +import lightTheme from 'prism-react-renderer/themes/github'; +import darkTheme from 'prism-react-renderer/themes/nightOwl'; import MiddleEllipsis from 'react-middle-ellipsis'; import FeatherIcon from './FeatherIcon'; import styles from './CodeSnippet.module.scss'; import useClipboard from '../hooks/useClipboard'; import useFormattedCode from '../hooks/useFormattedCode'; import Prism from 'prism-react-renderer/prism'; +import useDarkMode from 'use-dark-mode'; import cx from 'classnames'; (typeof global !== 'undefined' ? global : window).Prism = Prism; @@ -26,6 +28,7 @@ const CodeSnippet = ({ const language = className.replace('language-', ''); const formattedCode = useFormattedCode(children ?? ''); const [copied, copyCode] = useClipboard(); + const darkMode = useDarkMode(); const linesToHighlight = lineHighlight && captureLinesToHighlight(lineHighlight); @@ -34,7 +37,7 @@ const CodeSnippet = ({
diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss index 1a8d01ac9..5b4eefd32 100644 --- a/src/components/CodeSnippet.module.scss +++ b/src/components/CodeSnippet.module.scss @@ -30,6 +30,10 @@ .highlight { background: var(--color-neutrals-300); + + :global(.dark-mode) & { + background: var(--color-dark-100); + } } .bottomBar { @@ -37,7 +41,7 @@ display: flex; justify-content: space-between; align-items: center; - background: var(--color-neutrals-200); + background: var(--tertiary-background-color); padding: 0 1rem; } @@ -51,9 +55,6 @@ .copyButton { font-size: 0.75rem; - color: var(--color-brand-800); - background: none; - border: none; outline: none; } diff --git a/src/components/ConstantReference.module.scss b/src/components/ConstantReference.module.scss index 371c3175b..e9d09f331 100644 --- a/src/components/ConstantReference.module.scss +++ b/src/components/ConstantReference.module.scss @@ -1,5 +1,5 @@ .container { - color: var(--color-neutrals-600); + color: var(--secondary-text-color); font-size: 0.875rem; &:not(:last-child) { diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js index e1bd4dfb2..a094fd270 100644 --- a/src/components/FeatherIcon.js +++ b/src/components/FeatherIcon.js @@ -3,11 +3,12 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import styles from './FeatherIcon.module.scss'; -const FeatherIcon = ({ className, name, size = '1em' }) => { +const FeatherIcon = ({ className, name, size = '1em', ...props }) => { const paths = ICONS[name]; return paths ? ( ), + sun: ( + <> + + + + + + + + + + + ), + moon: , x: ( <> diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss index ec93774a2..54e8ead96 100644 --- a/src/components/Footer.module.scss +++ b/src/components/Footer.module.scss @@ -2,7 +2,7 @@ display: flex; justify-content: space-between; align-items: center; - color: var(--color-neutrals-600); + color: var(--secondary-text-color); font-size: 0.75rem; z-index: 1; @@ -28,14 +28,14 @@ width: 200px; &:hover { - color: var(--color-neutrals-700); + color: var(--secondary-text-hover-color); } } .copyright { margin-left: 0.5rem; padding-left: 0.5rem; - border-left: 1px dotted var(--color-neutrals-400); + border-left: 1px dotted var(--border-color); @media (max-width: 760px) { border-left: none; @@ -64,6 +64,6 @@ .link { &:hover { - color: var(--color-neutrals-700); + color: var(--secondary-text-hover-color); } } diff --git a/src/components/GlobalHeader.js b/src/components/GlobalHeader.js index dd9305e03..7f8d72f97 100644 --- a/src/components/GlobalHeader.js +++ b/src/components/GlobalHeader.js @@ -7,11 +7,13 @@ import { githubBaseUrl } from '../data/constants'; import NewRelicLogo from './NewRelicLogo'; import ExternalLink from './ExternalLink'; import FeatherIcon from './FeatherIcon'; +import useDarkMode from 'use-dark-mode'; import styles from './GlobalHeader.module.scss'; const GlobalHeader = ({ className }) => { const { fileRelativePath } = useContext(PageContext); + const darkMode = useDarkMode(false); const isComponentDoc = fileRelativePath.includes( 'src/markdown-pages/components' ); @@ -28,8 +30,8 @@ const GlobalHeader = ({ className }) => {
    -
  • - +
  • + Developers
    • @@ -41,7 +43,7 @@ const GlobalHeader = ({ className }) => { Open Source -
  • +
  • { Documentation
    • -
  • +
  • { - +
    • )}
  • - +
    • +
  • + +
diff --git a/src/components/GlobalHeader.module.scss b/src/components/GlobalHeader.module.scss index c7fa1b662..52a05a447 100644 --- a/src/components/GlobalHeader.module.scss +++ b/src/components/GlobalHeader.module.scss @@ -8,6 +8,10 @@ :global(.site-container) { padding: 0 2rem; } + + :global(.dark-mode) & { + background-color: var(--color-dark-100); + } } .globalHeaderContent { @@ -53,19 +57,20 @@ display: block; height: 100%; padding: 4px 9px; - color: var(--color-neutrals-600); - font-size: 11px; + color: var(--secondary-text-color); + font-size: 0.6875rem; border: none; + transition: 0.2s; + &.active, &:hover { background-color: var(--color-neutrals-200); color: var(--color-neutrals-700); - } - .active &, - .leftSideLinks:hover .active &:hover { - background-color: var(--color-neutrals-200); - color: var(--color-neutrals-700); + :global(.dark-mode) & { + background-color: var(--color-dark-200); + color: var(--color-dark-700); + } } } @@ -81,17 +86,17 @@ } .rightSideButton { - opacity: 0.45; - transition: opacity 0.2s ease-out; + transition: all 0.2s ease-out; margin-left: 1rem; + color: var(--secondary-text-color); - path { - stroke: var(--color-neutrals-700); + a { + color: currentColor; } &:hover { + color: var(--secondary-hover-text-color); cursor: pointer; - opacity: 0.75; } } @@ -99,3 +104,7 @@ display: flex; align-items: center; } + +.icon { + display: block; +} diff --git a/src/components/GuideListing/GuideListing.module.scss b/src/components/GuideListing/GuideListing.module.scss index 2395c1af0..e02dd7af1 100644 --- a/src/components/GuideListing/GuideListing.module.scss +++ b/src/components/GuideListing/GuideListing.module.scss @@ -1,6 +1,5 @@ .guideListing { position: relative; - margin-top: 2rem; } .container { @@ -18,7 +17,7 @@ max-width: 800px; text-align: center; margin-bottom: 7.5rem; - color: var(--color-neutrals-500); + color: var(--accent-text-color); } .list { diff --git a/src/components/GuideTile/GuideTile.module.scss b/src/components/GuideTile/GuideTile.module.scss index 99ed8a82b..dd7ed4161 100644 --- a/src/components/GuideTile/GuideTile.module.scss +++ b/src/components/GuideTile/GuideTile.module.scss @@ -1,17 +1,20 @@ .tile { display: grid; grid-template-rows: auto auto 1fr auto; - background-color: white; + background: var( + --surface-background-color, + var(--primary-surface-background-color) + ); box-shadow: var(--boxshadow); padding: 1rem; - border: 1px solid var(--color-neutrals-300); + border: 1px solid var(--border-color); border-radius: 0.25rem; position: relative; transition: all 0.15s ease-out; &:hover { transform: translateY(-2px); - border: 1px solid var(--color-neutrals-400); + border-color: var(--border-hover-color); } } @@ -24,7 +27,7 @@ display: flex; align-items: center; text-align: right; - color: var(--color-neutrals-500); + color: var(--accent-text-color); padding: 0.3rem 0 0.2rem 1.2rem; justify-self: end; } @@ -36,18 +39,22 @@ margin-left: -2.75rem; width: 5.5rem; height: 5.5rem; - border: 4px solid var(--color-white); + border: 4px solid var(--surface-background-color); background-color: var(--color-neutrals-200); border-radius: 50%; display: flex; align-items: center; justify-content: center; + + :global(.dark-mode) & { + background-color: var(--color-dark-050); + } } .description { font-size: 0.9rem; margin-bottom: 1.5rem; - color: var(--color-neutrals-600); + color: var(--secondary-text-color); flex: 1; &:last-child { diff --git a/src/components/HamburgerMenu.module.scss b/src/components/HamburgerMenu.module.scss index 39c2036e0..c0cb0f550 100644 --- a/src/components/HamburgerMenu.module.scss +++ b/src/components/HamburgerMenu.module.scss @@ -14,6 +14,10 @@ button.hamburgerMenu { margin: 5px 0; border-radius: 2px; transition: 0.18s; + + :global(.dark-mode) & { + background-color: var(--color-white); + } } &.isOpen { diff --git a/src/components/IconReference.module.scss b/src/components/IconReference.module.scss index 48d40bae9..20c578c66 100644 --- a/src/components/IconReference.module.scss +++ b/src/components/IconReference.module.scss @@ -1,16 +1,20 @@ .button { border: 1px solid transparent; - background: var(--color-white); + background: var(--primary-background-color); border-radius: 4px; text-align: center; padding: 1rem; position: relative; transition: all 0.3s; + &:focus { + outline: none; + } + &:hover { cursor: pointer; - border: 1px solid var(--color-neutrals-200); - box-shadow: 0 2px 6px 0 rgba(22, 38, 59, 0.14); + border: 1px solid var(--border-color); + box-shadow: var(--boxshadow); z-index: 1; .iconName { @@ -20,8 +24,13 @@ } .icon { + color: var(--primary-text-color); display: inline-block; width: 100%; + + > svg { + fill: currentColor; + } } .iconName { diff --git a/src/components/InlineCodeSnippet.js b/src/components/InlineCodeSnippet.js index d388003e9..a4a9f52b6 100644 --- a/src/components/InlineCodeSnippet.js +++ b/src/components/InlineCodeSnippet.js @@ -1,22 +1,26 @@ import React from 'react'; import PropTypes from 'prop-types'; import Highlight, { defaultProps } from 'prism-react-renderer'; -import github from 'prism-react-renderer/themes/github'; +import lightTheme from 'prism-react-renderer/themes/github'; +import darkTheme from 'prism-react-renderer/themes/nightOwl'; import styles from './InlineCodeSnippet.module.scss'; import cx from 'classnames'; +import useDarkMode from 'use-dark-mode'; const InlineCodeSnippet = ({ children, language }) => { + const darkMode = useDarkMode(); + return ( {({ style, className, tokens, getLineProps, getTokenProps }) => ( 
           {tokens.map((line, i) => (
             

diff --git a/src/components/Layout.js b/src/components/Layout.js
index 22b2b4d0c..af75b4793 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -9,6 +9,7 @@ import Sidebar from './Sidebar';
 import styles from './Layout.module.scss';
 import 'normalize.css';
 import './styles.scss';
+import '../theme.scss';
 
 const Layout = ({ children }) => {
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index 14c95edb9..f18c11621 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -37,7 +37,7 @@
 }
 
 .footer {
-  border-top: 1px solid var(--color-neutrals-100);
+  border-top: 1px solid var(--divider-color);
   padding-top: 2rem;
   margin-top: 4rem;
 }
diff --git a/src/components/Logo.js b/src/components/Logo.js
index 438ba2d78..135f963f8 100644
--- a/src/components/Logo.js
+++ b/src/components/Logo.js
@@ -11,21 +11,18 @@ const Logo = ({ className, bracketColor, textColor }) => (
   >
     
     
     
   
 );
@@ -36,9 +33,4 @@ Logo.propTypes = {
   textColor: PropTypes.string,
 };
 
-Logo.defaultProps = {
-  bracketColor: '#007E8A',
-  textColor: 'black',
-};
-
 export default Logo;
diff --git a/src/components/Logo.module.scss b/src/components/Logo.module.scss
index 3f5c1ff61..abe1fa7dc 100644
--- a/src/components/Logo.module.scss
+++ b/src/components/Logo.module.scss
@@ -1,3 +1,18 @@
 .logo {
   fill: none;
 }
+
+.text {
+  fill: var(--logo-text-color, var(--heading-text-color));
+}
+
+.brackets {
+  stroke: var(--logo-bracket-color, var(--color-brand-800));
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+
+  :global(.dark-mode) & {
+    stroke: var(--logo-bracket-color, var(--color-brand-400));
+  }
+}
diff --git a/src/components/MDXContainer.module.scss b/src/components/MDXContainer.module.scss
index 5d0cc3d09..925cdad5e 100644
--- a/src/components/MDXContainer.module.scss
+++ b/src/components/MDXContainer.module.scss
@@ -5,7 +5,7 @@
 
   code {
     padding: 0.125rem;
-    background: var(--color-neutrals-200);
+    background: var(--tertiary-background-color);
     border-radius: 2px;
   }
 
diff --git a/src/components/Markdown.module.scss b/src/components/Markdown.module.scss
index a0b072a78..463ebf894 100644
--- a/src/components/Markdown.module.scss
+++ b/src/components/Markdown.module.scss
@@ -5,7 +5,7 @@
 
   code {
     padding: 0.125rem;
-    background: var(--color-neutrals-200);
+    background: var(--tertiary-background-color);
     border-radius: 2px;
   }
 
diff --git a/src/components/MethodReference.module.scss b/src/components/MethodReference.module.scss
index 033a471d0..01b6f7e10 100644
--- a/src/components/MethodReference.module.scss
+++ b/src/components/MethodReference.module.scss
@@ -5,6 +5,10 @@
   color: var(--color-teal-500);
   background: var(--color-teal-050);
   margin-bottom: 1rem;
+
+  :global(.dark-mode) & {
+    background: var(--color-teal-100);
+  }
 }
 
 .description {
diff --git a/src/components/MobileHeader.module.scss b/src/components/MobileHeader.module.scss
index 16f64d274..dbdc1d881 100644
--- a/src/components/MobileHeader.module.scss
+++ b/src/components/MobileHeader.module.scss
@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  border-bottom: 1px solid var(--color-neutrals-100);
+  border-bottom: 1px solid var(--divider-color);
   padding: 0 2rem;
 
   width: 100vw;
@@ -25,5 +25,4 @@
   height: calc(
     100vh - (var(--height-mobile-nav-bar) + var(--height-global-header))
   );
-  background-color: var(--color-white);
 }
diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
index 336cee330..1c07a4c8f 100644
--- a/src/components/NavigationItems.module.scss
+++ b/src/components/NavigationItems.module.scss
@@ -16,7 +16,7 @@
 }
 
 .navLink {
-  color: var(--color-neutrals-900);
+  color: var(--primary-text-color);
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
@@ -25,7 +25,7 @@
   transition: 0.1s;
 
   &:not(.isCurrentPage):hover {
-    color: var(--color-neutrals-600);
+    color: var(--primary-text-hover-color);
   }
 
   [data-depth='0'] > & {
@@ -39,7 +39,7 @@
 }
 
 button.navLink {
-  color: var(--color-neutrals-900);
+  color: var(--primary-text-color);
   background: inherit;
   border: none;
   padding: 0;
@@ -75,7 +75,7 @@ button.navLink {
 }
 
 .groupName {
-  color: var(--color-neutrals-600);
+  color: var(--secondary-text-color);
   font-weight: bold;
   font-size: 0.75rem;
   text-transform: uppercase;
diff --git a/src/components/NewRelicLogo.js b/src/components/NewRelicLogo.js
index d7300ee2a..b6b04e714 100644
--- a/src/components/NewRelicLogo.js
+++ b/src/components/NewRelicLogo.js
@@ -13,39 +13,39 @@ const NewRelicLogo = ({ className, size }) => (
   >
     
     
     
     
     
     
     
     
     
     
             {live && (
diff --git a/src/components/ReferenceExample.module.scss b/src/components/ReferenceExample.module.scss
index 7d3a880af..3a37f514f 100644
--- a/src/components/ReferenceExample.module.scss
+++ b/src/components/ReferenceExample.module.scss
@@ -6,7 +6,12 @@
 }
 
 .preview {
-  margin-bottom: 1rem;
+  padding: 2rem;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutrals-100);
+  box-shadow: var(--boxshadow);
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
 }
 
 .title {
diff --git a/src/components/SearchInput.module.scss b/src/components/SearchInput.module.scss
index 293b96f0f..ff51f94c5 100644
--- a/src/components/SearchInput.module.scss
+++ b/src/components/SearchInput.module.scss
@@ -10,14 +10,22 @@
 
 .icon {
   display: block;
-  stroke: var(--color-neutrals-700);
+  stroke: var(--primary-text-color);
 }
 
 .input {
+  color: var(--primary-text-color);
   width: 100%;
   font-size: 0.875rem;
   padding: 0.5rem;
   padding-right: calc(1rem + 1em);
+  background: var(--primary-background-color);
+
+  &:focus {
+    outline: none;
+    border: 1px solid rgba(0, 126, 138, 0.6);
+    box-shadow: 0 0 0 4px rgba(0, 126, 138, 0.1);
+  }
 }
 
 .button {
diff --git a/src/components/Section.js b/src/components/Section.js
index 6db63c93e..4a3eded38 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -5,13 +5,11 @@ import styles from './Section.module.scss';
 
 const Section = ({ backgroundBanner, children, className }) => {
   return (
-    

-      

+    

       {children}
     

   );
diff --git a/src/components/Section.module.scss b/src/components/Section.module.scss
index 5a2d92dc4..780286e49 100644
--- a/src/components/Section.module.scss
+++ b/src/components/Section.module.scss
@@ -1,17 +1,9 @@
 .section {
-  position: relative;
-}
-
-.backgroundBanner {
-  position: absolute;
-  top: -2rem;
-  bottom: -2rem;
-  left: -2rem;
-  right: -2rem;
-  z-index: -1;
+  &.backgroundBanner {
+    --surface-background-color: var(--secondary-surface-background-color);
 
-  background-color: var(--color-neutrals-100);
-  @media (max-width: 500px) {
-    background-color: var(--color-white);
+    background-color: var(--secondary-background-color);
+    margin: 0 -2rem;
+    padding: 2rem;
   }
 }
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index c5a7a93e9..83ae5a1b1 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -1,10 +1,10 @@
 .sidebar {
   padding: 2rem;
-  border-right: 1px solid var(--color-neutrals-100);
+  border-right: 1px solid var(--divider-color);
 
   @media screen and (max-width: 760px) {
     height: 60px;
-    border-bottom: 1px solid var(--color-neutrals-100);
+    border-bottom: 1px solid var(--divider-color);
   }
 }
 
diff --git a/src/components/SkewedContainer.module.scss b/src/components/SkewedContainer.module.scss
index d26d0911e..d11ba7a66 100644
--- a/src/components/SkewedContainer.module.scss
+++ b/src/components/SkewedContainer.module.scss
@@ -1,5 +1,5 @@
 .container {
-  background: var(--color-neutrals-100);
+  background: var(--secondary-background-color);
   transform: skew(0, -2deg);
 }
 
diff --git a/src/components/Step.module.scss b/src/components/Step.module.scss
index 4c6d999f8..0effed707 100644
--- a/src/components/Step.module.scss
+++ b/src/components/Step.module.scss
@@ -1,12 +1,12 @@
 .wrapper {
-  border-top: solid 1px var(--color-neutrals-100);
+  border-top: solid 1px var(--divider-color);
   box-sizing: border-box;
   padding-top: 1.5rem;
   margin-top: 2rem;
 
   .stepNumber {
     font-size: 0.75rem;
-    color: var(--color-neutrals-600);
+    color: var(--accent-text-color);
   }
 }
 
@@ -17,7 +17,6 @@
   h4:first-child,
   h5:first-child,
   h6:first-child {
-    color: var(--color-neutrals-900);
     font-weight: bold;
     margin-top: 0;
     margin-bottom: 1rem;
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 11d44aea5..f2803e9d0 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -18,6 +18,17 @@
   --color-neutrals-800: #2a3434;
   --color-neutrals-900: #000d0d;
 
+  --color-dark-050: #131f23;
+  --color-dark-100: #22353c;
+  --color-dark-200: #233940;
+  --color-dark-300: #2a4249;
+  --color-dark-400: #37484e;
+  --color-dark-500: #495b5c;
+  --color-dark-600: #7c9799;
+  --color-dark-700: #a5bbbd;
+  --color-dark-800: #cedede;
+  --color-dark-900: #e8eaea;
+
   --color-brand-050: #f7ffff;
   --color-brand-100: #edffff;
   --color-brand-400: #70ccd2;
@@ -46,16 +57,16 @@
   --color-green-800: #0d290a;
   --color-green-900: #021200;
 
-  --color-yellow-050: #fffde7;
-  --color-yellow-100: #fff9c4;
-  --color-yellow-200: #fff59d;
-  --color-yellow-300: #fff176;
-  --color-yellow-400: #ffee58;
-  --color-yellow-500: #ffeb3b;
-  --color-yellow-600: #fdd835;
-  --color-yellow-700: #fbc02d;
-  --color-yellow-800: #f9a825;
-  --color-yellow-900: #f57f17;
+  --color-yellow-050: #f9faec;
+  --color-yellow-100: #fff9cc;
+  --color-yellow-200: #fff089;
+  --color-yellow-300: #f3e66a;
+  --color-yellow-400: #f0d100;
+  --color-yellow-500: #ccb100;
+  --color-yellow-600: #8a7800;
+  --color-yellow-700: #473e00;
+  --color-yellow-800: #262100;
+  --color-yellow-900: #141100;
 
   --color-teal-050: #f1fbfc;
   --color-teal-100: #d2f3f6;
@@ -68,14 +79,6 @@
   --color-teal-800: #003539;
   --color-teal-900: #002123;
 
-  --boxshadow: 0 0.24905px 0.55345px rgba(0, 0, 0, 0.00562291),
-    0 0.59851px 1.33002px rgba(0, 0, 0, 0.00807786),
-    0 1.12694px 2.50431px rgba(0, 0, 0, 0.01),
-    0 2.01027px 4.46726px rgba(0, 0, 0, 0.0119221),
-    0 3.75998px 8.35552px rgba(0, 0, 0, 0.0143771),
-    0 9px 20px rgba(0, 0, 0, 0.02);
-
-  --color-tile-background: rgb(215, 210, 233);
   --primary-font-family: 'open sans', sans-serif;
   --secondary-font-family: 'effra', sans-serif;
   --tertiary-font-family: 'Ovo', serif;
@@ -83,6 +86,8 @@
 
   --height-global-header: 30px;
   --height-mobile-nav-bar: 60px;
+
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 * {
@@ -92,15 +97,15 @@
 body {
   font-size: 16px;
   font-family: var(--primary-font-family);
-  color: var(--color-neutrals-700);
-  background-color: var(--color-white);
+  color: var(--primary-text-color);
+  background-color: var(--primary-background-color);
   line-height: 1.5;
 }
 
 a {
   cursor: pointer;
   text-decoration: none;
-  color: var(--color-brand-800);
+  color: var(--link-color);
 }
 
 p {
@@ -117,16 +122,20 @@ h6 {
   margin-top: 0;
   margin-bottom: 8px;
   font-weight: 600;
-  color: var(--color-neutrals-800);
   font-family: var(--primary-font-family);
+  color: var(--heading-text-color);
 }
 
-input,
-select {
-  border: 1px solid var(--color-neutrals-400);
+input[type='text'] {
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   height: 2rem;
   box-sizing: border-box;
+  transition: all 0.1s var(--ease-out-quad);
+
+  &:hover {
+    border-color: var(--border-hover-color);
+  }
 }
 
 ul {
@@ -139,7 +148,7 @@ code {
 }
 
 blockquote {
-  border-left: 4px solid var(--color-neutrals-400);
+  border-left: 4px solid var(--border-color);
   padding: 15px 5px 20px 20px;
   margin: 25px 50px 25px 20px;
 }
@@ -148,9 +157,17 @@ pre {
   margin: 0;
 }
 
+::placeholder {
+  color: var(--color-neutrals-500);
+
+  .dark-mode & {
+    color: var(--color-dark-500);
+  }
+}
+
 :global {
   .intro-text {
-    color: var(--color-neutrals-600);
+    color: var(--secondary-text-color);
     font-size: 1.125rem;
     line-height: 2rem;
   }
diff --git a/src/pages/404.module.scss b/src/pages/404.module.scss
index 907edb7e1..c7f09f562 100644
--- a/src/pages/404.module.scss
+++ b/src/pages/404.module.scss
@@ -26,9 +26,17 @@
 .footerContainer {
   background: var(--color-neutrals-800);
   padding: 1.5rem;
+
+  :global(.dark-mode) & {
+    background: var(--tertiary-background-color);
+  }
 }
 
 .footer {
   color: var(--color-teal-300);
   padding: 0 2rem;
+
+  :global(.dark-mode) & {
+    color: var(--secondary-text-color);
+  }
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index b2e4767af..a9d48aff6 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -78,7 +78,7 @@ const IndexPage = ({ data, pageContext }) => {
         
         Observability for every developer
 
-        

+        

           

             

               Whether you're new to New Relic or already a data nerd, you can
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 9b9485ef3..8d7851108 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -6,17 +6,6 @@
   @media (max-width: 1080px) {
     flex-direction: column;
   }
-
-  button {
-    margin-top: 1rem;
-    margin-right: 1rem;
-  }
-
-  p {
-    font-size: 1.125rem;
-    line-height: 1.875rem;
-    color: var(--color-neutrals-600);
-  }
 }
 
 .introVideo {
@@ -85,8 +74,10 @@
 }
 
 .stripedSection {
+  --surface-background-color: var(--secondary-surface-background-color);
+
   padding: 2rem;
-  background: var(--color-neutrals-100);
+  background: var(--secondary-background-color);
   border-radius: 4px;
 }
 
@@ -97,7 +88,7 @@
 
 .expandGuides {
   margin-top: 2rem;
-  
+
   &:hover {
     transform: translateY(-1px);
   }
@@ -108,8 +99,10 @@
 }
 
 .featuredGuide {
+  border-color: var(--surface-background-color) !important;
+
   &:hover {
     transform: unset;
-    border-color: var(--color-neutrals-300);
+    border-color: inherit;
   }
 }
diff --git a/src/templates/GuideTemplate.module.scss b/src/templates/GuideTemplate.module.scss
index d6fce1ce1..283c30046 100644
--- a/src/templates/GuideTemplate.module.scss
+++ b/src/templates/GuideTemplate.module.scss
@@ -5,7 +5,7 @@
 
   code {
     padding: 0.125rem;
-    background: var(--color-neutrals-200);
+    background: var(--tertiary-background-color);
     border-radius: 2px;
   }
 
@@ -38,7 +38,7 @@
 
   hr {
     border: 0;
-    border-bottom: 1px solid var(--color-neutrals-100);
+    border-bottom: 1px solid var(--divider-color);
   }
 }
 
@@ -56,7 +56,7 @@
 .duration {
   display: flex;
   align-items: center;
-  color: var(--color-neutrals-600);
+  color: var(--secondary-text-color);
 }
 
 .clock {
diff --git a/src/templates/OverviewTemplate.js b/src/templates/OverviewTemplate.js
index 73bfb6565..5dce6cb31 100644
--- a/src/templates/OverviewTemplate.js
+++ b/src/templates/OverviewTemplate.js
@@ -7,6 +7,7 @@ import PageTitle from '../components/PageTitle';
 import MDXContainer from '../components/MDXContainer';
 import GuideListing from '../components/GuideListing/GuideListing';
 import GuideTile from '../components/GuideTile/GuideTile';
+import styles from './OverviewTemplate.module.scss';
 
 import SEO from '../components/Seo';
 
@@ -21,7 +22,7 @@ const OverviewTemplate = ({ data }) => {
       {title}
       {body}
       {!!guides?.nodes.length && (
-        
+        
           
             {guides?.nodes.map(({ frontmatter }, index) => (