Update docs to match updated logo and color palette (#5283)

![8511](https://github.com/astral-sh/ruff/assets/77130613/862d151f-ff1d-4da8-9230-8dd32f41f197)

## Summary

Supersedes #5277, includes redesigned dark mode.

## Test Plan

* `python scripts/generate_mkdocs.py`
* `mkdocs serve`

README.md

@@ -14,9 +14,9 @@ An extremely fast Python linter, written in Rust.
 
 <p align="center">
   <picture align="center">
-    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/1309177/212613422-7faaf278-706b-4294-ad92-236ffcab3430.svg">
-    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/1309177/212613257-5f4bca12-6d6b-4c79-9bac-51a4c6d08928.svg">
-    <img alt="Shows a bar chart with benchmark results." src="https://user-images.githubusercontent.com/1309177/212613257-5f4bca12-6d6b-4c79-9bac-51a4c6d08928.svg">
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/1309177/232603514-c95e9b0f-6b31-43de-9a80-9e844173fd6a.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/1309177/232603516-4fb4892d-585c-4b20-b810-3db9161831e4.svg">
+    <img alt="Shows a bar chart with benchmark results." src="https://user-images.githubusercontent.com/1309177/232603516-4fb4892d-585c-4b20-b810-3db9161831e4.svg">
   </picture>
 </p>
 

docs/stylesheets/extra.css

@@ -0,0 +1,69 @@
+:root {
+  --black: #261230;
+  --white: #ffffff;
+  --astral-purple: #1f092a;
+  --astral-purple-alt: #30173d;
+  --light-gray: #826894;
+  --radiate: #d7ff64;
+  --flare: #6340ac;
+  --rock: #78876e;
+  --galaxy: #261230;
+  --space: #30173d;
+  --comet: #6f5d6f;
+  --cosmic: #de5fe9;
+  --sun: #ffac2f;
+  --electron: #46ebe1;
+  --aurora: #46eb74;
+  --constellation: #5f6de9;
+  --neutron: #cff3cf;
+  --proton: #f6afbc;
+  --nebula: #cdcbfb;
+  --supernova: #f1aff6;
+  --starlight: #f4f4f1;
+  --lunar: #fbf2fc;
+  --asteroid: #e3cee3;
+  --crater: #f0dfdf;
+}
+
+[data-md-color-scheme="astral-light"] {
+  --md-default-bg-color--dark: var(--black);
+  --md-primary-fg-color: var(--galaxy);
+  --md-typeset-a-color: var(--flare);
+  --md-accent-fg-color: var(--cosmic);
+}
+
+[data-md-color-scheme="astral-dark"] {
+  --md-default-bg-color: var(--astral-purple);
+  --md-default-fg-color: var(--white);
+  --md-default-fg-color--light: var(--white);
+  --md-default-fg-color--lighter: var(--white);
+  --md-primary-fg-color: var(--astral-purple-alt);
+  --md-primary-bg-color: var(--white);
+  --md-accent-fg-color: var(--radiate);
+
+  --md-typeset-color: var(--white);
+  --md-typeset-a-color: var(--radiate);
+  --md-typeset-mark-color: var(--sun);
+
+  --md-code-fg-color: var(--white);
+  --md-code-bg-color: var(--astral-purple-alt);
+
+  --md-code-hl-comment-color: var(--light-gray);
+  --md-code-hl-punctuation-color: var(--light-gray);
+  --md-code-hl-generic-color: var(--light-gray);
+  --md-code-hl-variable-color: var(--light-gray);
+  --md-code-hl-string-color: var(--aurora);
+  --md-code-hl-keyword-color: var(--sun);
+  --md-code-hl-operator-color: var(--sun);
+  --md-code-hl-number-color: hsla(0, 67%, 50%, 1);
+  --md-code-hl-special-color: hsla(340, 83%, 47%, 1);
+  --md-code-hl-function-color: var(--cosmic);
+  --md-code-hl-constant-color: var(--radiate);
+  --md-code-hl-name-color: var(--md-code-fg-color);
+
+  --md-typeset-del-color: hsla(6, 90%, 60%, 0.15);
+  --md-typeset-ins-color: hsla(150, 90%, 44%, 0.15);
+
+  --md-typeset-table-color: hsla(0, 0%, 100%, 0.12);
+  --md-typeset-table-color--light: hsla(0, 0%, 100%, 0.035);
+}

mkdocs.template.yml

@@ -1,7 +1,7 @@
 site_name: Ruff
 theme:
   name: material
-  logo: assets/ruff.svg
+  logo: assets/bolt.svg
   favicon: assets/ruff-favicon.png
   features:
     - navigation.instant
@@ -14,14 +14,12 @@ theme:
     - content.code.copy
   palette:
     - media: "(prefers-color-scheme: light)"
-      scheme: default
-      primary: red
+      scheme: astral-light
       toggle:
         icon: material/weather-sunny
         name: Switch to dark mode
     - media: "(prefers-color-scheme: dark)"
-      scheme: slate
-      primary: red
+      scheme: astral-dark
       toggle:
         icon: material/weather-night
         name: Switch to light mode
@@ -50,3 +48,5 @@ markdown_extensions:
       anchor_linenums: true
 plugins:
   - search
+extra_css:
+  - stylesheets/extra.css

scripts/transform_readme.py

@@ -8,8 +8,8 @@
 from pathlib import Path
 
 URL = "https://user-images.githubusercontent.com/1309177/{}.svg"
-URL_LIGHT = URL.format("212613257-5f4bca12-6d6b-4c79-9bac-51a4c6d08928")
-URL_DARK = URL.format("212613422-7faaf278-706b-4294-ad92-236ffcab3430")
+URL_LIGHT = URL.format("232603516-4fb4892d-585c-4b20-b810-3db9161831e4")
+URL_DARK = URL.format("232603514-c95e9b0f-6b31-43de-9a80-9e844173fd6a")
 
 # https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to
 GITHUB = f"""