Merge branch 'chart-yaml' into gallery

2026-01-06 13:39:19 +00:00 · 2018-10-11 12:59:53 +02:00
parent 5d9b1abe82 0e29e8ac76
commit c5f6ace332
51 changed files with 1117 additions and 75 deletions
--- a/browser/main/Detail/Detail.styl
+++ b/browser/main/Detail/Detail.styl
@@ -23,7 +23,7 @@ body[data-theme="dark"]
    border-left 1px solid $ui-dark-borderColor
  .empty-message
    color $ui-dark-inactive-text-color
-    
+
 body[data-theme="solarized-dark"]
  .root
    background-color $ui-solarized-dark-noteDetail-backgroundColor
@@ -37,3 +37,10 @@ body[data-theme="monokai"]
    border-left 1px solid $ui-monokai-borderColor
  .empty-message
    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    background-color $ui-dracula-noteDetail-backgroundColor
+    border-left 1px solid $ui-dracula-borderColor
+  .empty-message
+    color $ui-dracula-text-color
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -36,7 +36,7 @@
  height 34px
  width 20px
  line-height 34px
-  
+
 .search-input
  vertical-align middle
  position relative
@@ -71,7 +71,7 @@
  overflow ellipsis
  cursor pointer
  &:hover
-    background-color $ui-button--hover-backgroundColor 
+    background-color $ui-button--hover-backgroundColor

 .search-optionList-item--active
  @extend .search-optionList-item
@@ -159,3 +159,29 @@ body[data-theme="monokai"]
      color $ui-monokai-button--active-color
  .search-optionList-item-name-surfix
    color $ui-monokai-inactive-text-color
+
+body[data-theme="dracula"]
+ .root
+    color $ui-dracula-text-color
+    &:hover
+      color #f8f8f2
+      background-color $ui-dark-button--hover-backgroundColor
+      border-color $ui-dracula-borderColor
+
+  .search-optionList
+    color #f8f8f2
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-button-backgroundColor
+
+  .search-optionList-item
+    &:hover
+      background-color lighten($ui-dracula-button--hover-backgroundColor, 15%)
+
+  .search-optionList-item--active
+    background-color $ui-dracula-button--active-backgroundColor
+    color $ui-dracula-button--active-color
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      color $ui-dracula-button--active-color
+  .search-optionList-item-name-surfix
+    color $ui-dracula-inactive-text-color
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -257,3 +257,43 @@ body[data-theme="monokai"]
      color $ui-dark-inactive-text-color
      &:hover
        color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .control-infoButton-panel
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control-infoButton-panel-trash
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .modification-date
+    color $ui-dracula-text-color
+
+  .modification-date-desc
+    color $ui-inactive-text-color
+
+  .infoPanel-defaul-count
+    color $ui-dracula-text-color
+
+  .infoPanel-sub-count
+    color $ui-inactive-text-color
+
+  .infoPanel-default
+    color $ui-dracula-text-color
+
+  .infoPanel-sub
+    color $ui-inactive-text-color
+
+  .infoPanel-noteLink
+    background-color alpha($ui-dracula-borderColor, 20%)
+    color $ui-dracula-text-color
+
+  [id=export-wrap]
+    button
+      color $ui-dark-inactive-text-color
+      &:hover
+        background-color alpha($ui-dracula-borderColor, 20%)
+        color $ui-dracula-text-color
+    p
+      color $ui-dark-inactive-text-color
+      &:hover
+        color $ui-dracula-text-color
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -76,3 +76,8 @@ body[data-theme="monokai"]
  .root
    border-left 1px solid $ui-monokai-borderColor
    background-color $ui-monokai-noteDetail-backgroundColor
+
+body[data-theme="dracula"]
+  .root
+    border-left 1px solid $ui-dracula-borderColor
+    background-color $ui-dracula-noteDetail-backgroundColor
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -98,8 +98,13 @@ body[data-theme="solarized-dark"]
  .info
    border-color $ui-solarized-dark-borderColor
    background-color $ui-solarized-dark-noteDetail-backgroundColor
