test/docsify
1
0
Fork 0
mirror of https://gitee.com/docsifyjs/docsify.git synced 2024-12-01 19:50:32 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
John Hildenbiddle 2024-07-29 11:54:45 -05:00
parent baeab0212e
commit 236a6db591
3 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/cdn.md
View File

@ -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>

9
docs/quickstart.md
View File

@ -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>

13
docs/themes.md
View File

@ -14,6 +14,8 @@ 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 -->
@ -21,13 +23,16 @@ Theme add-ons are used in combination with the [core theme](#core-theme). Add-on
<!-- 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)" />
```