diff --git a/docs/assets/favicon.svg b/docs/assets/favicon.svg
new file mode 100644
index 0000000..8997367
--- /dev/null
+++ b/docs/assets/favicon.svg
@@ -0,0 +1,7 @@
+
diff --git a/docs/assets/logo.svg b/docs/assets/logo.svg
new file mode 100644
index 0000000..563a479
--- /dev/null
+++ b/docs/assets/logo.svg
@@ -0,0 +1,7 @@
+
diff --git a/docs/assets/takopi.svg b/docs/assets/takopi.svg
new file mode 100644
index 0000000..28d2156
--- /dev/null
+++ b/docs/assets/takopi.svg
@@ -0,0 +1,7 @@
+
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
new file mode 100644
index 0000000..286651c
--- /dev/null
+++ b/docs/stylesheets/extra.css
@@ -0,0 +1,59 @@
+/* Takopi palette */
+:root {
+ --takopi-pink: #f4a5b8;
+ --takopi-flower: #e87a9f;
+ --takopi-teal: #4a9b8e;
+ --takopi-teal-bright: #5ab5a6;
+}
+
+:root[data-md-color-scheme="default"] {
+ --md-primary-fg-color: var(--takopi-flower);
+ --md-primary-fg-color--light: var(--takopi-pink);
+ --md-primary-fg-color--dark: #d95f86;
+ --md-accent-fg-color: var(--takopi-teal);
+ --md-accent-fg-color--transparent: rgba(74, 155, 142, 0.12);
+ --md-typeset-a-color: var(--takopi-teal);
+ --md-default-bg-color: #fffaf7;
+ --md-code-bg-color: rgba(244, 165, 184, 0.1);
+}
+
+:root[data-md-color-scheme="slate"] {
+ --md-primary-fg-color: var(--takopi-pink);
+ --md-primary-fg-color--light: #f7b9c8;
+ --md-primary-fg-color--dark: var(--takopi-flower);
+ --md-accent-fg-color: var(--takopi-teal-bright);
+ --md-accent-fg-color--transparent: rgba(90, 181, 166, 0.12);
+ --md-typeset-a-color: var(--takopi-teal-bright);
+ --md-code-bg-color: rgba(244, 165, 184, 0.12);
+}
+
+/* Warm bokeh-ish background */
+:root[data-md-color-scheme="default"] body {
+ background:
+ radial-gradient(1100px circle at 12% 6%, rgba(244, 165, 184, 0.3), transparent 55%),
+ radial-gradient(900px circle at 88% 0%, rgba(74, 155, 142, 0.22), transparent 55%),
+ radial-gradient(1000px circle at 45% 95%, rgba(255, 230, 199, 0.55), transparent 60%),
+ var(--md-default-bg-color);
+}
+
+:root[data-md-color-scheme="slate"] body {
+ background:
+ radial-gradient(900px circle at 12% 0%, rgba(244, 165, 184, 0.12), transparent 55%),
+ radial-gradient(900px circle at 85% 0%, rgba(90, 181, 166, 0.1), transparent 55%),
+ radial-gradient(1000px circle at 50% 100%, rgba(255, 230, 199, 0.06), transparent 60%),
+ var(--md-default-bg-color);
+}
+
+/* Softer shapes */
+.md-typeset .admonition,
+.md-typeset details {
+ border-radius: 12px;
+}
+
+.md-typeset .md-button {
+ border-radius: 999px;
+}
+
+::selection {
+ background: rgba(232, 122, 159, 0.35);
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index c82ca7a..20f2145 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -11,6 +11,24 @@ site_dir: _site
theme:
name: material
+ palette:
+ - scheme: default
+ primary: pink
+ accent: teal
+ toggle:
+ icon: material/brightness-7
+ name: Switch to dark mode
+ - scheme: slate
+ primary: pink
+ accent: teal
+ toggle:
+ icon: material/brightness-4
+ name: Switch to light mode
+ font:
+ text: Nunito
+ code: Fira Code
+ logo: assets/logo.svg
+ favicon: assets/favicon.svg
features:
- navigation.sections
- navigation.instant
@@ -20,6 +38,9 @@ theme:
- search.suggest
- search.highlight
+extra_css:
+ - stylesheets/extra.css
+
markdown_extensions:
- admonition
- attr_list