Add core dark to template. Fix dist/themes URLs.

jhildenbiddle · jhildenbiddle · commit 236a6db5917c · 2024-07-29T11:54:45.000-05:00
diff --git a/docs/cdn.md b/docs/cdn.md
@@ -34,7 +34,7 @@ Specifying the latest major version allows your site to receive all non-breaking
 <!-- prettier-ignore -->
 ```html
 <!-- Theme -->
-<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/themes/vue.min.css" />
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/vue.min.css" />
 
 <!-- Docsify -->
 <script src="//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js"></script>
diff --git a/docs/quickstart.md b/docs/quickstart.md
@@ -51,7 +51,10 @@ Download or create an `index.html` template using the following markup:
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 
     <!-- Core Theme -->
-    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/themes/core.min.css">
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/core.min.css">
+
+    <!-- Core Dark Theme (add-on / dark mode only) -->
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/addons/core-dark.min.css" media="(prefers-color-scheme: dark)" />
   </head>
   <body class="loading">
     <div id="app"></div>
@@ -83,7 +86,7 @@ Specifying a major version in the URL (`@5`) will allow your site to receive non
 <!-- prettier-ignore -->
 ```html
 <!-- Core Theme -->
-<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/themes/core.min.css">
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/core.min.css">
 
 <!-- Docsify -->
 <script src="//cdn.jsdelivr.net/npm/docsify@5"></script>
@@ -94,7 +97,7 @@ If you prefer to lock docsify to a specific version, specify the full version af
 <!-- prettier-ignore -->
 ```html
 <!-- Core Theme -->
-<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5.0.0/themes/core.min.css">
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5.0.0/dist/themes/core.min.css">
 
 <!-- Docsify -->
 <script src="//cdn.jsdelivr.net/npm/docsify@5.0.0"></script>
diff --git a/docs/themes.md b/docs/themes.md
@@ -14,20 +14,25 @@ The Docsify "core" theme contains all of the styles and [theme properties](#them
 
 Theme add-ons are used in combination with the [core theme](#core-theme). Add-ons contain CSS rules that modify [theme properties](#theme-properties) values and/or add custom style declarations. They can often (but not always) be used with other add-ons.
 
+Theme add-ons can be applied conditionally using an `@media` attribute. This allows applying styles only at specific screen sizes, when light or dark mode is being used, when a device is touch enabled, etc.
+
 !> Theme add-ons must be loaded after the [core theme](#core-theme).
 
 <!-- prettier-ignore -->
 ```html
 <!-- Core Theme -->
 <link rel="stylesheet" href="..." />
 
-<!-- Theme (add-on) -->
+<!-- Theme Add-on -->
 <link rel="stylesheet" href="..." />
+
+<!-- Theme Add-on with @media rule -->
+<link rel="stylesheet" href="..." media="(prefers-color-scheme: dark)" />
 ```
 
 ### Core Dark (Add-on)
 
-Dark mode styles for the [core theme](#core-theme). Styles can applied only when an operating system's dark mode is active by specifying a `media` attribute.
+Dark styles for the [core theme](#core-theme).
 
 <label>
   <input
@@ -53,13 +58,13 @@ Dark mode styles for the [core theme](#core-theme). Styles can applied only when
 
 <!-- prettier-ignore -->
 ```html
-<!-- Core Dark (add-on) -->
+<!-- Core Dark Theme (add-on) -->
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/addons/core-dark.min.css" />
 ```
 
 <!-- prettier-ignore -->
 ```html
-<!-- Core Dark - Dark Mode Only (add-on) -->
+<!-- Core Dark Theme (add-on / dark mode only) -->
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@5/dist/themes/addons/core-dark.min.css" media="(prefers-color-scheme: dark)" />
 ```
 
