🎨 Adopt dark-only theme aligned with axone.xyz

docs/whitepaper/token-model.tsx

@@ -27,12 +27,12 @@ export const LinePlot = ({ caption, xLegend, yLegend, xFormat, yFormat, data })
 
   return (
     <figure>
-      <div style={{ display: "flex", justifyContent: "center" }}>
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
         <div className="plot" style={{ height: '380px', width: '570px', maxWidth: '100%' }}>
           <ResponsiveLine
             data={data}
             margin={{ top: 20, right: 20, bottom: 50, left: 80 }}
-            lineWidth={3}
+            lineWidth={2}
             curve="linear"
             xScale={{
               type: 'linear',
@@ -73,10 +73,10 @@ export const LinePlot = ({ caption, xLegend, yLegend, xFormat, yFormat, data })
                 lineStyle: {
                   stroke: '#b0413e',
                   strokeDasharray: '4 4',
-                  strokeWidth: 1
+                  strokeWidth: 15
                 },
                 textStyle: {
-                  fill: '#b0413e' // TODO: use theme color
+                  fill: '#e0e0e0'
                 },
                 value: c
               }
@@ -89,17 +89,38 @@ export const LinePlot = ({ caption, xLegend, yLegend, xFormat, yFormat, data })
             pointLabelYOffset={-12}
             useMesh={true}
             theme={{
-              textColor: prismTheme.plain.color,
+              text: {
+                fontSize: '0.775rem'
+              },
+              axis: {
+                ticks: {
+                  text: {
+                    fill: '#e0e0e0'
+                  }
+                },
+                legend: {
+                  text: {
+                    fill: '#e0e0e0'
+                  }
+                }
+              },
+              crosshair: {
+                line: {
+                  stroke: '#e0e0e0',
+                  strokeWidth: 1
+                }
+              },
               tooltip: {
                 container: {
-                  background: prismTheme.plain.backgroundColor
+                  background: 'rgb(50, 50, 50)',
+                  fontSize: '0.775rem'
                 }
               }
             }}
           />
         </div>
       </div>
-      <div style={{ display: "flex", justifyContent: "center" }}>
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
         <figcaption>
           <span className="math math-inline">{caption}</span>
         </figcaption>

docusaurus.config.js

@@ -71,6 +71,30 @@ const config = {
   projectName: 'docs',
   deploymentBranch: 'gh-pages',
   trailingSlash: false,
+  headTags: [
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'preconnect',
+        href: 'https://fonts.googleapis.com'
+      }
+    },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossorigin: 'true'
+      }
+    },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700;800&display=swap'
+      }
+    }
+  ],
   markdown: {
     mermaid: true
   },
@@ -142,7 +166,7 @@ const config = {
         title: '',
         logo: {
           alt: 'Axone Logo',
-          src: 'img/logo-axone-dark.webp',
+          src: 'img/logo-axone-light.webp',
           srcDark: 'img/logo-axone-light.webp'
         },
         items: [
@@ -198,10 +222,10 @@ const config = {
         ]
       },
       footer: {
-        style: 'light',
+        style: 'dark',
         logo: {
           alt: 'Axone Logo',
-          src: 'img/logo-axone-dark.webp',
+          src: 'img/logo-axone-light.webp',
           href: 'https://axone.xyz',
           width: 160
         },
@@ -278,12 +302,12 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} Axone`
       },
       prism: {
-        theme: prismThemes.github,
-        darkTheme: prismThemes.dracula,
+        theme: prismThemes.vsDark,
+        darkTheme: prismThemes.vsDark,
         additionalLanguages: ['prolog', 'turtle', 'bash', 'json', 'sparql']
       },
       colorMode: {
-        defaultMode: 'light',
+        defaultMode: 'dark',
         disableSwitch: true,
         respectPrefersColorScheme: false
       },

src/scss/card.scss

@@ -1,5 +1,5 @@
 .docs-card-container {
-  background: var(--primary-color);
+  background: var(--ifm-background-color);
   margin: 30px auto;
   padding: 0;
 }
@@ -388,14 +388,18 @@
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-image: url("/img/grain.webp"),
-    linear-gradient(222.68deg, #f9f9f9 13.75%, #d3defa 76.51%);
-  background-clip: border-box;
-  border-radius: 20px;
-  color: var(--ifm-card-font-color);
+  background: var(--ifm-color-emphasis-800);
+  border-radius: 10px;
+  color: var(--ifm-color-emphasis-100);
+  font-weight: 700;
 
   h2 {
-    color: var(--ifm-card-font-color);
+    color: var(--ifm-color-emphasis-100);
+
+    &:hover {
+      color: var(--ifm-color-emphasis-400);
+    }
+
     font-size: 20px;
   }
 }