From 0eac44dd934c96557f5d41ce48bc272c27c71ba8 Mon Sep 17 00:00:00 2001
From: Juanfran <juanfran.ag@gmail.com>
Date: Wed, 31 Jul 2024 08:52:10 +0200
Subject: [PATCH] feat(docs): basic css theme for typedoc

---
 package.json      |  2 +-
 tools/typedoc.css | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 tools/typedoc.css

diff --git a/package.json b/package.json
index 8a38b2d..f382db6 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "test": "nx run-many -t test --parallel -p plugins-runtime lorem-ipsum-plugin",
     "registry": "nx local-registry",
     "prepare": "husky",
-    "create:api-docs": "npx typedoc --tsconfig libs/plugins-runtime/tsconfig.lib.json",
+    "create:api-docs": "npx typedoc --tsconfig libs/plugins-runtime/tsconfig.lib.json --customCss ./tools/typedoc.css",
     "release": "npx tsx ./tools/scripts/publish.ts"
   },
   "private": true,
diff --git a/tools/typedoc.css b/tools/typedoc.css
new file mode 100644
index 0000000..9710e17
--- /dev/null
+++ b/tools/typedoc.css
@@ -0,0 +1,43 @@
+:root {
+  /* Light */
+  --light-color-background: #ffffff;
+  --light-color-background-secondary: #e8eaee;
+  --light-color-warning-text: #000000;
+  --light-color-background-warning: #fff4ed;
+  --light-color-icon-background: var(--light-color-background);
+  --light-color-accent: #e1d2f5;
+  --light-color-active-menu-item: var(--light-color-accent);
+  --light-color-text: var(--light-color-warning-text);
+  --light-color-text-aside: #495e74;
+  --light-color-link: #1345aa;
+
+  /* highlight.css */
+  --light-code-background: #f3f4f6;
+
+  /* Dark */
+  --dark-color-background: #18181a;
+  --dark-color-background-secondary: #000000;
+  --dark-color-background-warning: #fff4ed;
+  --dark-color-warning-text: #ffffff;
+  --dark-color-icon-background: var(--dark-color-background-secondary);
+  --dark-color-accent: #426158;
+  --dark-color-active-menu-item: #2e3434;
+  --dark-color-text: var(--dark-color-warning-text);
+  --dark-color-text-aside: #8f9da3;
+  --dark-color-link: #7efff5;
+
+  /* highlight.css */
+  --dark-code-background: #212426;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --code-background: var(--light-code-background);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --code-background: var(--dark-code-background);
+  }
+}