dark/light mode style changes

docs/intro.md

@@ -1,23 +1,26 @@
 ---
 sidebar_position: 1
-slug: /
 ---
 
 # Introducing Pixeebot 🧚‍🤖️
 
 Pixeebot is a [GitHub app](https://github.com/apps/pixeebot/) that automatically improves your code. It acts like another developer on your team and opens pull requests (PRs) for you to review and merge.
 
-Pixeebot is powered by an open source toolkit called [codemodder](https://codemodder.io/). 
+Pixeebot is powered by an open source toolkit called [codemodder](https://codemodder.io/).
 
 ### How does Pixeebot help me?
+
 Pixeebot monitors your repositories and provides fixes in two different ways:
+
 1. :on: **Continuous Improvement:** monitors your default branch and sends you pull requests with fixes.
 2. :seedling: **PR Improvement:** checks each new pull request (PR) and suggests improvements.
 
 Pixeebot helps to improve your code's security, performance, and quality.
 
 ### What environment & languages does Pixeebot support?
+
 Pixeebot is currently limited to Java repositories on GitHub. Support for other languages is coming soon!
 
 ### What does Pixeebot cost?
+
 Pixeebot is currently free for all users. We will add paid tiers in the future.

src/css/custom.css

@@ -17,6 +17,11 @@
 
 body {
   font-family: 'Source Sans Pro';
+  color: var(--ifr-color-neutral-90);
+}
+
+[data-theme='dark'] body {
+  color: var(--ifr-color-neutral-10);
 }
 
 /* Menu styles */
@@ -194,13 +199,22 @@ body {
 }
 
 :root {
-  --ifm-color-primary: #e80266;
+  --ifm-color-primary: #c10b5e;
   --ifm-color-primary-dark: #d1025c;
   --ifm-color-primary-darker: #c50257;
   --ifm-color-primary-darkest: #a20147;
   --ifm-color-primary-light: #fd0571;
   --ifm-color-primary-lighter: #fd1077;
   --ifm-color-primary-lightest: #fd338b;
+  --ifm-link-color: var(--ifm-color-primary);
+  --ifr-color-neutral-10: #fbfafb;
+  --ifr-color-neutral-20: #e6e4ea;
+  --ifr-color-neutral-70: #3d3751;
+  --ifr-color-neutral-80: #2c2541;
+  --ifr-color-neutral-90: #1c1533;
+  --ifr-color-neutral-white: #fff;
+  --ifm-heading-font-family: 'CustomFont', sans-serif;
+  --ifm-background-color: var(--ifr-color-neutral-10);
 }
 
 /* Dark mode styles */
@@ -236,3 +250,74 @@ html[data-theme='dark'] {
   color: var(--ifm-color-primary);
   text-decoration: none;
 }
+
+/* Doc file styles */
+
+.language-diff,
+.language-python,
+.language-yaml,
+.language-java,
+.language-xml,
+.language-binary {
+  --prism-background-color: var(--ifr-color-neutral-white);
+}
+
+[data-theme='dark'] .language-diff,
+[data-theme='dark'] .language-python,
+[data-theme='dark'] .language-yaml,
+[data-theme='dark'] .language-java,
+[data-theme='dark'] .language-xml,
+[data-theme='dark'] .language-binary {
+  --prism-background-color: var(--ifr-color-neutral-80);
+}
+
+/* left side bar */
+
+.theme-doc-sidebar-item-category li .menu__link.menu__link--active,
+.theme-doc-sidebar-menu li .menu__link.menu__link--active {
+  color: var(--ifm-color-primary);
+}
+
+.theme-doc-sidebar-item-category li .menu__link,
+.theme-doc-sidebar-menu li .menu__link {
+  color: var(--ifr-color-neutral-90);
+}
+
+[data-theme='dark'] .theme-doc-sidebar-item-category li .menu__link,
+[data-theme='dark'] .theme-doc-sidebar-menu li .menu__link {
+  color: var(--ifr-color-neutral-10);
+}
+[data-theme='dark']
+  .theme-doc-sidebar-item-category
+  li
+  [data-theme='dark']
+  .menu__link.menu__link--active,
+.theme-doc-sidebar-menu li .menu__link.menu__link--active {
+  color: var(--ifm-color-primary);
+}
+
+/* Right side bar */
+
+.table-of-contents li a {
+  color: var(--ifr-color-neutral-90);
+}
+
+.table-of-contents li a.table-of-contents__link--active {
+  color: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] .table-of-contents li a {
+  color: var(--ifr-color-neutral-10);
+}
+
+[data-theme='dark'] .table-of-contents li a.table-of-contents__link--active {
+  color: var(--ifm-color-primary);
+}
+
+.table-of-contents {
+  border-color: var(--ifr-color-neutral-20);
+}
+
+[data-theme='dark'] .table-of-contents {
+  border-color: var(--ifr-color-neutral-70);
+}