docs: add dfinity starlight theme

Author: nathanosdev

CHANGELOG.md

@@ -9,6 +9,7 @@
 - feat: enables type inference for the arguments and return types of `FuncClass`.
 - feat: enables type inference for the fields of `ServiceClass`.
 - fix: perform the canister range checks unconditionally for delegations when constructing a `Certificate` instance.
+- docs: add DFINITY Starlight theme to the docs
 
 ## [3.1.0] - 2025-07-24
 

docs/astro.config.mjs

@@ -1,17 +1,19 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
-import { libsPlugin } from './src/libs-plugin';
+import { libsPlugin } from './src/plugins/libs';
+import { dfinityStarlightTheme } from './src/plugins/theme';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://js.icp.build/',
   base: '/core/',
   integrations: [
     starlight({
-      title: 'ICP JS SDK Docs',
+      title: 'ICP JS SDK Core',
       social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/dfinity/agent-js' }],
       plugins: [
+        dfinityStarlightTheme(),
         libsPlugin({
           clean: true,
           baseDir: '../packages',

docs/src/plugins/libs/index.ts

@@ -0,0 +1 @@
+export * from './libs-plugin';

docs/src/libs-plugin.ts renamed to docs/src/plugins/libs/libs-plugin.ts

@@ -0,0 +1,52 @@
+/* Available props: https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css */
+
+:root {
+  --dfn-color-black: hsl(259, 0%, 13%);
+  --dfn-color-gray-7: hsl(259, 4%, 13%);
+  --dfn-color-gray-6: hsl(259, 4%, 17%);
+  --dfn-color-gray-5: hsl(259, 4%, 40%);
+  --dfn-color-gray-4: hsl(259, 4%, 46%);
+  --dfn-color-gray-3: hsl(259, 4%, 56%);
+  --dfn-color-gray-2: hsl(259, 4%, 80%);
+  --dfn-color-gray-1: hsl(259, 4%, 93%);
+  --dfn-color-white: hsl(259, 0%, 100%);
+
+  --dfn-pink: hsl(312, 100%, 45%);
+  --dfn-purple: hsl(250, 100%, 81%);
+  --dfn-dark-purple: hsl(259, 100%, 36%);
+
+  --dfn-color-bg-navbar: var(--dfn-color-black);
+  --dfn-color-bg-sidebar: var(--dfn-color-black);
+
+  --sl-color-accent: var(--dfn-dark-purple);
+  --sl-color-accent-low: var(--dfn-color-black);
+  --sl-color-accent-high: var(--dfn-purple);
+
+  --sl-color-bg-nav: var(--dfn-color-bg-navbar);
+  --sl-color-bg-sidebar: var(--dfn-color-bg-sidebar);
+
+  --sl-color-white: var(--dfn-color-white);
+  --sl-color-gray-1: var(--dfn-color-gray-1);
+  --sl-color-gray-2: var(--dfn-color-gray-2);
+  --sl-color-gray-3: var(--dfn-color-gray-3);
+  --sl-color-gray-4: var(--dfn-color-gray-4);
+  --sl-color-gray-5: var(--dfn-color-gray-5);
+  --sl-color-gray-6: var(--dfn-color-gray-6);
+  --sl-color-gray-7: var(--dfn-color-gray-7);
+  --sl-color-black: var(--dfn-color-black);
+}
+
+:root[data-theme='light'] {
+  --dfn-color-bg-navbar: #e8e4ed;
+  --dfn-color-bg-sidebar: #f1eef5;
+
+  --sl-color-white: var(--dfn-color-black);
+  --sl-color-gray-1: var(--dfn-color-gray-7);
+  --sl-color-gray-2: var(--dfn-color-gray-6);
+  --sl-color-gray-3: var(--dfn-color-gray-5);
+  --sl-color-gray-4: var(--dfn-color-gray-4);
+  --sl-color-gray-5: var(--dfn-color-gray-3);
+  --sl-color-gray-6: var(--dfn-color-gray-2);
+  --sl-color-gray-7: var(--dfn-color-gray-1);
+  --sl-color-black: var(--dfn-color-white);
+}

docs/src/plugins/theme/dfinity-starlight-theme.css

@@ -0,0 +1,24 @@
+import type { StarlightPlugin } from '@astrojs/starlight/types';
+
+export function dfinityStarlightTheme(): StarlightPlugin {
+  return {
+    name: '@dfinity/starlight-theme',
+    hooks: {
+      'config:setup': ctx => {
+        ctx.updateConfig({
+          logo: {
+            src: './src/plugins/theme/dfinity.svg',
+            alt: 'DFINITY Logo',
+          },
+          customCss: [
+            ...(ctx.config.customCss || []),
+            './src/plugins/theme/dfinity-starlight-theme.css',
+          ],
+          components: {
+            ...ctx.config.components,
+          },
+        });
+      },
+    },
+  };
+}

docs/src/plugins/theme/dfinity-starlight-theme.ts

@@ -0,0 +1 @@
+export * from './dfinity-starlight-theme';