Skip to content

Commit b0fd170

Browse files
Rokt33rRokt33r
committed
Merge branch 'master' of github.com:BoostIO/Boostnote
2 parents b740055 + bf8f82f commit b0fd170

34 files changed

Lines changed: 806 additions & 20 deletions

‎browser/components/MarkdownEditor.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,7 @@ class MarkdownEditor extends React.Component {
147147
: 'preview--hide'
148148
}
149149
style={previewStyle}
150+
theme={config.ui.theme}
150151
fontSize={config.preview.fontSize}
151152
fontFamily={config.preview.fontFamily}
152153
codeBlockTheme={config.preview.codeBlockTheme}

‎browser/components/MarkdownPreview.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,8 @@ export default class MarkdownPreview extends React.Component {
8888
prevProps.fontSize !== this.props.fontSize ||
8989
prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
9090
prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
91-
prevProps.lineNumber !== this.props.lineNumber
91+
prevProps.lineNumber !== this.props.lineNumber ||
92+
prevProps.theme !== this.props.theme
9293
) this.rewriteIframe()
9394
}
9495

@@ -100,7 +101,7 @@ export default class MarkdownPreview extends React.Component {
100101
el.removeEventListener('click', this.checkboxClickHandler)
101102
})
102103

103-
let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
104+
let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, theme } = this.props
104105
fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
105106
? [fontFamily].concat(defaultFontFamily)
106107
: defaultFontFamily
@@ -137,6 +138,8 @@ export default class MarkdownPreview extends React.Component {
137138
<link rel="stylesheet" href="../node_modules/highlight.js/styles/${codeBlockTheme}.css">
138139
<link rel="stylesheet" href="../resources/katex.min.css">
139140
`
141+
142+
this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
140143
this.refs.root.contentWindow.document.body.innerHTML = markdown(value)
141144

142145
Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {

‎browser/components/markdown.styl‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,3 +244,48 @@ table
244244
border-color borderColor
245245
&:last-child
246246
border-right solid 1px borderColor
247+
248+
themeDarkBackground = darken(#21252B, 10%)
249+
themeDarkText = #DDDDDD
250+
themeDarkBorder = lighten(themeDarkBackground, 20%)
251+
themeDarkPreview = #282C34
252+
themeDarkTableOdd = themeDarkPreview
253+
themeDarkTableEven = darken(themeDarkPreview, 10%)
254+
themeDarkTableHead = themeDarkTableEven
255+
themeDarkTableBorder = themeDarkBorder
256+
themeDarkModalButtonDefault = themeDarkPreview
257+
themeDarkModalButtonDanger = #BF360C
258+
body[data-theme="dark"]
259+
color themeDarkText
260+
border-color themeDarkBorder
261+
background-color themeDarkPreview
262+
a:hover
263+
background-color alpha(lighten(brandColor, 30%), 0.2) !important
264+
265+
code
266+
border-color darken(themeDarkBorder, 10%)
267+
background-color lighten(themeDarkPreview, 5%)
268+
269+
pre
270+
code
271+
background-color transparent
272+
273+
label.taskListItem
274+
background-color themeDarkPreview
275+
table
276+
thead
277+
tr
278+
background-color themeDarkTableHead
279+
th
280+
border-color themeDarkTableBorder
281+
&:last-child
282+
border-right solid 1px themeDarkTableBorder
283+
tbody
284+
tr:nth-child(2n + 1)
285+
background-color themeDarkTableOdd
286+
tr:nth-child(2n)
287+
background-color themeDarkTableEven
288+
td
289+
border-color themeDarkTableBorder
290+
&:last-child
291+
border-right solid 1px themeDarkTableBorder

‎browser/finder/FinderMain.styl‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ $list-width = 250px
2020
border none
2121
outline none
2222
text-align center
23+
background-color transparent
2324
.result
2425
absolute left right bottom
2526
top $search-height
@@ -76,3 +77,32 @@ $list-width = 250px
7677
.result-detail
7778
absolute top bottom right
7879
left $nav-width + $list-width
80+
81+
body[data-theme="dark"]
82+
.root
83+
background-color $ui-dark-backgroundColor
84+
.search
85+
border-color $ui-dark-borderColor
86+
.search-input
87+
color $ui-dark-text-color
88+
89+
.result-nav
90+
background-color $ui-dark-backgroundColor
91+
label
92+
color $ui-dark-text-color
93+
94+
.result-nav-menu
95+
navDarkButtonColor()
96+
97+
.result-nav-menu--active
98+
background-color $ui-dark-button--active-backgroundColor
99+
color $ui-dark-button--active-color
100+
&:hover
101+
background-color $ui-dark-button--active-backgroundColor
102+
103+
.result-list
104+
border-color $ui-dark-borderColor
105+
106+
.result-detail
107+
absolute top bottom right
108+
left $nav-width + $list-width

‎browser/finder/NoteDetail.styl‎

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,6 @@
3131
position relative
3232
flex 1
3333
border-right $ui-border
34-
&:hover
35-
.tabList-item-deleteButton
36-
color $ui-inactive-text-color
37-
&:hover
38-
background-color darken($ui-backgroundColor, 15%)
39-
&:active
40-
color white
41-
background-color $ui-active-color
4234
.tabList-item--active
4335
@extend .tabList-item
4436
.tabList-item-button
@@ -47,6 +39,7 @@
4739
width 100%
4840
height 29px
4941
navButtonColor()
42+
outline none
5043
border-left 4px solid transparent
5144
.tabList-item-deleteButton
5245
position absolute
@@ -91,3 +84,40 @@
9184
box-sizing border-box
9285
height 100%
9386
width 100%
87+
88+
body[data-theme="dark"]
89+
.description
90+
border-color $ui-dark-borderColor
91+
92+
.description-textarea
93+
background-color $ui-dark-button--hover-backgroundColor
94+
color white
95+
96+
.tabList
97+
background-color $ui-button--active-backgroundColor
98+
border-bottom-color $ui-dark-borderColor
99+
background-color $ui-dark-backgroundColor
100+
.tabList-item
101+
border-color $ui-dark-borderColor
102+
&:hover
103+
background-color $ui-dark-button--hover-backgroundColor
104+
.tabList-item--active
105+
border-color $ui-dark-borderColor
106+
.tabList-item-button
107+
border-color $brand-color
108+
.tabList-item-button
109+
navDarkButtonColor()
110+
border-left 4px solid transparent
111+
.tabList-plusButton
112+
navDarkButtonColor()
113+
114+
.tabView-top
115+
border-color $ui-dark-borderColor
116+
.tabView-top-name
117+
border-color $ui-dark-borderColor
118+
color $ui-dark-text-color
119+
background-color $ui-dark-button--hover-backgroundColor
120+
.tabView-top-mode
121+
border-color $ui-dark-borderColor
122+
background-color $dark-default-button-background
123+
color $ui-dark-inactive-text-color

‎browser/finder/NoteItem.styl‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,3 +84,38 @@
8484
color $ui-inactive-text-color
8585
vertical-align middle
8686

87+
body[data-theme="dark"]
88+
.root
89+
border-color $ui-dark-borderColor
90+
&:hover
91+
background-color alpha($ui-active-color, 20%)
92+
93+
.root--active
94+
@extend .root
95+
.border
96+
border-color $ui-active-color
97+
98+
.info
99+
color $ui-dark-inactive-text-color
100+
101+
.info-left-folder
102+
color $ui-dark-text-color
103+
.info-left-folder-surfix
104+
color $ui-dark-inactive-text-color
105+
106+
.title
107+
color $ui-dark-text-color
108+
.title-icon
109+
color $ui-dark-inactive-text-color
110+
.title-empty
111+
color $ui-dark-inactive-text-color
112+
113+
.tagList-icon
114+
color $ui-dark-button-color
115+
116+
.tagList-item
117+
border-color $ui-dark-button--focus-borderColor
118+
background-color $ui-dark-backgroundColor
119+
120+
.tagList-empty
121+
color $ui-dark-inactive-text-color

‎browser/finder/StorageSection.styl‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,29 @@
5757
color $ui-button--active-color
5858
&:hover
5959
background-color $ui-button--active-backgroundColor
60+
61+
body[data-theme="dark"]
62+
.header-toggleButton
63+
navDarkButtonColor()
64+
.header-name
65+
navDarkButtonColor()
66+
67+
.header-name--active
68+
@extend .header-name
69+
background-color $ui-button--active-backgroundColor
70+
color $ui-button--active-color
71+
&:hover
72+
background-color $ui-button--active-backgroundColor
73+
74+
.folderList-item
75+
navDarkButtonColor()
76+
border-width 0 0 0 6px
77+
border-style solid
78+
border-color transparent
79+
80+
.folderList-item--active
81+
@extend .folderList-item
82+
background-color $ui-button--active-backgroundColor
83+
color $ui-button--active-color
84+
&:hover
85+
background-color $ui-button--active-backgroundColor

‎browser/finder/ipcClient.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,11 @@ nodeIpc.connectTo(
8888

8989
nodeIpc.of.node.on('config-renew', function (payload) {
9090
console.log('config', payload)
91+
if (payload.ui.theme === 'dark') {
92+
document.body.setAttribute('data-theme', 'dark')
93+
} else {
94+
document.body.setAttribute('data-theme', 'default')
95+
}
9196
store.default.dispatch({
9297
type: 'SET_CONFIG',
9398
config: payload

‎browser/main/Detail/Detail.styl‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,10 @@
1515
line-height 72px
1616
text-align center
1717
color $ui-inactive-text-color
18+
19+
body[data-theme="dark"]
20+
.root
21+
border-color $ui-dark-borderColor
22+
background-color $ui-dark-backgroundColor
23+
.empty-message
24+
color $ui-dark-inactive-text-color

‎browser/main/Detail/FolderSelect.styl‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,11 @@
5757

5858
.search-optionList
5959
position fixed
60-
border $ui-border
6160
z-index 200
6261
background-color white
6362
border-radius 2px
63+
box-shadow 2px 2px 10px gray
64+
6465

6566
.search-optionList-item
6667
height 34px
@@ -86,3 +87,45 @@
8687
font-size 10px
8788
color $ui-inactive-text-color
8889
margin-left 5px
90+
91+
body[data-theme="dark"]
92+
.root
93+
color $ui-dark-text-color
94+
&:hover
95+
color white
96+
background-color $ui-dark-button--hover-backgroundColor
97+
border-color $ui-dark-borderColor
98+
99+
.root--search, .root--focus
100+
@extend .root
101+
background-color $ui-dark-button--hover-backgroundColor
102+
border-color $ui-input--focus-borderColor
103+
&:hover
104+
background-color $ui-dark-button--hover-backgroundColor
105+
border-color $ui-input--focus-borderColor
106+
107+
.idle-label-name-surfix
108+
color $ui-dark-inactive-text-color
109+
110+
.search-input
111+
color white
112+
background-color transparent
113+
border-color $ui-dark-borderColor
114+
115+
.search-optionList
116+
color white
117+
background-color $ui-dark-button--hover-backgroundColor
118+
box-shadow 2px 2px 10px black
119+
120+
.search-optionList-item
121+
&:hover
122+
background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
123+
124+
.search-optionList-item--active
125+
background-color $ui-dark-button--active-backgroundColor
126+
color $ui-dark-button--active-color
127+
&:hover
128+
background-color $ui-dark-button--active-backgroundColor
129+
color $ui-dark-button--active-color
130+
.search-optionList-item-name-surfix
131+
color $ui-dark-inactive-text-color

0 commit comments

Comments
 (0)