public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

dark theme

Browse Source
This commit is contained in:
Dick Choi
2016-08-14 17:28:46 +09:00
parent dd0440519b
commit 8736d87b95
32 changed files with 803 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
browser/components/MarkdownEditor.js
View File

@@ -147,6 +147,7 @@ class MarkdownEditor extends React.Component {
: 'preview--hide'
}
style={previewStyle}
theme={config.ui.theme}
fontSize={config.preview.fontSize}
fontFamily={config.preview.fontFamily}
codeBlockTheme={config.preview.codeBlockTheme}

7
browser/components/MarkdownPreview.js
View File

@@ -88,7 +88,8 @@ export default class MarkdownPreview extends React.Component {
prevProps.fontSize !== this.props.fontSize ||
prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
prevProps.lineNumber !== this.props.lineNumber
prevProps.lineNumber !== this.props.lineNumber ||
prevProps.theme !== this.props.theme
) this.rewriteIframe()
}
@@ -100,7 +101,7 @@ export default class MarkdownPreview extends React.Component {
el.removeEventListener('click', this.checkboxClickHandler)
})
let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, theme } = this.props
fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
? [fontFamily].concat(defaultFontFamily)
: defaultFontFamily
@@ -137,6 +138,8 @@ export default class MarkdownPreview extends React.Component {
<link rel="stylesheet" href="../node_modules/highlight.js/styles/${codeBlockTheme}.css">
<link rel="stylesheet" href="../resources/katex.min.css">
`
this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
this.refs.root.contentWindow.document.body.innerHTML = markdown(value)
Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {

45
browser/components/markdown.styl
View File

@@ -244,3 +244,48 @@ table
border-color borderColor
&:last-child
border-right solid 1px borderColor
themeDarkBackground = darken(#21252B, 10%)
themeDarkText = #DDDDDD
themeDarkBorder = lighten(themeDarkBackground, 20%)
themeDarkPreview = #282C34
themeDarkTableOdd = themeDarkPreview
themeDarkTableEven = darken(themeDarkPreview, 10%)
themeDarkTableHead = themeDarkTableEven
themeDarkTableBorder = themeDarkBorder
themeDarkModalButtonDefault = themeDarkPreview
themeDarkModalButtonDanger = #BF360C
body[data-theme="dark"]
color themeDarkText
border-color themeDarkBorder
background-color themeDarkPreview
a:hover
background-color alpha(lighten(brandColor, 30%), 0.2) !important
code
border-color darken(themeDarkBorder, 10%)
background-color lighten(themeDarkPreview, 5%)
pre
code
background-color transparent
label.taskListItem
background-color themeDarkPreview
table
thead
tr
background-color themeDarkTableHead
th
border-color themeDarkTableBorder
&:last-child
border-right solid 1px themeDarkTableBorder
tbody
tr:nth-child(2n + 1)
background-color themeDarkTableOdd
tr:nth-child(2n)
background-color themeDarkTableEven
td
border-color themeDarkTableBorder
&:last-child
border-right solid 1px themeDarkTableBorder