Skip to content

Commit

Permalink
feat: customize the theme color
Browse files Browse the repository at this point in the history
  • Loading branch information
QingWei-Li committed Feb 5, 2017
1 parent ae1ad73 commit 5cc9f05
Show file tree
Hide file tree
Showing 13 changed files with 120 additions and 42 deletions.
3 changes: 2 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"extends": ["vue"],
"globals": {
"XMLHttpRequest": true
"XMLHttpRequest": true,
"__docsify__": true
}
}
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 2.0.0
### Features
- Customize the theme color

## 1.10.5
### Bug fixes
- fix initialize the Vue instance
Expand Down
10 changes: 9 additions & 1 deletion build/build-css.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,15 @@ var cssnano = require('cssnano').process
var resolve = require('path').resolve
var postcss = require('postcss')

var processor = postcss([require('postcss-salad')])
var processor = postcss([require('postcss-salad')({
features: {
precss: {
properties: {
preserve: true
}
}
}
})])

var saveMin = function (file, content) {
fs.writeFileSync(resolve(__dirname, '../lib/themes/', file), content)
Expand Down
13 changes: 13 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -503,4 +503,17 @@ window.$docsify = {
}
```

### theme-color

Customize the theme color.


```html
<script src="/lib/docsify.js" data-theme-color="#3F51B5"></script>
```

```js
window.$docsify = {
themeColor: '#3F51B5'
}
```
14 changes: 14 additions & 0 deletions docs/zh-cn.md
Original file line number Diff line number Diff line change
Expand Up @@ -511,3 +511,17 @@ window.$docsify = {
}
```

### themeColor

自定义主题色。


```html
<script src="/lib/docsify.js" data-theme-color="#3F51B5"></script>
```

```js
window.$docsify = {
themeColor: '#3F51B5'
}
```
4 changes: 4 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const OPTIONS = merge({
basePath: '',
auto2top: false,
name: '',
themeColor: '',
nameLink: window.location.pathname
}, window.$docsify)
const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()
Expand All @@ -35,6 +36,9 @@ if (script) {
if (OPTIONS.sidebar) OPTIONS.sidebar = window[OPTIONS.sidebar]
}

// utils
window.__docsify__ = OPTIONS

// load options
render.init(OPTIONS)

Expand Down
27 changes: 27 additions & 0 deletions src/polyfill.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { load } from './util'

function replaceVar (block) {
block.innerHTML = block.innerHTML.replace(/var\(\s*--theme-color.*?\)/g, __docsify__.themeColor)
}

export function cssVars () {
// variable support
if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) return

const styleBlocks = document.querySelectorAll('style:not(.inserted),link')

;[].forEach.call(styleBlocks, block => {
if (block.nodeName === 'STYLE') {
replaceVar(block)
} else if (block.nodeName === 'LINK') {
load(block.getAttribute('href'))
.then(res => {
const style = document.createElement('style')

style.innerHTML = res
document.head.appendChild(style)
replaceVar(style)
})
}
})
}
49 changes: 26 additions & 23 deletions src/render.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import marked from 'marked'
import Prism from 'prismjs'
import * as tpl from './tpl'
import * as event from './event'
import * as polyfill from './polyfill'
import { genTree, getRoute, isMobile, slugify, merge, emojify } from './util'