-    
+
 body[data-theme="monokai"]
  .info
    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-noteDetail-backgroundColor
+    background-color $ui-monokai-noteDetail-backgroundColor
+
+body[data-theme="dracula"]
+  .info
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteDetail-backgroundColor
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -169,4 +169,21 @@ body[data-theme="monokai"]

  .tabList
    background-color $ui-monokai-noteDetail-backgroundColor
-    color $ui-monokai-text-color
+    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    border-left 1px solid $ui-dracula-borderColor
+    background-color $ui-dracula-noteDetail-backgroundColor
+
+  .body
+    background-color $ui-dracula-noteDetail-backgroundColor
+
+  .body .description textarea
+    background-color $ui-dracula-noteDetail-backgroundColor
+    color $ui-dracula-text-color
+    border 1px solid $ui-dracula-borderColor
+
+  .tabList
+    background-color $ui-dracula-noteDetail-backgroundColor
+    color $ui-dracula-text-color
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -76,3 +76,14 @@ body[data-theme="monokai"]

  .tag-label
    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .tag
+    background-color $ui-dracula-tag-backgroundColor
+
+  .tag-removeButton
+    border-color $ui-dracula-button--focus-borderColor
+    background-color transparent
+
+  .tag-label
+    color $ui-dracula-borderColor
--- a/browser/main/Detail/ToggleModeButton.styl
+++ b/browser/main/Detail/ToggleModeButton.styl
@@ -63,3 +63,10 @@ body[data-theme="monokai"]
    .active
      background-color #f92672
      box-shadow 2px 0px 7px #222222
