Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 5cc9f05

Browse filesBrowse files
QingWei-LiQingWei-Li
committed
feat: customize the theme color
1 parent ae1ad73 commit 5cc9f05
Copy full SHA for 5cc9f05

13 files changed

+120-42Lines changed: 120 additions & 42 deletions

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎.eslintrc‎

Copy file name to clipboard
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"extends": ["vue"],
33
"globals": {
4-
"XMLHttpRequest": true
4+
"XMLHttpRequest": true,
5+
"__docsify__": true
56
}
67
}
Collapse file

‎CHANGELOG.md‎

Copy file name to clipboardExpand all lines: CHANGELOG.md
+4Lines changed: 4 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 2.0.0
2+
### Features
3+
- Customize the theme color
4+
15
## 1.10.5
26
### Bug fixes
37
- fix initialize the Vue instance
Collapse file

‎build/build-css.js‎

Copy file name to clipboardExpand all lines: build/build-css.js
+9-1Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,15 @@ var cssnano = require('cssnano').process
33
var resolve = require('path').resolve
44
var postcss = require('postcss')
55

6-
var processor = postcss([require('postcss-salad')])
6+
var processor = postcss([require('postcss-salad')({
7+
features: {
8+
precss: {
9+
properties: {
10+
preserve: true
11+
}
12+
}
13+
}
14+
})])
715

816
var saveMin = function (file, content) {
917
fs.writeFileSync(resolve(__dirname, '../lib/themes/', file), content)
Collapse file

‎docs/README.md‎

Copy file name to clipboardExpand all lines: docs/README.md
+13Lines changed: 13 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -503,4 +503,17 @@ window.$docsify = {
503503
}
504504
```
505505

506+
### theme-color
506507

508+
Customize the theme color.
509+
510+
511+
```html
512+
<script src="/lib/docsify.js" data-theme-color="#3F51B5"></script>
513+
```
514+
515+
```js
516+
window.$docsify = {
517+
themeColor: '#3F51B5'
518+
}
519+
```
Collapse file

‎docs/zh-cn.md‎

Copy file name to clipboardExpand all lines: docs/zh-cn.md
+14Lines changed: 14 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -511,3 +511,17 @@ window.$docsify = {
511511
}
512512
```
513513

514+
### themeColor
515+
516+
自定义主题色。
517+
518+
519+
```html
520+
<script src="/lib/docsify.js" data-theme-color="#3F51B5"></script>
521+
```
522+
523+
```js
524+
window.$docsify = {
525+
themeColor: '#3F51B5'
526+
}
527+
```
Collapse file

‎src/index.js‎

Copy file name to clipboardExpand all lines: src/index.js
+4Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const OPTIONS = merge({
1717
basePath: '',
1818
auto2top: false,
1919
name: '',
20+
themeColor: '',
2021
nameLink: window.location.pathname
2122
}, window.$docsify)
2223
const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()
@@ -35,6 +36,9 @@ if (script) {
3536
if (OPTIONS.sidebar) OPTIONS.sidebar = window[OPTIONS.sidebar]
3637
}
3738

39+
// utils
40+
window.__docsify__ = OPTIONS
41+
3842
// load options
3943
render.init(OPTIONS)
4044

Collapse file

‎src/polyfill.js‎

Copy file name to clipboard
+27Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { load } from './util'
2+
3+
function replaceVar (block) {
4+
block.innerHTML = block.innerHTML.replace(/var\(\s*--theme-color.*?\)/g, __docsify__.themeColor)
5+
}
6+
7+
export function cssVars () {
8+
// variable support
9+
if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) return
10+
11+
const styleBlocks = document.querySelectorAll('style:not(.inserted),link')
12+
13+
;[].forEach.call(styleBlocks, block => {
14+
if (block.nodeName === 'STYLE') {
15+
replaceVar(block)
16+
} else if (block.nodeName === 'LINK') {
17+
load(block.getAttribute('href'))
18+
.then(res => {
19+
const style = document.createElement('style')
20+
21+
style.innerHTML = res
22+
document.head.appendChild(style)
23+
replaceVar(style)
24+
})
25+
}
26+
})
27+
}
Collapse file

‎src/render.js‎