let OPTIONS = {}
let markdown = marked
let toc = []
const CACHE = {}
Expand All @@ -19,11 +19,8 @@ const renderTo = function (dom, content) {

/**
* init render
* @param {Object} options
*/
export function init (options) {
OPTIONS = options

export function init () {
const renderer = new marked.Renderer()
/**
* render anchor tag
Expand All @@ -33,7 +30,7 @@ export function init (options) {
const slug = slugify(text)
let route = ''

if (OPTIONS.router) {
if (__docsify__.router) {
route = `#/${getRoute()}`
}

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

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

if (typeof OPTIONS.markdown === 'function') {
if (typeof __docsify__.markdown === 'function') {
markdown.setOptions({ renderer })
markdown = OPTIONS.markdown.call(this, markdown)
markdown = __docsify__.markdown.call(this, markdown)
} else {
markdown.setOptions(merge({ renderer }, OPTIONS.markdown))
markdown.setOptions(merge({ renderer }, __docsify__.markdown))
}

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

if (!OPTIONS.repo) nav.classList.add('no-badge')
if (!__docsify__.repo) nav.classList.add('no-badge')

dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(OPTIONS.repo) +
(OPTIONS.coverpage ? tpl.cover() : '') +
tpl.main(OPTIONS.sidebarToggle ? tpl.toggle() : '')
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(__docsify__.repo) +
(__docsify__.coverpage ? tpl.cover() : '') +
tpl.main(__docsify__.sidebarToggle ? tpl.toggle() : '')
document.body.insertBefore(nav, document.body.children[0])

// theme color
if (__docsify__.themeColor) {
document.head.innerHTML += tpl.theme(__docsify__.themeColor)
polyfill.cssVars()
}

// bind toggle
event.bindToggle('button.sidebar-toggle')
// bind sticky effect
if (OPTIONS.coverpage) {
if (__docsify__.coverpage) {
!isMobile() && window.addEventListener('scroll', event.sticky)
} else {
document.body.classList.add('sticky')
Expand All @@ -103,7 +106,7 @@ export function renderApp (dom, replace) {
*/
export function renderArticle (content) {
renderTo('article', content ? markdown(content) : 'not found')
if (!OPTIONS.sidebar && !OPTIONS.loadSidebar) renderSidebar()
if (!__docsify__.sidebar && !__docsify__.loadSidebar) renderSidebar()

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

/**
Expand All @@ -144,13 +147,13 @@ export function renderSidebar (content) {
html = markdown(content)
// find url tag
html = html.match(/<ul[^>]*>([\s\S]+)<\/ul>/g)[0]
} else if (OPTIONS.sidebar) {
html = tpl.tree(OPTIONS.sidebar, '<ul>')
} else if (__docsify__.sidebar) {
html = tpl.tree(__docsify__.sidebar, '<ul>')
} else {
html = tpl.tree(genTree(toc, OPTIONS.maxLevel), '<ul>')
html = tpl.tree(genTree(toc, __docsify__.maxLevel), '<ul>')
}

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

export function renderSubSidebar (target) {
if (!OPTIONS.subMaxLevel) return
target.parentNode.innerHTML += tpl.tree(genTree(toc, OPTIONS.subMaxLevel), '<ul>')
if (!__docsify__.subMaxLevel) return
target.parentNode.innerHTML += tpl.tree(genTree(toc, __docsify__.subMaxLevel), '<ul>')
}

/**
Expand Down
6 changes: 3 additions & 3 deletions src/themes/basic/_coverpage.css
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,9 @@ section.cover {

.cover-main p:last-child a {
border-radius: 2em;
border: 1px solid $color-primary;
border: 1px solid var(--theme-color, $color-primary);
box-sizing: border-box;
color: $color-primary;
color: var(--theme-color, $color-primary);
font-size: 1.05em;
letter-spacing: 0.1em;
padding: 0.75em 2em;
Expand All @@ -85,7 +85,7 @@ section.cover {

&:last-child {
margin-right: 0;
background-color: $color-primary;
background-color: var(--theme-color, $color-primary);
color: #fff;

&:hover {
Expand Down
14 changes: 7 additions & 7 deletions src/themes/basic/_layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
}

.progress {
background-color: $color-primary;
background-color: var(--theme-color, $color-primary);
height: 2px;
left: 0px;
position: fixed;
Expand Down Expand Up @@ -86,12 +86,12 @@ nav {
transition: color .3s;

&:hover {
color: $color-primary;
color: var(--theme-color, $color-primary);
}

&.active {
color: $color-primary;
border-bottom: 2px solid $color-primary;
color: var(--theme-color, $color-primary);
border-bottom: 2px solid var(--theme-color, $color-primary);
}
}

Expand All @@ -103,7 +103,7 @@ nav {
ul {
border-radius: 2px;
background-color: rgba($color-bg, .6);
border: 1px solid $color-primary;
border: 1px solid var(--theme-color, $color-primary);
opacity: 0;
overflow: hidden;
padding: 0;
Expand Down Expand Up @@ -160,7 +160,7 @@ nav {
color: $color-bg;
height: 80px;
width: 80px;
fill: $color-primary;
fill: var(--theme-color, $color-primary);
}
}

Expand Down Expand Up @@ -246,7 +246,7 @@ main {
}

span {
background-color: $color-primary;
background-color: var(--theme-color, $color-primary);
display: block;
size: 16px 2px;
margin-bottom: 4px;
Expand Down
4 changes: 2 additions & 2 deletions src/themes/buble.css
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ $sidebar-width: 16em;
}

.markdown-section a {
color: $color-primary;
color: var(--theme-color, $color-primary);
font-weight: 400;
}

Expand Down Expand Up @@ -110,7 +110,7 @@ $sidebar-width: 16em;

.markdown-section blockquote {
color: #858585;
border-left: 4px solid $color-primary;
border-left: 4px solid var(--theme-color, $color-primary);
margin: 2em 0;
padding-left: 20px;
}
Expand Down
10 changes: 5 additions & 5 deletions src/themes/vue.css
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ body {
}

ul li.active>a {
color: $color-primary;
color: var(--theme-color, $color-primary);
font-weight: 600;
}
}
Expand All @@ -54,7 +54,7 @@ body {
}

.markdown-section a {
color: $color-primary;
color: var(--theme-color, $color-primary);
font-weight: 600;
}

Expand Down Expand Up @@ -107,7 +107,7 @@ body {

.markdown-section blockquote {
color: #858585;
border-left: 4px solid $color-primary;
border-left: 4px solid var(--theme-color, $color-primary);
margin: 2em 0;
padding-left: 20px;
}
Expand Down Expand Up @@ -179,7 +179,7 @@ body {
}

.token.string {
color: $color-primary;
color: var(--theme-color, $color-primary);
}

.token.selector {
Expand All @@ -201,7 +201,7 @@ body {
.token.control,
.token.directive,
.token.unit {
color: $color-primary;
color: var(--theme-color, $color-primary);
}

.token.keyword {
Expand Down
4 changes: 4 additions & 0 deletions src/tpl.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,7 @@ export function tree (toc, tpl = '') {
export function helper (className, content) {
return `<p class="${className}">${content.slice(5).trim()}</p>`
}

export function theme (color) {
return `<style>:root{--theme-color: ${color};}</style>`
}

0 comments on commit 5cc9f05

Please sign in to comment.