+
+body[data-theme="dracula"]
+  .control-toggleModeButton
+      background-color #44475a
+    .active
+      background-color #bd93f9
+      box-shadow 2px 0px 7px #222222
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -141,7 +141,7 @@ class Main extends React.Component {
  componentDidMount () {
    const { dispatch, config } = this.props

-    const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai']
+    const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula']

    if (supportedThemes.indexOf(config.ui.theme) !== -1) {
      document.body.setAttribute('data-theme', config.ui.theme)
--- a/browser/main/NewNoteButton/NewNoteButton.styl
+++ b/browser/main/NewNoteButton/NewNoteButton.styl
@@ -79,3 +79,7 @@ body[data-theme="solarized-dark"]
 body[data-theme="monokai"]
  .root, .root--expanded
    background-color $ui-monokai-noteList-backgroundColor
+
+body[data-theme="dracula"]
+  .root, .root--expanded
+    background-color $ui-dracula-noteList-backgroundColor
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -84,7 +84,7 @@ body[data-theme="dark"]
    color $ui-dark-inactive-text-color
    &:hover
      color $ui-dark-text-color
-  
+
  .control-button--active
    color $ui-dark-text-color
    &:active
@@ -109,7 +109,7 @@ body[data-theme="solarized-dark"]
    color $ui-solarized-dark-inactive-text-color
    &:hover
      color $ui-solarized-dark-text-color
-  
+
  .control-button--active
    color $ui-solarized-dark-text-color
    &:active
@@ -138,3 +138,27 @@ body[data-theme="monokai"]
    color $ui-monokai-text-color
    &:active
      color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    border-color $ui-dracula-borderColor
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control
+    background-color $ui-dracula-noteList-backgroundColor
+    border-color $ui-dracula-borderColor
+
+  .control-sortBy-select
+    &:hover
+      transition 0.2s
+      color $ui-dracula-text-color
+
+  .control-button
+    color $ui-dracula-inactive-text-color
+    &:hover
+      color $ui-dracula-text-color
+
+  .control-button--active
+    color $ui-dracula-text-color
+    &:active
+      color $ui-dracula-text-color
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -19,7 +19,7 @@
  text-align center


-  
+
 .top-menu-label
  margin-left 5px
  overflow ellipsis
@@ -122,3 +122,8 @@ body[data-theme="monokai"]
  .root, .root--folded
    background-color $ui-monokai-backgroundColor
    border-right 1px solid $ui-monokai-borderColor
+
+body[data-theme="dracula"]
+  .root, .root--folded
+    background-color $ui-dracula-backgroundColor
+    border-right 1px solid $ui-dracula-borderColor
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -34,7 +34,7 @@
    color $ui-active-color
  span
    margin-left 5px
-  
+
 .update
  navButtonColor()
  height 24px
@@ -80,3 +80,14 @@ body[data-theme="monokai"]
      color $ui-monokai-active-color
    &:active
      color $ui-monokai-active-color
+
+body[data-theme="dracula"]
+   navButtonColor()
+  .zoom
+    border-color $ui-dark-borderColor
+    color $ui-dracula-text-color
+    &:hover
+      transition 0.15s
+      color $ui-dracula-active-color
+    &:active
+      color $ui-dracula-active-color
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -256,3 +256,25 @@ body[data-theme="monokai"]
    input
      background-color $ui-monokai-noteList-backgroundColor
      color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root, .root--expanded
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control
+    border-color $ui-dracula-borderColor
+  .control-search
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control-search-icon
+    absolute top bottom left
+    line-height 32px
+    width 35px
+    color $ui-dracula-inactive-text-color
+    background-color $ui-dracula-noteList-backgroundColor
+
+  .control-search-input
+    background-color $ui-dracula-noteList-backgroundColor
+    input
+      background-color $ui-dracula-noteList-backgroundColor
+      color $ui-dracula-text-color
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -18,6 +18,9 @@ body
 ::-webkit-scrollbar
  width 12px

+::-webkit-scrollbar-corner
+  background-color: transparent;
+
 ::-webkit-scrollbar-thumb
  background-color rgba(0, 0, 0, 0.15)

@@ -162,6 +165,15 @@ body[data-theme="monokai"]
  .sortableItemHelper
    color: $ui-monokai-text-color

+body[data-theme="dracula"]
+  ::-webkit-scrollbar-thumb
+    background-color rgba(0, 0, 0, 0.3)
+  .ModalBase
+    .modalBack
+      background-color $ui-dracula-backgroundColor
+  .sortableItemHelper
+    color: $ui-dracula-text-color
+
 body[data-theme="default"]
  .SideNav ::-webkit-scrollbar-thumb
    background-color rgba(255, 255, 255, 0.3)
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -65,7 +65,8 @@ export const DEFAULT_CONFIG = {
    smartArrows: false,
    allowCustomCSS: false,
    customCSS: '',
-    sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    sanitize: 'STRICT', // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    lineThroughCheckbox: true
  },
  blog: {
    type: 'wordpress', // Available value: wordpress, add more types in the future plz
@@ -147,6 +148,8 @@ function set (updates) {
    document.body.setAttribute('data-theme', 'solarized-dark')
  } else if (newConfig.ui.theme === 'monokai') {
    document.body.setAttribute('data-theme', 'monokai')
+  } else if (newConfig.ui.theme === 'dracula') {
+    document.body.setAttribute('data-theme', 'dracula')
  } else {
    document.body.setAttribute('data-theme', 'default')
  }
--- a/browser/main/modals/CreateFolderModal.styl
+++ b/browser/main/modals/CreateFolderModal.styl
@@ -128,3 +128,29 @@ body[data-theme="monokai"]

  .control-confirmButton
    colorMonokaiPrimaryButton()
+
+body[data-theme="dracula"]
+  .root
+    modalDracula()
+    width 500px
+    height 270px
+    overflow hidden
+    position relative
+
+  .header
+    background-color transparent
+    border-color $ui-dark-borderColor
+    color $ui-dracula-text-color
+
+  .control-folder-label
+    color $ui-dracula-text-color
+
+  .control-folder-input
+    border 1px solid $ui-input--create-folder-modal
+    color white
+
+   .description
+    color $ui-inactive-text-color
+
+  .control-confirmButton
+    colorDraculaPrimaryButton()
--- a/browser/main/modals/NewNoteModal.styl
+++ b/browser/main/modals/NewNoteModal.styl
@@ -97,3 +97,20 @@ body[data-theme="monokai"]

  .description
    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    background-color transparent
+
+  .header
+    color $ui-dracula-text-color
+
+  .control-button
+    border-color $ui-dracula-borderColor
+    color $ui-dracula-text-color
+    background-color transparent
+    &:focus
+      colorDraculaPrimaryButton()
+
+  .description
+    color $ui-dracula-text-color
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -138,6 +138,10 @@ colorMonokaiControl()
  background-color $ui-monokai-button-backgroundColor
  color $ui-monokai-text-color

+colorDraculaControl()
+  border none
+  background-color $ui-dracula-button-backgroundColor
+  color $ui-dracula-text-color

 body[data-theme="dark"]
  .root
@@ -220,3 +224,30 @@ body[data-theme="monokai"]
  .group-section-control
    select, .group-section-control-input
      colorMonokaiControl()
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+
+  .group-header
+    color $ui-dracula-text-color
+    border-color $ui-dracula-borderColor
+
+  .group-header2
+    color $ui-dracula-text-color
+
+  .group-section-control-input
+    border-color $ui-dracula-borderColor
+
+  .group-control
+    border-color $ui-dracula-borderColor
+  .group-control-leftButton
+    colorDarkDefaultButton()
+    border-color $ui-dracula-borderColor
+  .group-control-rightButton
+    colorDraculaPrimaryButton()
+  .group-hint
+    colorDraculaControl()
+  .group-section-control
+    select, .group-section-control-input
+      colorDraculaControl()
--- a/browser/main/modals/PreferencesModal/Crowdfunding.styl
+++ b/browser/main/modals/PreferencesModal/Crowdfunding.styl
@@ -29,7 +29,7 @@ p
 body[data-theme="dark"]
  p
    color $ui-dark-text-color
-    
+
 body[data-theme="solarized-dark"]
  .root
    color $ui-solarized-dark-text-color
@@ -41,3 +41,9 @@ body[data-theme="monokai"]
    color $ui-monokai-text-color
  p
    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+  p
+    color $ui-dracula-text-color
--- a/browser/main/modals/PreferencesModal/FolderItem.styl
+++ b/browser/main/modals/PreferencesModal/FolderItem.styl
@@ -154,3 +154,26 @@ body[data-theme="monokai"]

  .folderItem-right-dangerButton
    colorMonokaiPrimaryButton()
+
+body[data-theme="dracula"]
+  .folderItem
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+
+  .folderItem-left-danger
+    color $danger-color
+
+  .folderItem-left-key
+    color $ui-dark-inactive-text-color
+
+  .folderItem-left-colorButton
+    colorDraculaPrimaryButton()
+
+  .folderItem-right-button
+    colorDraculaPrimaryButton()
+
+  .folderItem-right-confirmButton
+    colorDraculaPrimaryButton()
+
+  .folderItem-right-dangerButton
+    colorDraculaPrimaryButton()
--- a/browser/main/modals/PreferencesModal/InfoTab.styl
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -60,7 +60,7 @@
 body[data-theme="dark"]
  .root
    color alpha($tab--dark-text-color, 80%)
-    
+

 body[data-theme="solarized-dark"]
  .root
@@ -75,3 +75,10 @@ body[data-theme="monokai"]
 .list
  a
    color $ui-monokai-active-color
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+.list
+  a
+    color $ui-dracula-active-color
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -90,7 +90,7 @@ body[data-theme="dark"]
    background-color $dark-primary-button-background--active
    &:hover
      color white
-      
+

 body[data-theme="solarized-dark"]
  .root
@@ -139,3 +139,27 @@ body[data-theme="monokai"]
    background-color $ui-monokai-button--active-backgroundColor
    &:hover
      color white
+
+body[data-theme="dracula"]
+  .root
+    background-color transparent
+  .top-bar
+    background-color transparent
+    border-color $ui-dracula-borderColor
+    p
+      color $ui-dracula-text-color
+  .nav
+    background-color transparent
+    border-color $ui-dracula-borderColor
+  .nav-button
+    background-color transparent
+    color $ui-dracula-text-color
+    &:hover
+      color $ui-dracula-text-color
+
+  .nav-button--active
+    @extend .nav-button
+    color $ui-dracula-button--active-color
+    background-color $ui-dracula-button--active-backgroundColor
+    &:hover
+      color #f8f8f2
--- a/browser/main/modals/PreferencesModal/SnippetList.js
+++ b/browser/main/modals/PreferencesModal/SnippetList.js
@@ -55,7 +55,11 @@ class SnippetList extends React.Component {

  defineSnippetStyleName (snippet) {
    const { currentSnippet } = this.props
-    if (currentSnippet == null) return
+
+    if (currentSnippet == null) {
+      return 'snippet-item'
+    }
+
    if (currentSnippet.id === snippet.id) {
      return 'snippet-item-selected'
    } else {
--- a/browser/main/modals/PreferencesModal/SnippetTab.js
+++ b/browser/main/modals/PreferencesModal/SnippetTab.js
@@ -6,6 +6,9 @@ import i18n from 'browser/lib/i18n'
 import dataApi from 'browser/main/lib/dataApi'
 import SnippetList from './SnippetList'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+import copy from 'copy-to-clipboard'
+
+const path = require('path')

 class SnippetTab extends React.Component {
  constructor (props) {
@@ -16,6 +19,17 @@ class SnippetTab extends React.Component {
    this.changeDelay = null
  }

+  notify (title, options) {
+    if (global.process.platform === 'win32') {
+      options.icon = path.join(
+        'file://',
+        global.__dirname,
+        '../../resources/app.png'
+      )
+    }
+    return new window.Notification(title, options)
+  }
+
  handleSnippetNameOrPrefixChange () {
    clearTimeout(this.changeDelay)
    this.changeDelay = setTimeout(() => {
@@ -27,12 +41,14 @@ class SnippetTab extends React.Component {

  handleSnippetSelect (snippet) {
    const { currentSnippet } = this.state
-    if (currentSnippet === null || currentSnippet.id !== snippet.id) {
-      dataApi.fetchSnippet(snippet.id).then(changedSnippet => {
-        // notify the snippet editor to load the content of the new snippet
-        this.snippetEditor.onSnippetChanged(changedSnippet)
-        this.setState({currentSnippet: changedSnippet})
-      })
+    if (snippet !== null) {
+      if (currentSnippet === null || currentSnippet.id !== snippet.id) {
+        dataApi.fetchSnippet(snippet.id).then(changedSnippet => {
+          // notify the snippet editor to load the content of the new snippet
+          this.snippetEditor.onSnippetChanged(changedSnippet)
+          this.setState({currentSnippet: changedSnippet})
+        })
+      }
    }
  }

@@ -54,6 +70,17 @@ class SnippetTab extends React.Component {
    }
  }

+  handleCopySnippet (e) {
+    const showCopyNotification = this.props.config.ui.showCopyNotification
+    copy(this.state.currentSnippet.content)
+    if (showCopyNotification) {
+      this.notify('Saved to Clipboard!', {
+        body: 'Paste it wherever you want!',
+        silent: true
+      })
+    }
+  }
+
  render () {
    const { config, storageKey } = this.props
    const { currentSnippet } = this.state
@@ -70,6 +97,13 @@ class SnippetTab extends React.Component {
          onSnippetDeleted={this.handleDeleteSnippet.bind(this)}
          currentSnippet={currentSnippet} />
        <div styleName='snippet-detail' style={{visibility: currentSnippet ? 'visible' : 'hidden'}}>
+          <div styleName='group-section'>
+            <div styleName='group-section-control'>
+              <button styleName='group-control-rightButton'
+                onClick={e => this.handleCopySnippet(e)}>{i18n.__('Copy')}
+              </button>
+            </div>
+          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>{i18n.__('Snippet name')}</div>
            <div styleName='group-section-control'>
--- a/browser/main/modals/PreferencesModal/SnippetTab.styl
+++ b/browser/main/modals/PreferencesModal/SnippetTab.styl
@@ -196,3 +196,19 @@ body[data-theme="monokai"]
    color white
  .group-control-button
    colorMonokaiPrimaryButton()
+
+body[data-theme="dracula"]
+  .snippets
+    background $ui-dracula-backgroundColor
+    .snippet-item
+      color #f8f8f2
+      &::after
+        background $ui-dracula-borderColor
+      &:hover
+        background darken($ui-dracula-backgroundColor, 5)
+    .snippet-item-selected
+      background darken($ui-dracula-backgroundColor, 5)
+  .snippet-detail
+    color #f8f8f2
+  .group-control-button
+    colorDraculaPrimaryButton()
--- a/browser/main/modals/PreferencesModal/StoragesTab.styl
+++ b/browser/main/modals/PreferencesModal/StoragesTab.styl
@@ -158,7 +158,7 @@ body[data-theme="dark"]
  .addStorage-body-control-cancelButton
    colorDarkDefaultButton()
    border-color $ui-dark-borderColor
-    
+


 body[data-theme="solarized-dark"]
@@ -236,3 +236,41 @@ body[data-theme="monokai"]
  .addStorage-body-control-cancelButton
    colorDarkDefaultButton()
    border-color $ui-monokai-borderColor
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+
+  .folderList-item
+    border-bottom $ui-dracula-borderColor
+
+  .folderList-empty
+    color $ui-dracula-text-color
+
+  .list-empty
+    color $ui-dracula-text-color
+  .list-control-addStorageButton
+    border-color $ui-dracula-button-backgroundColor
+    background-color $ui-dracula-button-backgroundColor
+    color $ui-dracula-text-color
+
+  .addStorage-header
+    color $ui-dracula-text-color
+    border-color $ui-dracula-borderColor
+
+  .addStorage-body-section-name-input
+    border-color $$ui-dracula-borderColor
+
+  .addStorage-body-section-type-description
+    color $ui-dracula-text-color
+
+  .addStorage-body-section-path-button
+    colorPrimaryButton()
+  .addStorage-body-control
+    border-color $ui-dracula-borderColor
+
+  .addStorage-body-control-createButton
+    colorDarkPrimaryButton()
+  .addStorage-body-control-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-dracula-borderColor
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -107,6 +107,7 @@ class UiTab extends React.Component {
        smartArrows: this.refs.previewSmartArrows.checked,
        sanitize: this.refs.previewSanitize.value,
        allowCustomCSS: this.refs.previewAllowCustomCSS.checked,
+        lineThroughCheckbox: this.refs.lineThroughCheckbox.checked,
        customCSS: this.customCSSCM.getCodeMirror().getValue()
      }
    }
@@ -187,6 +188,7 @@ class UiTab extends React.Component {
                <option value='white'>{i18n.__('White')}</option>
                <option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
                <option value='monokai'>{i18n.__('Monokai')}</option>
+                <option value='dracula'>{i18n.__('Dracula')}</option>
                <option value='dark'>{i18n.__('Dark')}</option>
              </select>
            </div>
@@ -512,6 +514,16 @@ class UiTab extends React.Component {
              </select>
            </div>
          </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.lineThroughCheckbox}
+                ref='lineThroughCheckbox'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Allow line through checkbox')}
+            </label>
+          </div>
          <div styleName='group-checkBoxSection'>
            <label>
              <input onChange={(e) => this.handleUIChange(e)}