Copy file name to clipboardExpand all lines: src/render.js
+26-23Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import marked from 'marked'
22
import Prism from 'prismjs'
33
import * as tpl from './tpl'
44
import * as event from './event'
5+
import * as polyfill from './polyfill'
56
import { genTree, getRoute, isMobile, slugify, merge, emojify } from './util'
67

7-
let OPTIONS = {}
88
let markdown = marked
99
let toc = []
1010
const CACHE = {}
@@ -19,11 +19,8 @@ const renderTo = function (dom, content) {
1919

2020
/**
2121
* init render
22-
* @param {Object} options
2322
*/
24-
export function init (options) {
25-
OPTIONS = options
26-
23+
export function init () {
2724
const renderer = new marked.Renderer()
2825
/**
2926
* render anchor tag
@@ -33,7 +30,7 @@ export function init (options) {
3330
const slug = slugify(text)
3431
let route = ''
3532

36-
if (OPTIONS.router) {
33+
if (__docsify__.router) {
3734
route = `#/${getRoute()}`
3835
}
3936

@@ -48,7 +45,7 @@ export function init (options) {
4845
return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl.replace(/:/g, '__colon__')}</code></pre>`
4946
}
5047
renderer.link = function (href, title, text) {
51-
if (OPTIONS.router && !/:/.test(href)) {
48+
if (__docsify__.router && !/:/.test(href)) {
5249
href = `#/${href}`.replace(/\/\//g, '/')
5350
}
5451

@@ -63,11 +60,11 @@ export function init (options) {
6360
return `<p>${text}</p>`
6461
}
6562

66-
if (typeof OPTIONS.markdown === 'function') {
63+
if (typeof __docsify__.markdown === 'function') {
6764
markdown.setOptions({ renderer })
68-
markdown = OPTIONS.markdown.call(this, markdown)
65+
markdown = __docsify__.markdown.call(this, markdown)
6966
} else {
70-
markdown.setOptions(merge({ renderer }, OPTIONS.markdown))
67+
markdown.setOptions(merge({ renderer }, __docsify__.markdown))
7168
}
7269

7370
const md = markdown
@@ -81,17 +78,23 @@ export function init (options) {
8178
export function renderApp (dom, replace) {
8279
const nav = document.querySelector('nav') || document.createElement('nav')
8380

84-
if (!OPTIONS.repo) nav.classList.add('no-badge')
81+
if (!__docsify__.repo) nav.classList.add('no-badge')
8582

86-
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(OPTIONS.repo) +
87-
(OPTIONS.coverpage ? tpl.cover() : '') +
88-
tpl.main(OPTIONS.sidebarToggle ? tpl.toggle() : '')
83+
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(__docsify__.repo) +
84+
(__docsify__.coverpage ? tpl.cover() : '') +
85+
tpl.main(__docsify__.sidebarToggle ? tpl.toggle() : '')
8986
document.body.insertBefore(nav, document.body.children[0])
9087

88+
// theme color
89+
if (__docsify__.themeColor) {
90+
document.head.innerHTML += tpl.theme(__docsify__.themeColor)
91+
polyfill.cssVars()
92+
}
93+
9194
// bind toggle
9295
event.bindToggle('button.sidebar-toggle')
9396
// bind sticky effect
94-
if (OPTIONS.coverpage) {
97+
if (__docsify__.coverpage) {
9598
!isMobile() && window.addEventListener('scroll', event.sticky)
9699
} else {
97100
document.body.classList.add('sticky')
@@ -103,7 +106,7 @@ export function renderApp (dom, replace) {
103106
*/
104107
export function renderArticle (content) {
105108
renderTo('article', content ? markdown(content) : 'not found')
106-
if (!OPTIONS.sidebar && !OPTIONS.loadSidebar) renderSidebar()
109+
if (!__docsify__.sidebar && !__docsify__.loadSidebar) renderSidebar()
107110

108111
if (content && typeof Vue !== 'undefined') {
109112
CACHE.vm && CACHE.vm.$destroy()
@@ -120,7 +123,7 @@ export function renderArticle (content) {
120123
: new Vue({ el: 'main' }) // eslint-disable-line
121124
CACHE.vm && CACHE.vm.$nextTick(_ => event.scrollActiveSidebar())
122125
}
123-
if (OPTIONS.auto2top) setTimeout(() => event.scroll2Top(OPTIONS.auto2top), 0)
126+
if (__docsify__.auto2top) setTimeout(() => event.scroll2Top(__docsify__.auto2top), 0)
124127
}
125128

126129
/**
@@ -144,13 +147,13 @@ export function renderSidebar (content) {
144147
html = markdown(content)
145148
// find url tag
146149
html = html.match(/<ul[^>]*>([\s\S]+)<\/ul>/g)[0]
147-
} else if (OPTIONS.sidebar) {
148-
html = tpl.tree(OPTIONS.sidebar, '<ul>')
150+
} else if (__docsify__.sidebar) {
151+
html = tpl.tree(__docsify__.sidebar, '<ul>')
149152
} else {
150-
html = tpl.tree(genTree(toc, OPTIONS.maxLevel), '<ul>')
153+
html = tpl.tree(genTree(toc, __docsify__.maxLevel), '<ul>')
151154
}
152155

153-
html = (OPTIONS.name ? `<h1><a href="${OPTIONS.nameLink}">${OPTIONS.name}</a></h1>` : '') + html
156+
html = (__docsify__.name ? `<h1><a href="${__docsify__.nameLink}">${__docsify__.name}</a></h1>` : '') + html
154157
renderTo('aside.sidebar', html)
155158
const target = event.activeLink('aside.sidebar', true)
156159
if (target) renderSubSidebar(target)
@@ -160,8 +163,8 @@ export function renderSidebar (content) {
160163
}
161164

162165
export function renderSubSidebar (target) {
163-
if (!OPTIONS.subMaxLevel) return
164-
target.parentNode.innerHTML += tpl.tree(genTree(toc, OPTIONS.subMaxLevel), '<ul>')
166+
if (!__docsify__.subMaxLevel) return
167+
target.parentNode.innerHTML += tpl.tree(genTree(toc, __docsify__.subMaxLevel), '<ul>')
165168
}
166169

167170
/**
Collapse file

‎src/themes/basic/_coverpage.css‎

Copy file name to clipboardExpand all lines: src/themes/basic/_coverpage.css
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,9 @@ section.cover {
7272

7373
.cover-main p:last-child a {
7474
border-radius: 2em;
75-
border: 1px solid $color-primary;
75+
border: 1px solid var(--theme-color, $color-primary);
7676
box-sizing: border-box;
77-
color: $color-primary;
77+
color: var(--theme-color, $color-primary);
7878
font-size: 1.05em;
7979
letter-spacing: 0.1em;
8080
padding: 0.75em 2em;
@@ -85,7 +85,7 @@ section.cover {
8585

8686
&:last-child {
8787
margin-right: 0;
88-
background-color: $color-primary;
88+
background-color: var(--theme-color, $color-primary);
8989
color: #fff;
9090

9191
&:hover {
Collapse file

‎src/themes/basic/_layout.css‎

Copy file name to clipboardExpand all lines: src/themes/basic/_layout.css
+7-7Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414

1515
.progress {
16-
background-color: $color-primary;
16+
background-color: var(--theme-color, $color-primary);
1717
height: 2px;
1818
left: 0px;
1919
position: fixed;
@@ -86,12 +86,12 @@ nav {
8686
transition: color .3s;
8787

8888
&:hover {
89-
color: $color-primary;
89+
color: var(--theme-color, $color-primary);
9090
}
9191

9292
&.active {
93-
color: $color-primary;
94-
border-bottom: 2px solid $color-primary;
93+
color: var(--theme-color, $color-primary);
94+
border-bottom: 2px solid var(--theme-color, $color-primary);
9595
}
9696
}
9797

@@ -103,7 +103,7 @@ nav {
103103
ul {
104104
border-radius: 2px;
105105
background-color: rgba($color-bg, .6);
106-
border: 1px solid $color-primary;
106+
border: 1px solid var(--theme-color, $color-primary);
107107
opacity: 0;
108108
overflow: hidden;
109109
padding: 0;
@@ -160,7 +160,7 @@ nav {
160160
color: $color-bg;
161161
height: 80px;
162162
width: 80px;
163-
fill: $color-primary;
163+
fill: var(--theme-color, $color-primary);
164164
}
165165
}
166166

@@ -246,7 +246,7 @@ main {
246246
}
247247

248248
span {
249-
background-color: $color-primary;
249+
background-color: var(--theme-color, $color-primary);
250250
display: block;
251251
size: 16px 2px;
252252
margin-bottom: 4px;

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.