Remove and add images, update login instructions, and update pricing …

…and support pages

docs/about/pricing.md

@@ -90,10 +90,12 @@ These are the hourly usage limits for each developer per repository:
 - You can choose to manually purchase seats and assign them to developers, or have them assigned automatically as developers create pull requests.
 - During the trial period, seat assignment is automatic, but the number of seats can be adjusted when purchasing the subscription.
 
-![Untitled](./images/pricing.png)
+![Untitled](./images/cr_seat_manage_dark.png#gh-dark-mode-only)
+![Untitled](./images/cr_seat_manage_light.png#gh-light-mode-only)
 
 ### Free Plan
 
 - Seats are assigned to new developers immediately
 
-![Untitled](./images/pricing2.png)
+![Untitled](./images/cr_seat_free_dark.png#gh-dark-mode-only)
+![Untitled](./images/cr_seat_free_light.png#gh-light-mode-only)

docs/about/support.md

@@ -34,7 +34,8 @@ These are the most common questions our support team receives, and you might fin
 
 Yes, you can switch between different organizations on CodeRabbit. To do so, click on the organization name in the top right corner of the CodeRabbit UI.
 
-<div align="center">![Switch Organizations](./images/cr_support_orgs.png)</div>
+<div align="center">![Switch Organizations](./images/cr_support_orgs_light.png#gh-light-mode-only)</div>
+<div align="center">![Switch Organizations](./images/cr_support_orgs_dark.png#gh-dark-mode-only)</div>
 
 ### Can CodeRabbit subscription be used across multiple organizations?
 
@@ -68,7 +69,8 @@ To get assistance from our support team, open a ticket using the help icon on th
 
 Complete the support ticket by providing your name, email, a description of your issue, and attaching any necessary files. If you are reporting a bug , please provide the GitHub or GitLab organization name.
 
-![Open a Ticket](./images/cr_support_help.png)
+![Open a Ticket](./images/cr_support_help_light.png#gh-light-mode-only)
+![Open a Ticket](./images/cr_support_help_dark.png#gh-dark-mode-only)
 
 ### Explore More
 

docs/get-started/signup.md

@@ -28,9 +28,10 @@ Signing up for CodeRabbit is quick and easy, allowing you to get started in just
 
 ### **Step 1: Getting Started**
 
-**Login with GitHub or GitLab**: Log in with your GitHub or GitLab account at https://coderabbit.ai/login
+**Login with GitHub or GitLab**: Log in with your GitHub or GitLab account at [https://coderabbit.ai/login](https://coderabbit.ai/login)
 
-![Untitled](./images/signup.png)
+![Login](./images/cr_login2.png#gh-light-mode-only)
+![Login](./images/cr_login_dark.png#gh-dark-mode-only)
 
 ### **Step 2: Select Organization**
 

src/css/custom.css

@@ -9,73 +9,78 @@
 
 /* You can override the default Infima variables here. */
 :root {
-    --ifm-color-primary: #ff8b53;
-    --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-code-font-size: 95%;
-    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-    --ifm-navbar-height: 5rem;
+  --ifm-color-primary: #ff8b53;
+  --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-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-navbar-height: 5rem;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
-    --ifm-color-primary: #ff8b53;
-    --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;
-    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-color-primary: #ff8b53;
+  --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;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
 .navbar .navbar__item {
-    align-items: center;
-    display: flex;
-    font-size: 1.25rem;
-    font-weight: 700;
+  align-items: center;
+  display: flex;
+  font-size: 1.25rem;
+  font-weight: 700;
 }
 
 a[docid="docs"] > svg {
-    display: none;
+  display: none;
 }
 
 /* Adjustments for mobile view */
 @media (max-width: 768px) {
-    /* Reduce the logo size for smaller screens */
-    .navbar__logo img {
-        height: 32px;
-        align-items: center;
-    }
+  /* Reduce the logo size for smaller screens */
+  .navbar__logo img {
+    height: 32px;
+    align-items: center;
+  }
 
-    /* Reduce the padding around the logo for smaller screens */
-    .navbar__logo {
-        padding: 2px; /* Adjust the padding for smaller screens */
-    }
+  /* Reduce the padding around the logo for smaller screens */
+  .navbar__logo {
+    padding: 2px; /* Adjust the padding for smaller screens */
+  }
 }
 
 /* Center the Discord link within its parent */
 .navbar__items.navbar__items--right {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 @media screen and (max-width: 480px) {
-    a.navbar__item.navbar__link[docid="docs"] {
-        display: none !important;
-    }
+  a.navbar__item.navbar__link[docid="docs"] {
+    display: none !important;
+  }
 }
 
 @media screen and (max-width: 480px) {
-    a.navbar__item.navbar__link[href="https://blog.coderabbit.ai/blog"]
-    {
-        display: none;
-    }
+  a.navbar__item.navbar__link[href="https://blog.coderabbit.ai/blog"]
+  {
+    display: none;
+  }
+}
+
+[data-theme="light"] img[src$="#gh-dark-mode-only"],
+[data-theme="dark"] img[src$="#gh-light-mode-only"] {
+  display: none;
 }
 
 /* Light mode Discord icon */