feat: automatically detect dark theme

egoist · Nov 27, 2020 · a1f33f1 · a1f33f1 · vercel · Nov 27, 2020
1 parent c056ec1
commit a1f33f1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/docs/main.js b/docs/main.js
@@ -5,7 +5,6 @@ init({
   logo: '<img src="logo.svg" width="60">',
   description: 'Simply beautiful documentation.',
   highlightLanguages: ['nginx'],
-  theme: 'dark',
   props: {
     langs: process.env.PRISM_LANGUAGES,
   },

diff --git a/src/docup.ts b/src/docup.ts
@@ -33,13 +33,18 @@ export class Docup {
   options: InstanceOptions
 
   constructor(options: Options = {}) {
+    const matchedDarkTheme =
+      typeof window !== 'undefined' &&
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+
     this.options = {
       title: options.title || document.title || 'Docup',
       indexFile: 'README.md',
       root: '',
       base: '/',
       highlight: true,
-      theme: 'default',
+      theme: matchedDarkTheme ? 'dark' : 'default',
       ...options,
     }
   }