tweak site colours, and toggle code styling on light/dark mode (#59)

Author: aSemy

site/docusaurus.config.js

@@ -36,7 +36,7 @@ const config = /** @type {import("@docusaurus/types").Config} */ {
   // scripts: [],
 
   clientModules: [
-    require.resolve("./src/modules/global.scss"),
+    require.resolve("./src/css/global.scss"),
   ],
 
   themeConfig: /** @type {import("@docusaurus/preset-classic").ThemeConfig} */ ({

site/src/css/custom.css

@@ -1,28 +1,25 @@
 /* override the default Infima variables */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #4a0094;
+  --ifm-color-primary-dark: #430085;
+  --ifm-color-primary-darker: #3f007e;
+  --ifm-color-primary-darkest: #340068;
+  --ifm-color-primary-light: #5100a3;
+  --ifm-color-primary-lighter: #5500aa;
+  --ifm-color-primary-lightest: #6000c0;
+  --ifm-background-color: #e6e6e6;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #c285ff;
+  --ifm-color-primary-dark: #bc79ff;
+  --ifm-color-primary-darker: #b66eff;
+  --ifm-color-primary-darkest: #af5eff;
+  --ifm-color-primary-light: #d5acff;
+  --ifm-color-primary-lighter: #dfbfff;
+  --ifm-color-primary-lightest: #fcf9ff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
-
-.language-typescript {
-
-}

site/src/css/global.scss

@@ -0,0 +1,34 @@
+[data-theme='light'] {
+  .language-typescript {
+    @import "prism-themes/themes/prism-vs";
+    background: #f0f0fa !important;
+  }
+
+  .language-kotlin, .language-kts, .language-groovy, .language-xml {
+    @import "prism-themes/themes/prism-material-light";
+    background: #fafafa !important;
+  }
+}
+
+[data-theme='dark'] {
+  .language-typescript {
+    @import "prism-themes/themes/prism-vsc-dark-plus";
+    background: #2b2b2e !important;
+  }
+
+  .language-kotlin, .language-kts, .language-groovy, .language-xml {
+    @import "prismjs-darcula-theme/darcula";
+    background: #2b2b2b !important;
+  }
+}
+
+pre[class*="language-"], code[class*="language-"] {
+  font-family: Source Code Pro, PT Mono, Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace !important;
+  font-size: 1em !important;
+  line-height: 1.3 !important;
+  padding: 0 !important;
+}
+
+code {
+  padding: 0.5em !important;
+}