resolved conflict

2025-12-13 09:46:22 +00:00 · 2018-05-25 18:42:02 +07:00
parent 680c2a2904 0d296c3b25
commit c2c50817f1
87 changed files with 1586 additions and 235 deletions
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -4,6 +4,7 @@ import _ from 'lodash'
 import CodeMirror from 'codemirror'
 import 'codemirror-mode-elixir'
 import attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'
+import convertModeName from 'browser/lib/convertModeName'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import iconv from 'iconv-lite'
 import crypto from 'crypto'
@@ -17,21 +18,6 @@ const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', '
 const buildCMRulers = (rulers, enableRulers) =>
  enableRulers ? rulers.map(ruler => ({ column: ruler })) : []

-function pass (name) {
-  switch (name) {
-    case 'ejs':
-      return 'Embedded Javascript'
-    case 'html_ruby':
-      return 'Embedded Ruby'
-    case 'objectivec':
-      return 'Objective C'
-    case 'text':
-      return 'Plain Text'
-    default:
-      return name
-  }
-}
-
 export default class CodeEditor extends React.Component {
  constructor (props) {
    super(props)
@@ -52,6 +38,9 @@ export default class CodeEditor extends React.Component {
        el = el.parentNode
      }
      this.props.onBlur != null && this.props.onBlur(e)
+
+      const {storageKey, noteKey} = this.props
+      attachmentManagement.deleteAttachmentsNotPresentInNote(this.editor.getValue(), storageKey, noteKey)
    }
    this.pasteHandler = (editor, e) => this.handlePaste(editor, e)
    this.loadStyleHandler = (e) => {
@@ -323,7 +312,7 @@ export default class CodeEditor extends React.Component {
  }

  setMode (mode) {
-    let syntax = CodeMirror.findModeByName(pass(mode))
+    let syntax = CodeMirror.findModeByName(convertModeName(mode))
    if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')

    this.editor.setOption('mode', syntax.mime)
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -283,6 +283,7 @@ class MarkdownEditor extends React.Component {
          indentSize={editorIndentSize}
          scrollPastEnd={config.preview.scrollPastEnd}
          smartQuotes={config.preview.smartQuotes}
+          breaks={config.preview.breaks}
          sanitize={config.preview.sanitize}
          ref='preview'
          onContextMenu={(e) => this.handleContextMenu(e)}
@@ -294,6 +295,7 @@ class MarkdownEditor extends React.Component {
          onCheckboxClick={(e) => this.handleCheckboxClick(e)}
          showCopyNotification={config.ui.showCopyNotification}
          storagePath={storage.path}
+          noteKey={noteKey}
        />
      </div>
    )
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -10,6 +10,7 @@ import flowchart from 'flowchart'
 import SequenceDiagram from 'js-sequence-diagrams'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import htmlTextHelper from 'browser/lib/htmlTextHelper'
+import convertModeName from 'browser/lib/convertModeName'
 import copy from 'copy-to-clipboard'
 import mdurl from 'mdurl'
 import exportNote from 'browser/main/lib/dataApi/exportNote'
@@ -31,7 +32,7 @@ const CSS_FILES = [
  `${appPath}/node_modules/codemirror/lib/codemirror.css`
 ]

-function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd) {
+function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme) {
  return `
@font-face {
  font-family: 'Lato';
@@ -103,6 +104,13 @@ h2 {
 body p {
  white-space: normal;
 }
+
+@media print {
+  body[data-theme="${theme}"] {
+    color: #000;
+    background-color: #fff;
+  }
+}
 `
 }

@@ -115,7 +123,6 @@ if (!OSX) {
  defaultFontFamily.unshift('meiryo')
 }
 const defaultCodeBlockFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
-
 export default class MarkdownPreview extends React.Component {
  constructor (props) {
    super(props)
@@ -138,10 +145,11 @@ export default class MarkdownPreview extends React.Component {
  }

  initMarkdown () {
-    const { smartQuotes, sanitize } = this.props
+    const { smartQuotes, sanitize, breaks } = this.props
    this.markdown = new Markdown({
      typographer: smartQuotes,
-      sanitize
+      sanitize,
+      breaks
    })
  }

@@ -208,11 +216,13 @@ export default class MarkdownPreview extends React.Component {

  handleSaveAsHtml () {
    this.exportAsDocument('html', (noteContent, exportTasks) => {
-      const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme} = this.getStyleParams()
+      const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme} = this.getStyleParams()
+
+      const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme)
+      let body = this.markdown.render(escapeHtmlCharacters(noteContent))

-      const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
-      const body = this.markdown.render(escapeHtmlCharacters(noteContent))
      const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
+      const attachmentsAbsolutePaths = attachmentManagement.getAbsolutePathsOfAttachmentsInContent(noteContent, this.props.storagePath)

      files.forEach((file) => {
        file = file.replace('file://', '')
@@ -221,6 +231,13 @@ export default class MarkdownPreview extends React.Component {
          dst: 'css'
        })
      })
+      attachmentsAbsolutePaths.forEach((attachment) => {
+        exportTasks.push({
+          src: attachment,
+          dst: attachmentManagement.DESTINATION_FOLDER
+        })
+      })
+      body = attachmentManagement.removeStorageAndNoteReferences(body, this.props.noteKey)

      let styles = ''
      files.forEach((file) => {
@@ -324,7 +341,9 @@ export default class MarkdownPreview extends React.Component {

  componentDidUpdate (prevProps) {
    if (prevProps.value !== this.props.value) this.rewriteIframe()
-    if (prevProps.smartQuotes !== this.props.smartQuotes || prevProps.sanitize !== this.props.sanitize) {
+    if (prevProps.smartQuotes !== this.props.smartQuotes ||
+        prevProps.sanitize !== this.props.sanitize ||
+        prevProps.breaks !== this.props.breaks) {
      this.initMarkdown()
      this.rewriteIframe()
    }
@@ -342,7 +361,7 @@ export default class MarkdownPreview extends React.Component {
  }

  getStyleParams () {
-    const { fontSize, lineNumber, codeBlockTheme, scrollPastEnd } = this.props
+    const { fontSize, lineNumber, codeBlockTheme, scrollPastEnd, theme } = this.props
    let { fontFamily, codeBlockFontFamily } = this.props
    fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
        ? fontFamily.split(',').map(fontName => fontName.trim()).concat(defaultFontFamily)
@@ -351,14 +370,14 @@ export default class MarkdownPreview extends React.Component {
        ? codeBlockFontFamily.split(',').map(fontName => fontName.trim()).concat(defaultCodeBlockFontFamily)
        : defaultCodeBlockFontFamily

-    return {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd}
+    return {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme}
  }

  applyStyle () {
-    const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd} = this.getStyleParams()
+    const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme} = this.getStyleParams()

    this.getWindow().document.getElementById('codeTheme').href = this.GetCodeThemeLink(codeBlockTheme)
-    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd)
+    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme)
  }

  GetCodeThemeLink (theme) {
@@ -414,7 +433,7 @@ export default class MarkdownPreview extends React.Component {
      : 'default'

    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.code code'), (el) => {
-      let syntax = CodeMirror.findModeByName(el.className)
+      let syntax = CodeMirror.findModeByName(convertModeName(el.className))
      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
      CodeMirror.requireMode(syntax.mode, () => {
        const content = htmlTextHelper.decodeEntities(el.innerHTML)
@@ -526,21 +545,36 @@ export default class MarkdownPreview extends React.Component {
      return
    }

-    const noteHash = e.target.href.split('/').pop()
+    const linkHash = href.split('/').pop()
+
+    const regexNoteInternalLink = /main.html#(.+)/
+    if (regexNoteInternalLink.test(linkHash)) {
+      const targetId = mdurl.encode(linkHash.match(regexNoteInternalLink)[1])
+      const targetElement = this.refs.root.contentWindow.document.getElementById(targetId)
+
+      if (targetElement != null) {
+        this.getWindow().scrollTo(0, targetElement.offsetTop)
+      }
+      return
+    }
+
    // this will match the new uuid v4 hash and the old hash
    // e.g.
    // :note:1c211eb7dcb463de6490 and
    // :note:7dd23275-f2b4-49cb-9e93-3454daf1af9c
    const regexIsNoteLink = /^:note:([a-zA-Z0-9-]{20,36})$/
-    if (regexIsNoteLink.test(noteHash)) {
-      eventEmitter.emit('list:jump', noteHash.replace(':note:', ''))
+    if (regexIsNoteLink.test(linkHash)) {
+      eventEmitter.emit('list:jump', linkHash.replace(':note:', ''))
+      return
    }
+
    // this will match the old link format storage.key-note.key
    // e.g.
    // 877f99c3268608328037-1c211eb7dcb463de6490
    const regexIsLegacyNoteLink = /^(.{20})-(.{20})$/
-    if (regexIsLegacyNoteLink.test(noteHash)) {
-      eventEmitter.emit('list:jump', noteHash.split('-')[1])
+    if (regexIsLegacyNoteLink.test(linkHash)) {
+      eventEmitter.emit('list:jump', linkHash.split('-')[1])
+      return
    }
  }

@@ -568,5 +602,6 @@ MarkdownPreview.propTypes = {
  value: PropTypes.string,
  showCopyNotification: PropTypes.bool,
  storagePath: PropTypes.string,
-  smartQuotes: PropTypes.bool
+  smartQuotes: PropTypes.bool,
+  breaks: PropTypes.bool
 }
--- a/browser/components/MarkdownSplitEditor.js
+++ b/browser/components/MarkdownSplitEditor.js
@@ -131,6 +131,7 @@ class MarkdownSplitEditor extends React.Component {
          lineNumber={config.preview.lineNumber}
          scrollPastEnd={config.preview.scrollPastEnd}
          smartQuotes={config.preview.smartQuotes}
+          breaks={config.preview.breaks}
          sanitize={config.preview.sanitize}
          ref='preview'
          tabInde='0'
@@ -139,6 +140,7 @@ class MarkdownSplitEditor extends React.Component {
          onScroll={this.handleScroll.bind(this)}
          showCopyNotification={config.ui.showCopyNotification}
          storagePath={storage.path}
+          noteKey={noteKey}
       />
      </div>
    )
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -321,3 +321,76 @@ body[data-theme="solarized-dark"]
  .item-bottom-tagList-empty
    color $ui-inactive-text-color
    vertical-align middle
+
+body[data-theme="monokai"]
+  .root
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .item
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      // background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
+      color $ui-monokai-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-monokai-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
+        color $ui-monokai-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-monokai-noteList-backgroundColor
+      color $ui-monokai-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-monokai-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-monokai-noteList-backgroundColor, 10%)
+        color $ui-monokai-text-color
+
+  .item-wrapper
+    border-color alpha($ui-monokai-button-backgroundColor, 60%)
+
+  .item--active
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-button-backgroundColor
+    .item-wrapper
+      border-color transparent
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      color $ui-monokai-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-monokai-text-color
+    &:hover
+      // background-color alpha($ui-monokai-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-bottom-tagList-item
+        background-color alpha(#fff, 20%)
+
+  .item-title
+    color $ui-inactive-text-color
+
+  .item-title-icon
+    color $ui-inactive-text-color
+
+  .item-title-empty
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-item
+    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-empty
+    color $ui-inactive-text-color
+    vertical-align middle
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -104,6 +104,7 @@ body[data-theme="dark"]
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
      color $ui-dark-text-color
      .item-simple-title
+      .item-simple-title-empty
      .item-simple-title-icon
      .item-simple-bottom-time
        transition 0.15s
@@ -117,6 +118,7 @@ body[data-theme="dark"]
      background-color $ui-dark-button--active-backgroundColor
      color $ui-dark-text-color
      .item-simple-title
+      .item-simple-title-empty
      .item-simple-title-icon
      .item-simple-bottom-time
        transition 0.15s
@@ -165,9 +167,10 @@ body[data-theme="solarized-dark"]
    background-color $ui-solarized-dark-noteList-backgroundColor
    &:hover
      transition 0.15s
-      // background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
      color $ui-solarized-dark-text-color
      .item-simple-title
+      .item-simple-title-empty
      .item-simple-title-icon
      .item-simple-bottom-time
        transition 0.15s
@@ -178,9 +181,10 @@ body[data-theme="solarized-dark"]
        color $ui-solarized-dark-text-color
    &:active
      transition 0.15s
-      background-color $ui-solarized-dark-button--active-backgroundColor
-      color $ui-solarized-dark-text-color
+      // background-color $ui-solarized-dark-button--active-backgroundColor
+      color $ui-dark-text-color
      .item-simple-title
+      .item-simple-title-empty
      .item-simple-title-icon
      .item-simple-bottom-time
        transition 0.15s
@@ -192,11 +196,13 @@ body[data-theme="solarized-dark"]

  .item-simple--active
    border-color $ui-solarized-dark-borderColor
-    background-color $ui-solarized-dark-button--active-backgroundColor
+    background-color $ui-solarized-dark-tag-backgroundColor
    .item-simple-wrapper
      border-color transparent
    .item-simple-title
+    .item-simple-title-empty
    .item-simple-title-icon
+       color $ui-dark-text-color
    .item-simple-bottom-time
      color $ui-solarized-dark-text-color
    .item-simple-bottom-tagList-item
@@ -207,8 +213,75 @@ body[data-theme="solarized-dark"]
      color #c0392b
      .item-simple-bottom-tagList-item
        background-color alpha(#fff, 20%)
-.item-simple-right
-  float right
-  .item-simple-right-storageName
-    padding-left 4px
-    opacity 0.4
+  .item-simple-title
+    color $ui-dark-text-color
+    border-bottom $ui-dark-borderColor
+  .item-simple-right
+    float right
+    .item-simple-right-storageName
+      padding-left 4px
+      opacity 0.4
+
+body[data-theme="monokai"]
+  .root
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      background-color alpha($ui-monokai-button-backgroundColor, 60%)
+      color $ui-monokai-text-color
+      .item-simple-title
+      .item-simple-title-empty
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-solarized-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-monokai-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-monokai-button--active-backgroundColor
+      color $ui-monokai-text-color
+      .item-simple-title
+      .item-simple-title-empty
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-monokai-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-monokai-text-color
+
+  .item-simple--active
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-button--active-backgroundColor
+    .item-simple-wrapper
+      border-color transparent
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+    .item-simple-bottom-time
+      color $ui-monokai-text-color
+    .item-simple-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-monokai-text-color
+    &:hover
+      // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#fff, 20%)
+  .item-simple-title
+    color $ui-dark-text-color
+    border-bottom $ui-dark-borderColor
+  .item-simple-right
+    float right
+    .item-simple-right-storageName
+      padding-left 4px
+      opacity 0.4
--- a/browser/components/RealtimeNotification.styl
+++ b/browser/components/RealtimeNotification.styl
@@ -41,3 +41,14 @@ body[data-theme="solarized-dark"]
    background-color $ui-solarized-dark-button-backgroundColor
    &:hover
      color #5CB85C
+
+body[data-theme="monokai"]
+  .notification-area
+    background-color none
+
+  .notification-link
+    color $ui-monokai-text-color
+    border none
+    background-color $ui-monokai-button-backgroundColor
+    &:hover
+      color #5CB85C
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -18,7 +18,7 @@
 .iconWrap
  width 20px
  text-align center
-  
+
 .counters
  float right
  color $ui-inactive-text-color
@@ -68,10 +68,9 @@
  .menu-button-label
    position fixed
    display inline-block
-    height 32px
+    height 36px
    left 44px
    padding 0 10px
-    margin-top -8px
    margin-left 0
    overflow ellipsis
    z-index 10
@@ -222,4 +221,46 @@ body[data-theme="solarized-dark"]
      background-color $ui-solarized-dark-button-backgroundColor
      color $ui-solarized-dark-text-color
      .menu-button-label
-        color $ui-solarized-dark-text-color
+        color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .menu-button
+    &:active
+      background-color $ui-monokai-noteList-backgroundColor
+      color $ui-monokai-text-color
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+
+  .menu-button--active
+    color $ui-monokai-text-color
+    background-color $ui-monokai-button-backgroundColor
+    .menu-button-label
+      color $ui-monokai-text-color
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+      .menu-button-label
+        color $ui-monokai-text-color
+
+  .menu-button-star--active
+    color $ui-monokai-text-color
+    background-color $ui-monokai-button-backgroundColor
+    .menu-button-label
+      color $ui-monokai-text-color
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+      .menu-button-label
+        color $ui-monokai-text-color
+
+  .menu-button-trash--active
+    color $ui-monokai-text-color
+    background-color $ui-monokai-button-backgroundColor
+    .menu-button-label
+      color $ui-monokai-text-color
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+      .menu-button-label
+        color $ui-monokai-text-color
--- a/browser/components/SnippetTab.js
+++ b/browser/components/SnippetTab.js
@@ -55,10 +55,10 @@ class SnippetTab extends React.Component {
        this.handleRename()
        break
      case 27:
-        this.setState({
-          name: this.props.snippet.name,
+        this.setState((prevState, props) => ({
+          name: props.snippet.name,
          isRenaming: false
-        })
+        }))
        break
    }
  }
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -58,8 +58,8 @@
  opacity 0
  border-top-right-radius 2px
  border-bottom-right-radius 2px
-  height 26px
-  line-height 26px
+  height 34px
+  line-height 32px

 .folderList-item:hover, .folderList-item--active:hover
  .folderList-item-tooltip
@@ -138,3 +138,22 @@ body[data-theme="solarized-dark"]
    &:hover
      color $ui-solarized-dark-text-color
      background-color $ui-solarized-dark-button-backgroundColor
+
+body[data-theme="monokai"]
+  .folderList-item
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+      color $ui-monokai-text-color
+    &:active
+      color $ui-monokai-text-color
+      background-color $ui-monokai-button-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-monokai-text-color
+    background-color $ui-monokai-button-backgroundColor
+    &:active
+      background-color $ui-monokai-button-backgroundColor
+    &:hover
+      color $ui-monokai-text-color
+      background-color $ui-monokai-button-backgroundColor
--- a/browser/components/TodoListPercentage.styl
+++ b/browser/components/TodoListPercentage.styl
@@ -47,5 +47,15 @@ body[data-theme="solarized-dark"]
  .progressBar
    background-color: #2aa198

+  .percentageText
+    color #fdf6e3
+
+body[data-theme="monokai"]
+  .percentageBar
+    background-color #f92672
+
+  .progressBar
+    background-color: #373831
+
  .percentageText
    color #fdf6e3
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -199,7 +199,6 @@ ol
  &>li>ul, &>li>ol
    margin 0
 code
-  color #CC305F
  padding 0.2em 0.4em
  background-color #f7f7f7
  border-radius 3px
@@ -371,3 +370,30 @@ body[data-theme="solarized-dark"]
        border-color themeSolarizedDarkTableBorder
        &:last-child
          border-right solid 1px themeSolarizedDarkTableBorder
+
+themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
+themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
+themeMonokaiTableHead = themeMonokaiTableEven
+themeMonokaiTableBorder = themeDarkBorder
+
+body[data-theme="monokai"]
+  color $ui-monokai-text-color
+  border-color themeDarkBorder
+  background-color $ui-monokai-noteDetail-backgroundColor
+  table
+    thead
+      tr
+        background-color themeMonokaiTableHead
+      th
+        border-color themeMonokaiTableBorder
+        &:last-child
+          border-right solid 1px themeMonokaiTableBorder
+    tbody
+      tr:nth-child(2n + 1)
+        background-color themeMonokaiTableOdd
+      tr:nth-child(2n)
+        background-color themeMonokaiTableEven
+      td
+        border-color themeMonokaiTableBorder
+        &:last-child
+          border-right solid 1px themeMonokaiTableBorder