docs: use dark blue palette in dark mode (#251)

analogjs · Feb 7, 2023 · 5526c76 · 5526c76
1 parent fbbc781
commit 5526c76
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 28 deletions.
diff --git a/apps/docs-app/docusaurus.config.js b/apps/docs-app/docusaurus.config.js
@@ -1,7 +1,8 @@
 // @ts-check
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const lightCodeTheme = require('prism-react-renderer/themes/nightOwlLight');
+const darkCodeTheme = require('prism-react-renderer/themes/nightOwl');
+darkCodeTheme.plain.backgroundColor = '#0a1429';
 
 const organizationName = 'analogjs';
 const projectName = 'analog';
@@ -49,7 +50,6 @@ const config = {
       },
       image: 'img/logos/analog-logo.svg',
       footer: {
-        style: 'dark',
         logo: {
           alt: 'Analog logo',
           href: '/',
@@ -100,10 +100,11 @@ const config = {
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} Analog. Licensed under MIT.`,
+        copyright: `Copyright © 2022-${new Date().getFullYear()} Analog. Licensed under MIT.`,
       },
       navbar: {
         title,
+        hideOnScroll: true,
         logo: {
           alt: 'Analog logo',
           src: 'img/logos/analog-logo.svg',

diff --git a/apps/docs-app/src/components/HomepageFeatures/styles.module.css b/apps/docs-app/src/components/HomepageFeatures/styles.module.css
@@ -3,6 +3,7 @@
   align-items: center;
   padding: 2rem 0;
   width: 100%;
+  border-top: var(--ifm-global-border-width) solid var(--global-border-color);
 }
 
 .featureSvg {

diff --git a/apps/docs-app/src/components/StackblitzButton/index.tsx b/apps/docs-app/src/components/StackblitzButton/index.tsx
@@ -6,14 +6,12 @@ import styles from './styles.module.css';
 const StackblitzLogo: React.ComponentType<React.ComponentProps<'svg'>> =
   require('@site/static/img/logos/stackblitz-logo.svg').default;
 
-export default function StackblitzButton(props): JSX.Element {
+export default function StackblitzButton(): JSX.Element {
   return (
     <Link
-      {...props}
       className={clsx(
-        props.className,
-        'button button--secondary button--lg',
-        styles.flex
+        'button button--outline button--lg',
+        styles.stackblitzLink
       )}
       to="https://analogjs.org/new"
     >

diff --git a/apps/docs-app/src/components/StackblitzButton/styles.module.css b/apps/docs-app/src/components/StackblitzButton/styles.module.css
@@ -3,6 +3,22 @@
   width: 25px;
 }
 
-.flex {
+.stackblitzLink {
   display: flex;
+  border: var(--ifm-global-border-width) solid var(--ifm-color-secondary);
+}
+
+.stackblitzLink:hover {
+  color: var(--ifm-color-gray-900);
+  background-color: var(--ifm-color-secondary);
+}
+
+:root[data-theme='dark'] .stackblitzLink:hover {
+  color: var(--ifm-color-white);
+  background-color: var(--stackblitz-lightning-color);
+  border-color: var(--stackblitz-lightning-color);
+}
+
+:root[data-theme='dark'] .stackblitzLink:hover path {
+  fill: var(--ifm-color-white);
 }
diff --git a/apps/docs-app/src/css/custom.css b/apps/docs-app/src/css/custom.css
@@ -15,20 +15,37 @@
   --ifm-color-primary-lightest: #ee2346;
   --ifm-background-color: #fefefe;
   --ifm-code-font-size: 95%;
+  --ifm-navbar-shadow: none;
+  --ifm-footer-background-color: #111f3b;
+  --ifm-footer-color: var(--ifm-footer-link-color);
+  --ifm-footer-link-color: var(--ifm-color-secondary);
+  --ifm-footer-title-color: var(--ifm-color-white);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --global-border-color: var(--ifm-color-emphasis-300);
+  --angular-shield-color: #dd0031;
+  --angular-shield-color-dark: #c3002f;
+  --stackblitz-lightning-color: #49a2f8;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
+:root[data-theme='dark'] {
   --ifm-color-primary: #fc2753;
   --ifm-color-primary-dark: #fc0a3c;
   --ifm-color-primary-darker: #f40335;
   --ifm-color-primary-darkest: #c9032c;
   --ifm-color-primary-light: #fc446a;
   --ifm-color-primary-lighter: #fd5275;
   --ifm-color-primary-lightest: #fd7d98;
-  --ifm-background-color: #0d0e11;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-background-color: #0a1429;
+  --ifm-navbar-background-color: var(--ifm-background-color);
+  --ifm-toc-border-color: var(--global-border-color);
+  --ifm-hover-overlay: rgba(255, 255, 255, 0.07);
+  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
+  --global-border-color: #293856;
+}
+
+.navbar {
+  border-bottom: var(--ifm-global-border-width) solid var(--global-border-color);
 }
 
 .footer__logo {

diff --git a/apps/docs-app/src/pages/index.module.css b/apps/docs-app/src/pages/index.module.css
@@ -8,6 +8,12 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  background-color: var(--ifm-color-primary);
+  color: var(--ifm-color-white);
+}
+
+:root[data-theme='dark'] .heroBanner {
+  background: linear-gradient(#2938584d, #131f374d);
 }
 
 @media screen and (max-width: 996px) {
@@ -24,17 +30,22 @@
   gap: var(--ifm-global-spacing);
 }
 
-@media screen and (max-width: 576px) { 
+@media screen and (max-width: 576px) {
   .buttons a {
     flex: 1;
     display: flex;
     justify-content: center;
   }
 }
 
-/**
-  * 1. Increase specificity to override the Infima Outline Button style.
-  */
-.buttonOutline.buttonOutline.buttonOutline.buttonOutline:not(:hover) /* [1] */ {
-  color: var(--ifm-hero-text-color);
+:root[data-theme='dark'] .readDocsButton {
+  color: var(--ifm-color-white);
+  background-color: var(--angular-shield-color);
+  border-color: var(--angular-shield-color);
+}
+
+:root[data-theme='dark'] .readDocsButton:hover {
+  color: var(--ifm-color-secondary);
+  background-color: var(--angular-shield-color-dark);
+  border-color: var(--angular-shield-color-dark);
 }
diff --git a/apps/docs-app/src/pages/index.tsx b/apps/docs-app/src/pages/index.tsx
@@ -11,21 +11,18 @@ import styles from './index.module.css';
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx('hero', styles.heroBanner)}>
       <div className="container">
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
-          <Link className="button button--secondary button--lg" to="/docs">
+          <Link
+            className={clsx('button button--secondary button--lg', styles.readDocsButton)}
+            to="/docs"
+          >
             Read the docs
           </Link>
-
-          <StackblitzButton
-            className={clsx(
-              'button--outline',
-              styles.buttonOutline
-            )}
-          />
+          <StackblitzButton />
         </div>
       </div>
     </header>