From 1cdac943bad5edae2dfa7f3b7e365b5a12707ec5 Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Fri, 8 Feb 2019 00:50:47 +0100 Subject: [PATCH 01/13] adding Nord theme and streamlining UI theming --- browser/components/MarkdownPreview.js | 11 +- browser/components/NoteItem.styl | 200 ++++++------------ browser/components/NoteItemSimple.styl | 179 ++++++---------- browser/components/RealtimeNotification.styl | 44 ++-- browser/components/SideNavFilter.styl | 158 ++++---------- browser/components/SnippetTab.styl | 126 +++-------- browser/components/StorageItem.styl | 75 ++----- browser/components/TagListItem.styl | 45 ++-- browser/components/TodoListPercentage.styl | 32 ++- browser/components/markdown.styl | 172 ++++----------- browser/components/render/MermaidRender.js | 7 +- browser/lib/ui-themes.js | 39 ++++ browser/main/Detail/Detail.styl | 29 +-- browser/main/Detail/FolderSelect.styl | 73 +++---- browser/main/Detail/FullscreenButton.styl | 50 ++--- browser/main/Detail/InfoPanel.styl | 183 +++------------- browser/main/Detail/MarkdownNoteDetail.styl | 22 +- browser/main/Detail/NoteDetailInfo.styl | 21 +- browser/main/Detail/SnippetNoteDetail.styl | 93 +++----- browser/main/Detail/TagSelect.styl | 41 ++-- browser/main/Detail/ToggleModeButton.styl | 154 +++++++------- browser/main/Main.js | 5 +- browser/main/NewNoteButton/NewNoteButton.styl | 17 +- browser/main/NoteList/NoteList.styl | 114 +++------- browser/main/SideNav/PreferenceButton.styl | 102 +++++---- browser/main/SideNav/SideNav.styl | 21 +- browser/main/SideNav/StorageItem.styl | 90 ++++---- browser/main/SideNav/SwitchButton.styl | 118 +++++------ browser/main/StatusBar/StatusBar.styl | 36 ++-- browser/main/TopBar/TopBar.styl | 84 ++------ browser/main/global.styl | 51 ++--- browser/main/lib/ConfigManager.js | 13 +- browser/main/modals/CreateFolderModal.styl | 126 +++-------- browser/main/modals/NewNoteModal.styl | 80 ++----- .../modals/PreferencesModal/ConfigTab.styl | 118 +++-------- .../modals/PreferencesModal/Crowdfunding.styl | 25 +-- .../modals/PreferencesModal/FolderItem.styl | 83 ++------ .../main/modals/PreferencesModal/InfoTab.styl | 30 +-- .../PreferencesModal/PreferencesModal.styl | 121 +++-------- .../modals/PreferencesModal/SnippetTab.styl | 81 ++----- .../modals/PreferencesModal/StoragesTab.styl | 139 +++--------- browser/main/modals/PreferencesModal/UiTab.js | 21 +- browser/main/modals/RenameFolderModal.styl | 36 ++-- browser/styles/Detail/TagSelect.styl | 94 +++----- browser/styles/index.styl | 139 ++++++------ 45 files changed, 1192 insertions(+), 2306 deletions(-) create mode 100644 browser/lib/ui-themes.js diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index a6819ce9..2cde0fb7 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -24,6 +24,7 @@ import fs from 'fs' import { render } from 'react-dom' import Carousel from 'react-image-carousel' import ConfigManager from '../main/lib/ConfigManager' +import uiThemes from 'browser/lib/ui-themes' const { remote, shell } = require('electron') const attachmentManagement = require('../main/lib/dataApi/attachmentManagement') @@ -426,15 +427,7 @@ export default class MarkdownPreview extends React.Component { getScrollBarStyle () { const { theme } = this.props - switch (theme) { - case 'dark': - case 'solarized-dark': - case 'monokai': - case 'dracula': - return scrollBarDarkStyle - default: - return scrollBarStyle - } + return uiThemes.some(item => item.name === theme && item.isDark) ? scrollBarDarkStyle : scrollBarStyle } componentDidMount () { diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index a31f00a4..75078db4 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -194,7 +194,7 @@ body[data-theme="dark"] color $ui-dark-text-color .item-bottom-tagList-item transition 0.15s - background-color alpha(#fff, 20%) + background-color alpha($ui-dark-tagList-backgroundColor, 20%) color $ui-dark-text-color &:active transition 0.15s @@ -207,7 +207,7 @@ body[data-theme="dark"] color $ui-dark-text-color .item-bottom-tagList-item transition 0.15s - background-color alpha(white, 10%) + background-color alpha($ui-dark-tagList-backgroundColor, 10%) color $ui-dark-text-color .item-wrapper @@ -223,13 +223,13 @@ body[data-theme="dark"] .item-bottom-time color $ui-dark-text-color .item-bottom-tagList-item - background-color alpha(white, 10%) + background-color alpha($ui-dark-tagList-backgroundColor, 10%) color $ui-dark-text-color &:hover background-color alpha($ui-dark-button--active-backgroundColor, 60%) - color #c0392b + color $ui-dark-button--hover-color .item-bottom-tagList-item - background-color alpha(#fff, 20%) + background-color alpha($ui-dark-tagList-backgroundColor, 20%) .item-title color $ui-inactive-text-color @@ -322,148 +322,82 @@ body[data-theme="solarized-dark"] color $ui-inactive-text-color vertical-align middle -body[data-theme="monokai"] - .root - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, '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 + .item + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') + &:hover transition 0.15s - color $ui-monokai-text-color - .item-bottom-tagList-item + // background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%) + color get-theme-var(theme, 'text-color') + .item-title + .item-title-icon + .item-bottom-time + transition 0.15s + color get-theme-var(theme, 'text-color') + .item-bottom-tagList-item + transition 0.15s + background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%) + color get-theme-var(theme, 'text-color') + &:active 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 + background-color get-theme-var(theme, 'noteList-backgroundColor') + color get-theme-var(theme, 'text-color') + .item-title + .item-title-icon + .item-bottom-time + transition 0.15s + color get-theme-var(theme, 'text-color') + .item-bottom-tagList-item + transition 0.15s + background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%) + color get-theme-var(theme, '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-active-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 #f92672 - .item-bottom-tagList-item - background-color alpha(#fff, 20%) + border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%) - .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 - -body[data-theme="dracula"] - .root - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor - - .item - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor - &:hover - transition 0.15s - // background-color alpha($ui-dracula-noteList-backgroundColor, 20%) - color $ui-dracula-text-color + .item--active + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'button-backgroundColor') + .item-wrapper + border-color transparent .item-title .item-title-icon .item-bottom-time - transition 0.15s - color $ui-dracula-text-color + color get-theme-var(theme, 'active-color') .item-bottom-tagList-item - transition 0.15s - background-color alpha($ui-dracula-noteList-backgroundColor, 20%) - color $ui-dracula-text-color - &:active - transition 0.15s - background-color $ui-dracula-noteList-backgroundColor - color $ui-dracula-text-color - .item-title - .item-title-icon - .item-bottom-time - transition 0.15s - color $ui-dracula-text-color - .item-bottom-tagList-item - transition 0.15s - background-color alpha($ui-dracula-noteList-backgroundColor, 10%) - color $ui-dracula-text-color + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%) + color get-theme-var(theme, 'text-color') + &:hover + // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%) + color get-theme-var(theme, 'button--hover-color') + .item-bottom-tagList-item + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%) - .item-wrapper - border-color alpha($ui-dracula-button-backgroundColor, 60%) - - .item--active - border-color $ui-dracula-borderColor - background-color $ui-dracula-button-backgroundColor - .item-wrapper - border-color transparent .item-title + color $ui-inactive-text-color + .item-title-icon - .item-bottom-time - color $ui-dracula-active-color + color $ui-inactive-text-color + + .item-title-empty + color $ui-inactive-text-color + .item-bottom-tagList-item - background-color alpha(#f8f8f2, 10%) - color $ui-dracula-text-color - &:hover - // background-color alpha($ui-dracula-button--active-backgroundColor, 60%) - color #ff79c6 - .item-bottom-tagList-item - background-color alpha(#f8f8f2, 20%) + background-color alpha($ui-dark-button--active-backgroundColor, 40%) + color $ui-inactive-text-color - .item-title - color $ui-inactive-text-color + .item-bottom-tagList-empty + color $ui-inactive-text-color + vertical-align middle - .item-title-icon - color $ui-inactive-text-color +for theme in 'dracula' + apply-theme(theme) - .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 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index 70b74be7..a36de5ed 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -223,130 +223,73 @@ body[data-theme="solarized-dark"] padding-left 4px opacity 0.4 -body[data-theme="monokai"] - .root - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, '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 + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') + &:hover + transition 0.15s + background-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%) + color get-theme-var(theme, 'text-color') + .item-simple-title + .item-simple-title-empty + .item-simple-title-icon + .item-simple-bottom-time + transition 0.15s + color get-theme-var(theme, 'text-color') + .item-simple-bottom-tagList-item + transition 0.15s + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%) + color get-theme-var(theme, 'text-color') + &:active + transition 0.15s + background-color get-theme-var(theme, 'button--active-backgroundColor') + color get-theme-var(theme, 'text-color') + .item-simple-title + .item-simple-title-empty + .item-simple-title-icon + .item-simple-bottom-time + transition 0.15s + color get-theme-var(theme, 'text-color') + .item-simple-bottom-tagList-item + transition 0.15s + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%) + color get-theme-var(theme, 'text-color') + + .item-simple--active + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'button--active-backgroundColor') + .item-simple-wrapper + border-color transparent .item-simple-title .item-simple-title-empty .item-simple-title-icon .item-simple-bottom-time - transition 0.15s - color $ui-monokai-text-color + color get-theme-var(theme, '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 + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%) + color get-theme-var(theme, 'text-color') + &:hover + // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%) + color #c0392b + .item-simple-bottom-tagList-item + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%) .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 + 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="dracula"] - .root - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor +for theme in 'dracula' + apply-theme(theme) - .item-simple - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor - &:hover - transition 0.15s - background-color alpha($ui-dracula-button-backgroundColor, 60%) - color $ui-dracula-text-color - .item-simple-title - .item-simple-title-empty - .item-simple-title-icon - .item-simple-bottom-time - transition 0.15s - color $ui-dracula-text-color - .item-simple-bottom-tagList-item - transition 0.15s - background-color alpha(#f8f8f2, 20%) - color $ui-dracula-text-color - &:active - transition 0.15s - background-color $ui-dracula-button--active-backgroundColor - color $ui-dracula-text-color - .item-simple-title - .item-simple-title-empty - .item-simple-title-icon - .item-simple-bottom-time - transition 0.15s - color $ui-dracula-text-color - .item-simple-bottom-tagList-item - transition 0.15s - background-color alpha(#f8f8f2, 10%) - color $ui-dracula-text-color - - .item-simple--active - border-color $ui-dracula-borderColor - background-color $ui-dracula-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-dracula-text-color - .item-simple-bottom-tagList-item - background-color alpha(#f8f8f2, 10%) - color $ui-dracula-text-color - &:hover - // background-color alpha($ui-dark-button--active-backgroundColor, 60%) - color #c0392b - .item-simple-bottom-tagList-item - background-color alpha(#f8f8f2, 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 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/RealtimeNotification.styl b/browser/components/RealtimeNotification.styl index 36330c48..795807b9 100644 --- a/browser/components/RealtimeNotification.styl +++ b/browser/components/RealtimeNotification.styl @@ -30,36 +30,20 @@ body[data-theme="dark"] &:hover color #5CB85C +apply-theme(theme) + body[data-theme={theme}] + .notification-area + background-color none -body[data-theme="solarized-dark"] - .notification-area - background-color none + .notification-link + color get-theme-var(theme, 'text-color') + border none + background-color get-theme-var(theme, 'button-backgroundColor') + &:hover + color get-theme-var(theme, 'button--hover-color') - .notification-link - color $ui-solarized-dark-text-color - border none - background-color $ui-solarized-dark-button-backgroundColor - &:hover - color #5CB85C +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -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 - -body[data-theme="dracula"] - .notification-area - background-color none - - .notification-link - color $ui-dracula-text-color - border none - background-color $ui-dracula-button-backgroundColor - &:hover - color #ff79c6 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index 1da8c7e4..41e679ca 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -180,129 +180,51 @@ body[data-theme="dark"] .menu-button-label color $ui-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + .menu-button + &:active + background-color get-theme-var(theme, 'noteList-backgroundColor') + color get-theme-var(theme, 'text-color') + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') -body[data-theme="solarized-dark"] - .menu-button - &:active - background-color $ui-solarized-dark-noteList-backgroundColor - color $ui-solarized-dark-text-color - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color - - .menu-button--active - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - .menu-button-label - color $ui-solarized-dark-text-color - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + .menu-button--active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') .menu-button-label - color $ui-solarized-dark-text-color + color get-theme-var(theme, 'text-color') + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + .menu-button-label + color get-theme-var(theme, 'text-color') - .menu-button-star--active - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - .menu-button-label - color $ui-solarized-dark-text-color - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + .menu-button-star--active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') .menu-button-label - color $ui-solarized-dark-text-color + color get-theme-var(theme, 'text-color') + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + .menu-button-label + color get-theme-var(theme, 'text-color') - .menu-button-trash--active - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - .menu-button-label - color $ui-solarized-dark-text-color - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + .menu-button-trash--active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') .menu-button-label - color $ui-solarized-dark-text-color + color get-theme-var(theme, 'text-color') + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + .menu-button-label + color get-theme-var(theme, '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 +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .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 - -body[data-theme="dracula"] - .menu-button - &:active - background-color $ui-dracula-noteList-backgroundColor - color $ui-dracula-text-color - &:hover - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - - .menu-button--active - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - .menu-button-label - color $ui-dracula-text-color - &:hover - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - .menu-button-label - color $ui-dracula-text-color - - .menu-button-star--active - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - .menu-button-label - color $ui-dracula-text-color - &:hover - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - .menu-button-label - color $ui-dracula-text-color - - .menu-button-trash--active - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - .menu-button-label - color $ui-dracula-text-color - &:hover - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - .menu-button-label - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl index d101f318..994e3b5a 100644 --- a/browser/components/SnippetTab.styl +++ b/browser/components/SnippetTab.styl @@ -61,7 +61,7 @@ width 100% outline none -body[data-theme="default"], body[data-theme="white"] +body[data-theme="default"], body[data-theme="white"] .root--active &:hover background-color alpha($ui-button--active-backgroundColor, 60%) @@ -100,103 +100,43 @@ body[data-theme="dark"] color $ui-dark-text-color transition 0.15s -body[data-theme="solarized-dark"] - .root - border-color $ui-solarized-dark-borderColor - &:hover - background-color $ui-solarized-dark-noteDetail-backgroundColor - transition 0.15s +apply-theme(theme) + body[data-theme={theme}] + .root + border-color get-theme-var(theme, 'borderColor') + &:hover + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + transition 0.15s + .deleteButton + color get-theme-var(theme, 'text-color') + transition 0.15s + .button + color get-theme-var(theme, 'text-color') + transition 0.15s + + .root--active + color get-theme-var(theme, 'active-color') + background-color get-theme-var(theme, 'button-backgroundColor') + border-color get-theme-var(theme, 'borderColor') .deleteButton - color $ui-solarized-dark-button--active-color - transition 0.15s + color get-theme-var(theme, 'text-color') .button - color $ui-solarized-dark-button--active-color - transition 0.15s + color get-theme-var(theme, 'active-color') - .root--active - color $ui-solarized-dark-button--active-color - background-color $ui-solarized-dark-button-backgroundColor - border-color $ui-solarized-dark-borderColor - .deleteButton - color $ui-solarized-dark-button--active-color .button - color $ui-solarized-dark-button--active-color + border none + color $ui-inactive-text-color + background-color transparent + transition color background-color 0.15s + border-left 4px solid transparent - .button - border none - color $ui-solarized-dark-text-color - background-color transparent - transition color background-color 0.15s - border-left 4px solid transparent - - .input - background-color $ui-solarized-dark-noteDetail-backgroundColor - color $ui-solarized-dark-button--active-color - transition 0.15s - -body[data-theme="monokai"] - .root - border-color $ui-monokai-borderColor - &:hover - background-color $ui-monokai-noteDetail-backgroundColor + .input + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + color get-theme-var(theme, 'text-color') transition 0.15s - .deleteButton - color $ui-monokai-text-color - transition 0.15s - .button - color $ui-monokai-text-color - transition 0.15s - .root--active - color $ui-monokai-active-color - background-color $ui-monokai-button-backgroundColor - border-color $ui-monokai-borderColor - .deleteButton - color $ui-monokai-text-color - .button - color $ui-monokai-active-color - - .button - border none - color $ui-inactive-text-color - background-color transparent - transition color background-color 0.15s - border-left 4px solid transparent +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .input - background-color $ui-monokai-noteDetail-backgroundColor - color $ui-monokai-text-color - transition 0.15s - -body[data-theme="dracula"] - .root - border-color $ui-dracula-borderColor - &:hover - background-color $ui-dracula-noteDetail-backgroundColor - transition 0.15s - .deleteButton - color $ui-dracula-text-color - transition 0.15s - .button - color $ui-dracula-text-color - transition 0.15s - - .root--active - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - border-color $ui-dracula-borderColor - .deleteButton - color $ui-dracula-text-color - .button - color $ui-dracula-active-color - - .button - border none - color $ui-inactive-text-color - background-color transparent - transition color background-color 0.15s - border-left 4px solid transparent - - .input - background-color $ui-dracula-noteDetail-backgroundColor - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl index df8cbbc6..e0a3c6cd 100644 --- a/browser/components/StorageItem.styl +++ b/browser/components/StorageItem.styl @@ -120,59 +120,28 @@ body[data-theme="dark"] color $ui-dark-text-color background-color alpha($ui-dark-button--active-backgroundColor, 50%) -body[data-theme="solarized-dark"] - .folderList-item - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color - &:active - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .folderList-item + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + &:active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') - .folderList-item--active - @extend .folderList-item - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - &:active - background-color $ui-solarized-dark-button-backgroundColor - &:hover - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor + .folderList-item--active + @extend .folderList-item + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') + &:active + background-color get-theme-var(theme, 'button-backgroundColor') + &:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, '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 +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .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 - -body[data-theme="dracula"] - .folderList-item - &:hover - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - &:active - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - - .folderList-item--active - @extend .folderList-item - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - &:active - background-color $ui-dracula-button-backgroundColor - &:hover - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl index 9f407a17..1f78c46f 100644 --- a/browser/components/TagListItem.styl +++ b/browser/components/TagListItem.styl @@ -94,23 +94,30 @@ body[data-theme="white"] .tagList-item-count color $ui-text-color -body[data-theme="dark"] - .tagList-item - color $ui-dark-inactive-text-color - &:hover - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - &:active - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .tagList-item + color get-theme-var(theme, 'inactive-text-color') + &:hover + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%) + &:active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') - .tagList-item-active - background-color $ui-dark-button--active-backgroundColor - color $ui-dark-text-color - &:active - background-color alpha($ui-dark-button--active-backgroundColor, 50%) - &:hover - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 50%) - .tagList-item-count - color $ui-dark-button--active-color + .tagList-item-active + background-color get-theme-var(theme, 'button--active-backgroundColor') + color get-theme-var(theme, 'text-color') + &:active + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%) + &:hover + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%) + .tagList-item-count + color get-theme-var(theme, 'button--active-color') + +for theme in 'dark' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/TodoListPercentage.styl b/browser/components/TodoListPercentage.styl index 5a0f3257..4a0081cd 100644 --- a/browser/components/TodoListPercentage.styl +++ b/browser/components/TodoListPercentage.styl @@ -54,7 +54,7 @@ body[data-theme="dark"] .percentageText color $ui-dark-text-color - + .todoClearText color $ui-dark-text-color @@ -71,25 +71,19 @@ body[data-theme="solarized-dark"] .todoClearText color #fdf6e3 -body[data-theme="monokai"] - .percentageBar - background-color: $ui-monokai-borderColor +apply-theme(theme) + body[data-theme={theme}] + .percentageBar + background-color: get-theme-var(theme, 'borderColor') - .progressBar - background-color $ui-monokai-active-color + .progressBar + background-color get-theme-var(theme, 'active-color') - .percentageText - color $ui-monokai-text-color + .percentageText + color get-theme-var(theme, 'text-color') -body[data-theme="dracula"] - .percentageBar - background-color $ui-dracula-borderColor +for theme in 'dracula' + apply-theme(theme) - .progressBar - background-color: $ui-dracula-active-color - - .percentageText - color $ui-dracula-text-color - - .percentageText - color $ui-dracula-text-color +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl index 4921b531..ca1f9cdd 100644 --- a/browser/components/markdown.styl +++ b/browser/components/markdown.styl @@ -511,137 +511,51 @@ body[data-theme="dark"] color $ui-dark-text-color background-color $ui-dark-tag-backgroundColor -themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor -themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%) -themeSolarizedDarkTableHead = themeSolarizedDarkTableEven -themeSolarizedDarkTableBorder = themeDarkBorder - -body[data-theme="solarized-dark"] - color $ui-solarized-dark-text-color - border-color themeDarkBorder - background-color $ui-solarized-dark-noteDetail-backgroundColor - table - thead - tr - background-color themeSolarizedDarkTableHead - th - border-color themeSolarizedDarkTableBorder - &:last-child - border-right solid 1px themeSolarizedDarkTableBorder - tbody - tr:nth-child(2n + 1) - background-color themeSolarizedDarkTableOdd - tr:nth-child(2n) - background-color themeSolarizedDarkTableEven - td - border-color themeSolarizedDarkTableBorder - &:last-child - border-right solid 1px themeSolarizedDarkTableBorder - dl +apply-theme(theme) + body[data-theme={theme}] + color get-theme-var(theme, 'text-color') border-color themeDarkBorder - background-color themeSolarizedDarkTableHead - dt - border-color themeDarkBorder - dd - border-color themeDarkBorder - background-color $ui-solarized-dark-noteDetail-backgroundColor + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + table + thead + tr + background-color get-theme-var(theme, 'table-head-backgroundColor') + th + border-color get-theme-var(theme, 'table-borderColor') + &:last-child + border-right solid 1px get-theme-var(theme, 'table-borderColor') + tbody + tr:nth-child(2n + 1) + background-color get-theme-var(theme, 'table-odd-backgroundColor') + tr:nth-child(2n) + background-color get-theme-var(theme, 'table-even-backgroundColor') + td + border-color get-theme-var(theme, 'table-borderColor') + &:last-child + border-right solid 1px get-theme-var(theme, 'table-borderColor') + kbd + background-color get-theme-var(theme, 'kbd-backgroundColor') + color get-theme-var(theme, 'kbd-color') - pre.fence - .gallery - .carousel-main, .carousel-footer - background-color $ui-solarized-dark-noteDetail-backgroundColor - .prev, .next - color $ui-solarized-dark-button--active-color - background-color $ui-solarized-dark-button-backgroundColor + dl + border-color themeDarkBorder + background-color get-theme-var(theme, 'table-head-backgroundColor') + dt + border-color themeDarkBorder + dd + border-color themeDarkBorder + background-color get-theme-var(theme, 'noteDetail-backgroundColor') -themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor -themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%) -themeMonokaiTableHead = themeMonokaiTableEven -themeMonokaiTableBorder = themeDarkBorder + pre.fence + .gallery + .carousel-main, .carousel-footer + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + .prev, .next + color get-theme-var(theme, 'button--active-color') + background-color get-theme-var(theme, 'button-backgroundColor') -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 - kbd - background-color themeDarkBackground +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - dl - border-color themeDarkBorder - background-color themeMonokaiTableHead - dt - border-color themeDarkBorder - dd - border-color themeDarkBorder - background-color $ui-monokai-noteDetail-backgroundColor - - pre.fence - .gallery - .carousel-main, .carousel-footer - background-color $ui-monokai-noteDetail-backgroundColor - .prev, .next - color $ui-monokai-button--active-color - background-color $ui-monokai-button-backgroundColor - -themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor -themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%) -themeDraculaTableHead = themeDraculaTableEven -themeDraculaTableBorder = themeDarkBorder - -body[data-theme="dracula"] - color $ui-dracula-text-color - border-color themeDarkBorder - background-color $ui-dracula-noteDetail-backgroundColor - table - thead - tr - background-color themeDraculaTableHead - th - border-color themeDraculaTableBorder - &:last-child - border-right solid 1px themeDraculaTableBorder - tbody - tr:nth-child(2n + 1) - background-color themeDraculaTableOdd - tr:nth-child(2n) - background-color themeDraculaTableEven - td - border-color themeDraculaTableBorder - &:last-child - border-right solid 1px themeDraculaTableBorder - kbd - background-color themeDarkBackground - - dl - border-color themeDarkBorder - background-color themeDraculaTableHead - dt - border-color themeDarkBorder - dd - border-color themeDarkBorder - background-color $ui-dracula-noteDetail-backgroundColor - - pre.fence - .gallery - .carousel-main, .carousel-footer - background-color $ui-dracula-noteDetail-backgroundColor - .prev, .next - color $ui-dracula-button--active-color - background-color $ui-dracula-button-backgroundColor +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/render/MermaidRender.js b/browser/components/render/MermaidRender.js index e28e06ea..61bd8504 100644 --- a/browser/components/render/MermaidRender.js +++ b/browser/components/render/MermaidRender.js @@ -1,4 +1,5 @@ import mermaidAPI from 'mermaid' +import uiThemes from 'browser/lib/ui-themes' // fixes bad styling in the mermaid dark theme const darkThemeStyling = ` @@ -22,15 +23,19 @@ function getId () { function render (element, content, theme) { try { const height = element.attributes.getNamedItem('data-height') + if (height && height.value !== 'undefined') { element.style.height = height.value + 'vh' } - const isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula' + + const isDarkTheme = uiThemes.some(item => item.name === theme && item.isDark) + mermaidAPI.initialize({ theme: isDarkTheme ? 'dark' : 'default', themeCSS: isDarkTheme ? darkThemeStyling : '', useMaxWidth: false }) + mermaidAPI.render(getId(), content, (svgGraph) => { element.innerHTML = svgGraph }) diff --git a/browser/lib/ui-themes.js b/browser/lib/ui-themes.js new file mode 100644 index 00000000..3d9044c6 --- /dev/null +++ b/browser/lib/ui-themes.js @@ -0,0 +1,39 @@ +import i18n from 'browser/lib/i18n' + +export default [ + { + name: 'dark', + label: i18n.__('Dark'), + isDark: true + }, + { + name: 'default', + label: i18n.__('Default'), + isDark: false + }, + { + name: 'dracula', + label: i18n.__('Dracula'), + isDark: true + }, + { + name: 'monokai', + label: i18n.__('Monokai'), + isDark: true + }, + { + name: 'nord', + label: i18n.__('Nord'), + isDark: true + }, + { + name: 'solarized-dark', + label: i18n.__('Solarized Dark'), + isDark: true + }, + { + name: 'white', + label: i18n.__('White'), + isDark: false + } +] diff --git a/browser/main/Detail/Detail.styl b/browser/main/Detail/Detail.styl index 1b7bd606..f03de5d7 100644 --- a/browser/main/Detail/Detail.styl +++ b/browser/main/Detail/Detail.styl @@ -24,23 +24,16 @@ body[data-theme="dark"] .empty-message color $ui-dark-inactive-text-color -body[data-theme="solarized-dark"] - .root - background-color $ui-solarized-dark-noteDetail-backgroundColor - border-left 1px solid $ui-solarized-dark-borderColor - .empty-message - color $ui-solarized-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + .root + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + border-left 1px solid get-theme-var(theme, 'borderColor') + .empty-message + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - .root - background-color $ui-monokai-noteDetail-backgroundColor - border-left 1px solid $ui-monokai-borderColor - .empty-message - color $ui-monokai-text-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -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 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl index fe045e3a..76ce1eb8 100644 --- a/browser/main/Detail/FolderSelect.styl +++ b/browser/main/Detail/FolderSelect.styl @@ -134,54 +134,37 @@ body[data-theme="dark"] .search-optionList-item-name-surfix color $ui-dark-inactive-text-color -body[data-theme="monokai"] - .root - color $ui-dark-text-color - &:hover - color white - background-color $ui-monokai-button--hover-backgroundColor - border-color $ui-monokai-borderColor +apply-theme(theme) + body[data-theme={theme}] + .root + &:hover + background-color get-theme-var(theme, 'button--hover-backgroundColor') + border-color get-theme-var(theme, 'borderColor') - .search-optionList - color white - border-color $ui-monokai-borderColor - background-color $ui-monokai-button-backgroundColor + .search-input + color get-theme-var(theme, 'text-color') + background-color transparent + border-color get-theme-var(theme, 'borderColor') - .search-optionList-item - &:hover - background-color lighten($ui-monokai-button--hover-backgroundColor, 15%) + .search-optionList + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'button-backgroundColor') - .search-optionList-item--active - background-color $ui-monokai-button--active-backgroundColor - color $ui-monokai-button--active-color - &:hover - background-color $ui-monokai-button--active-backgroundColor - color $ui-monokai-button--active-color - .search-optionList-item-name-surfix - color $ui-monokai-inactive-text-color + .search-optionList-item + &:hover + background-color lighten(get-theme-var(theme, 'button--hover-backgroundColor'), 15%) -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-item--active + background-color get-theme-var(theme, 'button--active-backgroundColor') + color get-theme-var(theme, 'button--active-color') + &:hover + background-color get-theme-var(theme, 'button--active-backgroundColor') + color get-theme-var(theme, 'button--active-color') + .search-optionList-item-name-surfix + color get-theme-var(theme, 'inactive-text-color') - .search-optionList - color #f8f8f2 - border-color $ui-dracula-borderColor - background-color $ui-dracula-button-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/FullscreenButton.styl b/browser/main/Detail/FullscreenButton.styl index 133577f3..52a3b961 100644 --- a/browser/main/Detail/FullscreenButton.styl +++ b/browser/main/Detail/FullscreenButton.styl @@ -1,26 +1,26 @@ -.control-fullScreenButton - top 80px - topBarButtonRight() - &:hover .tooltip - opacity 1 - -.tooltip - tooltip() - position absolute - pointer-events none - top 50px - right 70px - z-index 200 - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - -.tooltip:lang(ja) - @extend .tooltip - right 35px - -body[data-theme="dark"] - .control-fullScreenButton +.control-fullScreenButton + top 80px + topBarButtonRight() + &:hover .tooltip + opacity 1 + +.tooltip + tooltip() + position absolute + pointer-events none + top 50px + right 70px + z-index 200 + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + +.tooltip:lang(ja) + @extend .tooltip + right 35px + +body[data-theme="dark"] + .control-fullScreenButton topBarButtonDark() \ No newline at end of file diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl index 1f774174..41625816 100644 --- a/browser/main/Detail/InfoPanel.styl +++ b/browser/main/Detail/InfoPanel.styl @@ -138,162 +138,49 @@ .export--unable cursor not-allowed -body[data-theme="dark"] - .control-infoButton-panel - background-color $ui-dark-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .control-infoButton-panel + background-color get-theme-var(theme, 'noteList-backgroundColor') - .control-infoButton-panel-trash - background-color $ui-dark-noteList-backgroundColor + .control-infoButton-panel-trash + background-color get-theme-var(theme, 'noteList-backgroundColor') - .modification-date - color $ui-dark-text-color + .modification-date + color get-theme-var(theme, 'text-color') - .modification-date-desc - color $ui-inactive-text-color + .modification-date-desc + color $ui-inactive-text-color - .infoPanel-defaul-count - color $ui-dark-text-color + .infoPanel-defaul-count + color get-theme-var(theme, 'text-color') - .infoPanel-sub-count - color $ui-inactive-text-color + .infoPanel-sub-count + color $ui-inactive-text-color - .infoPanel-default - color $ui-dark-text-color + .infoPanel-default + color get-theme-var(theme, 'text-color') - .infoPanel-sub - color $ui-inactive-text-color + .infoPanel-sub + color $ui-inactive-text-color - .infoPanel-noteLink - background-color alpha($ui-dark-borderColor, 60%) - color $ui-dark-text-color + .infoPanel-noteLink + background-color alpha(get-theme-var(theme, 'borderColor'), 20%) + color get-theme-var(theme, 'text-color') - [id=export-wrap] - button - color $ui-dark-inactive-text-color - &:hover - background-color alpha($ui-dark-borderColor, 20%) - color $ui-dark-text-color - p - color $ui-dark-inactive-text-color - &:hover - color $ui-dark-text-color + [id=export-wrap] + button + color $ui-dark-inactive-text-color + &:hover + background-color alpha(get-theme-var(theme, 'borderColor'), 20%) + color get-theme-var(theme, 'text-color') + p + color $ui-dark-inactive-text-color + &:hover + color get-theme-var(theme, 'text-color') -body[data-theme="solarized-dark"] - .control-infoButton-panel - background-color $ui-solarized-dark-noteList-backgroundColor +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .control-infoButton-panel-trash - background-color $ui-solarized-ark-noteList-backgroundColor - - .modification-date - color $ui-solarized-ark-text-color - - .modification-date-desc - color $ui-inactive-text-color - - .infoPanel-defaul-count - color $ui-solarized-dark-text-color - - .infoPanel-sub-count - color $ui-inactive-text-color - - .infoPanel-default - color $ui-solarized-ark-text-color - - .infoPanel-sub - color $ui-inactive-text-color - - .infoPanel-noteLink - background-color alpha($ui-solarized-dark-borderColor, 20%) - color $ui-solarized-dark-text-color - - [id=export-wrap] - button - color $ui-dark-inactive-text-color - &:hover - background-color alpha($ui-solarized-dark-borderColor, 20%) - color $ui-solarized-ark-text-color - p - color $ui-dark-inactive-text-color - &:hover - color $ui-solarized-ark-text-color - -body[data-theme="monokai"] - .control-infoButton-panel - background-color $ui-monokai-noteList-backgroundColor - - .control-infoButton-panel-trash - background-color $ui-monokai-noteList-backgroundColor - - .modification-date - color $ui-monokai-text-color - - .modification-date-desc - color $ui-inactive-text-color - - .infoPanel-defaul-count - color $ui-monokai-text-color - - .infoPanel-sub-count - color $ui-inactive-text-color - - .infoPanel-default - color $ui-monokai-text-color - - .infoPanel-sub - color $ui-inactive-text-color - - .infoPanel-noteLink - background-color alpha($ui-monokai-borderColor, 20%) - color $ui-monokai-text-color - - [id=export-wrap] - button - color $ui-dark-inactive-text-color - &:hover - background-color alpha($ui-monokai-borderColor, 20%) - color $ui-monokai-text-color - p - 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 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index cdfeaf3a..678969a5 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/browser/main/Detail/MarkdownNoteDetail.styl @@ -66,18 +66,14 @@ body[data-theme="dark"] .control-fullScreenButton topBarButtonDark() +apply-theme(theme) + body[data-theme={theme}] + .root + border-left 1px solid get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') -body[data-theme="solarized-dark"] - .root - border-left 1px solid $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteDetail-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -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 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl index 1ca46516..d44f61b6 100644 --- a/browser/main/Detail/NoteDetailInfo.styl +++ b/browser/main/Detail/NoteDetailInfo.styl @@ -94,17 +94,14 @@ body[data-theme="dark"] .undo-button topBarButtonDark() -body[data-theme="solarized-dark"] - .info - border-color $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteDetail-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .info + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') -body[data-theme="monokai"] - .info - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteDetail-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - .info - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteDetail-backgroundColor \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index 1af93645..c312d271 100644 --- a/browser/main/Detail/SnippetNoteDetail.styl +++ b/browser/main/Detail/SnippetNoteDetail.styl @@ -156,78 +156,35 @@ body[data-theme="dark"] .control-fullScreenButton topBarButtonDark() -body[data-theme="solarized-dark"] - .root - border-left 1px solid $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteDetail-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root + border-left 1px solid get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') - .body - background-color $ui-solarized-dark-noteDetail-backgroundColor + .body + background-color get-theme-var(theme, 'noteDetail-backgroundColor') - .body .description textarea - background-color $ui-solarized-dark-noteDetail-backgroundColor - color $ui-solarized-dark-text-color - border 1px solid $ui-solarized-dark-borderColor + .body .description textarea + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + color get-theme-var(theme, 'text-color') + border 1px solid get-theme-var(theme, 'borderColor') - .tabList .tabButton - border-color $ui-solarized-dark-borderColor + .tabList .tabButton + border-color get-theme-var(theme, 'borderColor') - .tabButton - &:hover - color $ui-solarized-dark-button--active-color - background-color $ui-solarized-dark-noteDetail-backgroundColor - transition 0.15s - - .tabList - background-color $ui-solarized-dark-noteDetail-backgroundColor - color $ui-solarized-dark-text-color + .tabButton + &:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + transition 0.15s -body[data-theme="monokai"] - .root - border-left 1px solid $ui-monokai-borderColor - background-color $ui-monokai-noteDetail-backgroundColor + .tabList + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + color get-theme-var(theme, 'text-color') - .body - background-color $ui-monokai-noteDetail-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .body .description textarea - background-color $ui-monokai-noteDetail-backgroundColor - color $ui-monokai-text-color - border 1px solid $ui-monokai-borderColor - - .tabList .tabButton - border-color $ui-monokai-borderColor - - .tabButton - &:hover - color $ui-monokai-text-color - background-color $ui-monokai-noteDetail-backgroundColor - - .tabList - background-color $ui-monokai-noteDetail-backgroundColor - 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 .tabButton - border-color $ui-dracula-borderColor - - .tabButton - &:hover - color $ui-dracula-text-color - background-color $ui-dracula-noteDetail-backgroundColor - - .tabList - background-color $ui-dracula-noteDetail-backgroundColor - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl index 844561c6..6107b731 100644 --- a/browser/main/Detail/TagSelect.styl +++ b/browser/main/Detail/TagSelect.styl @@ -54,35 +54,20 @@ body[data-theme="dark"] .tag-label color $ui-dark-text-color -body[data-theme="solarized-dark"] - .tag - background-color $ui-solarized-dark-tag-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .tag + background-color get-theme-var(theme, 'tag-backgroundColor') - .tag-removeButton - border-color $ui-button--focus-borderColor - background-color transparent + .tag-removeButton + border-color $ui-button--focus-borderColor + background-color transparent - .tag-label - color $ui-solarized-dark-text-color + .tag-label + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - .tag - background-color $ui-monokai-tag-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .tag-removeButton - border-color $ui-button--focus-borderColor - background-color transparent - - .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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/ToggleModeButton.styl b/browser/main/Detail/ToggleModeButton.styl index 2b47b932..481e6747 100644 --- a/browser/main/Detail/ToggleModeButton.styl +++ b/browser/main/Detail/ToggleModeButton.styl @@ -1,77 +1,77 @@ -.control-toggleModeButton - height 25px - border-radius 50px - background-color #F4F4F4 - width 52px - display flex - align-items center - position: relative - top 2px - .active - background-color #1EC38B - width 33px - height 24px - box-shadow 2px 0px 7px #eee - z-index 1 - - div - width 40px - height 100% - border-radius 50% - display flex - align-items center - justify-content center - cursor pointer - - &:hover .tooltip - opacity 1 - -.tooltip - tooltip() - position absolute - pointer-events none - top 33px - left -10px - z-index 200 - width 80px - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - -.tooltip:lang(ja) - @extend .tooltip - left -8px - width 70px - -body[data-theme="dark"] - .control-fullScreenButton - topBarButtonDark() - - .control-toggleModeButton - background-color #3A404C - .active - background-color #1EC38B - box-shadow 2px 0px 7px #444444 - -body[data-theme="solarized-dark"] - .control-toggleModeButton - background-color #002B36 - .active - background-color #1EC38B - box-shadow 2px 0px 7px #222222 - -body[data-theme="monokai"] - .control-toggleModeButton - background-color #373831 - .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 +.control-toggleModeButton + height 25px + border-radius 50px + background-color #F4F4F4 + width 52px + display flex + align-items center + position: relative + top 2px + .active + background-color #1EC38B + width 33px + height 24px + box-shadow 2px 0px 7px #eee + z-index 1 + + div + width 40px + height 100% + border-radius 50% + display flex + align-items center + justify-content center + cursor pointer + + &:hover .tooltip + opacity 1 + +.tooltip + tooltip() + position absolute + pointer-events none + top 33px + left -10px + z-index 200 + width 80px + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + +.tooltip:lang(ja) + @extend .tooltip + left -8px + width 70px + +body[data-theme="dark"] + .control-fullScreenButton + topBarButtonDark() + + .control-toggleModeButton + background-color #3A404C + .active + background-color #1EC38B + box-shadow 2px 0px 7px #444444 + +body[data-theme="solarized-dark"] + .control-toggleModeButton + background-color #002B36 + .active + background-color #1EC38B + box-shadow 2px 0px 7px #222222 + +apply-theme(theme) + body[data-theme={theme}] + .control-toggleModeButton + background-color get-theme-var(theme, 'borderColor') + .active + background-color get-theme-var(theme, 'active-color') + box-shadow 2px 0px 7px #222222 + +for theme in 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Main.js b/browser/main/Main.js index 26fc8377..8d346f4a 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -17,6 +17,7 @@ import store from 'browser/main/store' import i18n from 'browser/lib/i18n' import { getLocales } from 'browser/lib/Languages' import applyShortcuts from 'browser/main/lib/shortcutManager' +import uiThemes from 'browser/lib/ui-themes' const path = require('path') const electron = require('electron') const { remote } = electron @@ -142,9 +143,7 @@ class Main extends React.Component { componentDidMount () { const { dispatch, config } = this.props - const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula'] - - if (supportedThemes.indexOf(config.ui.theme) !== -1) { + if (uiThemes.some(theme => theme.name === config.ui.theme)) { document.body.setAttribute('data-theme', config.ui.theme) } else { document.body.setAttribute('data-theme', 'default') diff --git a/browser/main/NewNoteButton/NewNoteButton.styl b/browser/main/NewNoteButton/NewNoteButton.styl index 75a9061c..57b0fc03 100644 --- a/browser/main/NewNoteButton/NewNoteButton.styl +++ b/browser/main/NewNoteButton/NewNoteButton.styl @@ -72,14 +72,13 @@ body[data-theme="dark"] .control-newNoteButton-tooltip darkTooltip() -body[data-theme="solarized-dark"] - .root, .root--expanded - background-color $ui-solarized-dark-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root, .root--expanded + background-color get-theme-var(theme, 'noteList-backgroundColor') -body[data-theme="monokai"] - .root, .root--expanded - background-color $ui-monokai-noteList-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - .root, .root--expanded - background-color $ui-dracula-noteList-backgroundColor \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl index 73959c9b..2b42ae3d 100644 --- a/browser/main/NoteList/NoteList.styl +++ b/browser/main/NoteList/NoteList.styl @@ -66,99 +66,33 @@ body[data-theme="white"] .control background-color $ui-white-noteList-backgroundColor -body[data-theme="dark"] - .root - border-color $ui-dark-borderColor - background-color $ui-dark-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') - .control - background-color $ui-dark-noteList-backgroundColor - border-color $ui-dark-borderColor + .control + background-color get-theme-var(theme, 'noteList-backgroundColor') + border-color get-theme-var(theme, 'borderColor') - .control-sortBy-select - &:hover - transition 0.2s - color $ui-dark-text-color + .control-sortBy-select + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') - .control-button - color $ui-dark-inactive-text-color - &:hover - color $ui-dark-text-color + .control-button + color get-theme-var(theme, 'inactive-text-color') + &:hover + color get-theme-var(theme, 'text-color') - .control-button--active - color $ui-dark-text-color - &:active - color $ui-dark-text-color + .control-button--active + color get-theme-var(theme, 'text-color') + &:active + color get-theme-var(theme, 'text-color') +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="solarized-dark"] - .root - border-color $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteList-backgroundColor - - .control - background-color $ui-solarized-dark-noteList-backgroundColor - border-color $ui-solarized-dark-borderColor - - .control-sortBy-select - &:hover - transition 0.2s - color $ui-solarized-dark-text-color - - .control-button - color $ui-solarized-dark-inactive-text-color - &:hover - color $ui-solarized-dark-text-color - - .control-button--active - color $ui-solarized-dark-text-color - &:active - color $ui-solarized-dark-text-color - -body[data-theme="monokai"] - .root - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor - - .control - background-color $ui-monokai-noteList-backgroundColor - border-color $ui-monokai-borderColor - - .control-sortBy-select - &:hover - transition 0.2s - color $ui-monokai-text-color - - .control-button - color $ui-monokai-inactive-text-color - &:hover - color $ui-monokai-text-color - - .control-button--active - 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 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/SideNav/PreferenceButton.styl b/browser/main/SideNav/PreferenceButton.styl index 54513cb6..33422b4f 100644 --- a/browser/main/SideNav/PreferenceButton.styl +++ b/browser/main/SideNav/PreferenceButton.styl @@ -1,52 +1,50 @@ -.top-menu-preference - navButtonColor() - position absolute - top 22px - right 10px - width 2em - background-color transparent - &:hover - color $ui-button-default--active-backgroundColor - background-color transparent - .tooltip - opacity 1 - &:active, &:active:hover - color $ui-button-default--active-backgroundColor - -body[data-theme="white"] - .top-menu-preference - navWhiteButtonColor() - background-color transparent - &:hover - color #0B99F1 - background-color transparent - &:active, &:active:hover - color #0B99F1 - background-color transparent - -body[data-theme="dark"] - .top-menu-preference - navDarkButtonColor() - background-color transparent - &:active - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - background-color transparent - &:hover - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - background-color transparent - - - -.tooltip - tooltip() - position absolute - pointer-events none - top 26px - left -20px - z-index 200 - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - white-space nowrap +.top-menu-preference + navButtonColor() + position absolute + top 22px + right 10px + width 2em + background-color transparent + &:hover + color $ui-button-default--active-backgroundColor + background-color transparent + .tooltip + opacity 1 + &:active, &:active:hover + color $ui-button-default--active-backgroundColor + +body[data-theme="white"] + .top-menu-preference + navWhiteButtonColor() + background-color transparent + &:hover + color #0B99F1 + background-color transparent + &:active, &:active:hover + color #0B99F1 + background-color transparent + +body[data-theme="dark"] + .top-menu-preference + navDarkButtonColor() + background-color transparent + &:active + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + background-color transparent + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + background-color transparent + +.tooltip + tooltip() + position absolute + pointer-events none + top 26px + left -20px + z-index 200 + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + white-space nowrap diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 9fa6d4fa..86b6caeb 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -113,17 +113,14 @@ body[data-theme="dark"] .top border-color $ui-dark-borderColor -body[data-theme="solarized-dark"] - .root, .root--folded - background-color $ui-solarized-dark-backgroundColor - border-right 1px solid $ui-solarized-dark-borderColor +apply-theme(theme) + body[data-theme={theme}] + .root, .root--folded + background-color get-theme-var(theme, 'backgroundColor') + border-right 1px solid get-theme-var(theme, 'borderColor') -body[data-theme="monokai"] - .root, .root--folded - background-color $ui-monokai-backgroundColor - border-right 1px solid $ui-monokai-borderColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - .root, .root--folded - background-color $ui-dracula-backgroundColor - border-right 1px solid $ui-dracula-borderColor \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl index a06ecb11..375a989f 100644 --- a/browser/main/SideNav/StorageItem.styl +++ b/browser/main/SideNav/StorageItem.styl @@ -132,55 +132,57 @@ body[data-theme="white"] background-color alpha($ui-button--active-backgroundColor, 40%) color $ui-text-color -body[data-theme="dark"] - .header--active - background-color $ui-dark-button--active-backgroundColor - transition color background-color 0.15s +apply-theme(theme) + body[data-theme={theme}] + .header--active + background-color get-theme-var(theme, 'button--active-backgroundColor') + transition color background-color 0.15s + + .header--active + .header-toggleButton + color get-theme-var(theme, 'text-color') + + .header--active + .header-info + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') + &:active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') + + .header--active + .header-addFolderButton + color get-theme-var(theme, 'text-color') - .header--active .header-toggleButton - color $ui-dark-text-color + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%) + &:active, &:active:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') - .header--active .header-info - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - &:active - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%) + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%) + &:active, &:active:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') - .header--active .header-addFolderButton - color $ui-dark-text-color - - .header-toggleButton - &:hover - transition 0.2s - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 60%) - &:active, &:active:hover - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - - .header-info - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - &:hover - transition 0.2s - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - &:active, &:active:hover - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - - .header-addFolderButton - &:hover - transition 0.2s - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 60%) - &:active, &:active:hover - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - - + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%) + &:active, &:active:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') +apply-theme('dark') +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/SideNav/SwitchButton.styl b/browser/main/SideNav/SwitchButton.styl index 36099140..2184bc69 100644 --- a/browser/main/SideNav/SwitchButton.styl +++ b/browser/main/SideNav/SwitchButton.styl @@ -1,60 +1,60 @@ -.non-active-button - color $ui-inactive-text-color - font-size 16px - border 0 - background-color transparent - transition 0.2s - display flex - text-align center - margin-right 4px - position relative - &:hover - color alpha(#239F86, 60%) - .tooltip - opacity 1 - -.active-button - @extend .non-active-button - color $ui-button-default--active-backgroundColor - -.tooltip - tooltip() - position absolute - pointer-events none - top 22px - left -2px - z-index 200 - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - white-space nowrap - -body[data-theme="white"] - .non-active-button - color $ui-inactive-text-color - &:hover - color alpha(#0B99F1, 60%) - - .tag-title - p - color $ui-text-color - - .non-active-button - &:hover - color alpha(#0B99F1, 60%) - - .active-button - @extend .non-active-button - color #0B99F1 - -body[data-theme="dark"] - .non-active-button - color alpha($ui-dark-text-color, 60%) - &:hover - color alpha(#0B99F1, 60%) - - .tag-title - p +.non-active-button + color $ui-inactive-text-color + font-size 16px + border 0 + background-color transparent + transition 0.2s + display flex + text-align center + margin-right 4px + position relative + &:hover + color alpha(#239F86, 60%) + .tooltip + opacity 1 + +.active-button + @extend .non-active-button + color $ui-button-default--active-backgroundColor + +.tooltip + tooltip() + position absolute + pointer-events none + top 22px + left -2px + z-index 200 + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + white-space nowrap + +body[data-theme="white"] + .non-active-button + color $ui-inactive-text-color + &:hover + color alpha(#0B99F1, 60%) + + .tag-title + p + color $ui-text-color + + .non-active-button + &:hover + color alpha(#0B99F1, 60%) + + .active-button + @extend .non-active-button + color #0B99F1 + +body[data-theme="dark"] + .non-active-button + color alpha($ui-dark-text-color, 60%) + &:hover + color alpha(#0B99F1, 60%) + + .tag-title + p color alpha($ui-dark-text-color, 60%) \ No newline at end of file diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl index 23dec208..7ed89eb5 100644 --- a/browser/main/StatusBar/StatusBar.styl +++ b/browser/main/StatusBar/StatusBar.styl @@ -78,24 +78,20 @@ body[data-theme="dark"] border-color $ui-dark-borderColor border-left 1px solid $ui-dark-borderColor -body[data-theme="monokai"] - navButtonColor() - .zoom - border-color $ui-dark-borderColor - color $ui-monokai-text-color - &:hover - transition 0.15s - color $ui-monokai-active-color - &:active - color $ui-monokai-active-color +apply-theme(theme) + body[data-theme={theme}] + navButtonColor() + .zoom + border-color $ui-dark-borderColor + color get-theme-var(theme, 'text-color') + &:hover + transition 0.15s + color get-theme-var(theme, 'active-color') + &:active + color get-theme-var(theme, '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 \ No newline at end of file +for theme in 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl index 61b21fc5..a0eeadf6 100644 --- a/browser/main/TopBar/TopBar.styl +++ b/browser/main/TopBar/TopBar.styl @@ -212,69 +212,31 @@ body[data-theme="dark"] .control-newPostButton-tooltip darkTooltip() +apply-theme(theme) + body[data-theme={theme}] + .root, .root--expanded + background-color get-theme-var(theme, 'noteList-backgroundColor') -body[data-theme="solarized-dark"] - .root, .root--expanded - background-color $ui-solarized-dark-noteList-backgroundColor + .control + border-color get-theme-var(theme, 'borderColor') + .control-search + background-color get-theme-var(theme, 'noteList-backgroundColor') - .control - border-color $ui-solarized-dark-borderColor - .control-search - background-color $ui-solarized-dark-noteList-backgroundColor + .control-search-icon + absolute top bottom left + line-height 32px + width 35px + color get-theme-var(theme, 'inactive-text-color') + background-color get-theme-var(theme, 'noteList-backgroundColor') - .control-search-icon - absolute top bottom left - line-height 32px - width 35px - color $ui-solarized-dark-inactive-text-color - background-color $ui-solarized-dark-noteList-backgroundColor + .control-search-input + background-color get-theme-var(theme, 'noteList-backgroundColor') + input + background-color get-theme-var(theme, 'noteList-backgroundColor') + color get-theme-var(theme, 'text-color') - .control-search-input - background-color $ui-solarized-dark-noteList-backgroundColor - input - background-color $ui-solarized-dark-noteList-backgroundColor - color $ui-solarized-dark-text-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .root, .root--expanded - background-color $ui-monokai-noteList-backgroundColor - - .control - border-color $ui-monokai-borderColor - .control-search - background-color $ui-monokai-noteList-backgroundColor - - .control-search-icon - absolute top bottom left - line-height 32px - width 35px - color $ui-monokai-inactive-text-color - background-color $ui-monokai-noteList-backgroundColor - - .control-search-input - background-color $ui-monokai-noteList-backgroundColor - 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 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/global.styl b/browser/main/global.styl index d864993d..b0da56f5 100644 --- a/browser/main/global.styl +++ b/browser/main/global.styl @@ -96,16 +96,6 @@ modalBackColor = white z-index modalZIndex + 1 -body[data-theme="dark"] - background-color $ui-dark-backgroundColor - ::-webkit-scrollbar-thumb - background-color rgba(0, 0, 0, 0.3) - .ModalBase - .modalBack - background-color $ui-dark-backgroundColor - .sortableItemHelper - color: $ui-dark-text-color - .CodeMirror font-family inherit !important line-height 1.4em @@ -148,35 +138,22 @@ body[data-theme="dark"] .sortableItemHelper z-index modalZIndex + 5 -body[data-theme="solarized-dark"] - background-color $ui-solarized-dark-backgroundColor - ::-webkit-scrollbar-thumb - background-color rgba(0, 0, 0, 0.3) - .ModalBase - .modalBack - background-color $ui-solarized-dark-backgroundColor - .sortableItemHelper - color: $ui-solarized-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + background-color get-theme-var(theme, 'backgroundColor') + ::-webkit-scrollbar-thumb + background-color rgba(0, 0, 0, 0.3) + .ModalBase + .modalBack + background-color get-theme-var(theme, 'backgroundColor') + .sortableItemHelper + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - background-color $ui-monokai-backgroundColor - ::-webkit-scrollbar-thumb - background-color rgba(0, 0, 0, 0.3) - .ModalBase - .modalBack - background-color $ui-monokai-backgroundColor - .sortableItemHelper - color: $ui-monokai-text-color +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - background-color $ui-dracula-backgroundColor - ::-webkit-scrollbar-thumb - background-color rgba(0, 0, 0, 0.3) - .ModalBase - .modalBack - background-color $ui-dracula-backgroundColor - .sortableItemHelper - color: $ui-dracula-text-color +for theme in $themes + apply-theme(theme) body[data-theme="default"] .SideNav ::-webkit-scrollbar-thumb diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index 5558b3bd..e8e11b9e 100644 --- a/browser/main/lib/ConfigManager.js +++ b/browser/main/lib/ConfigManager.js @@ -2,6 +2,7 @@ import _ from 'lodash' import RcParser from 'browser/lib/RcParser' import i18n from 'browser/lib/i18n' import ee from 'browser/main/lib/eventEmitter' +import uiThemes from 'browser/lib/ui-themes' const OSX = global.process.platform === 'darwin' const win = global.process.platform === 'win32' @@ -154,16 +155,8 @@ function set (updates) { if (!validate(newConfig)) throw new Error('INVALID CONFIG') _save(newConfig) - if (newConfig.ui.theme === 'dark') { - document.body.setAttribute('data-theme', 'dark') - } else if (newConfig.ui.theme === 'white') { - document.body.setAttribute('data-theme', 'white') - } else if (newConfig.ui.theme === 'solarized-dark') { - 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') + if (uiThemes.some(theme => theme.name === newConfig.ui.theme)) { + document.body.setAttribute('data-theme', newConfig.ui.theme) } else { document.body.setAttribute('data-theme', 'default') } diff --git a/browser/main/modals/CreateFolderModal.styl b/browser/main/modals/CreateFolderModal.styl index 93848683..95d6249a 100644 --- a/browser/main/modals/CreateFolderModal.styl +++ b/browser/main/modals/CreateFolderModal.styl @@ -51,106 +51,40 @@ font-size 14px colorPrimaryButton() -body[data-theme="dark"] - .root - modalDark() - width 500px - height 270px - overflow hidden - position relative +apply-theme(theme) + body[data-theme={theme}] + .root + width 500px + height 270px + overflow hidden + position relative + position relative + z-index $modal-z-index + width 100% + background-color get-theme-var(theme, 'backgroundColor') + overflow hidden + border-radius $modal-border-radius - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-dark-text-color + .header + background-color transparent + border-color $ui-dark-borderColor + color get-theme-var(theme, 'text-color') - .control-folder-label - color $ui-dark-text-color + .control-folder-label + color get-theme-var(theme, 'text-color') - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white + .control-folder-input + border 1px solid $ui-input--create-folder-modal + color white - .description - color $ui-inactive-text-color + .description + color $ui-inactive-text-color - .control-confirmButton - colorDarkPrimaryButton() + .control-confirmButton + colorThemedPrimaryButton(theme) -body[data-theme="solarized-dark"] - .root - modalSolarizedDark() - width 500px - height 270px - overflow hidden - position relative +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-solarized-dark-text-color - - .control-folder-label - color $ui-solarized-dark-text-color - - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white - - .description - color $ui-inactive-text-color - - .control-confirmButton - colorSolarizedDarkPrimaryButton() - -body[data-theme="monokai"] - .root - modalMonokai() - width 500px - height 270px - overflow hidden - position relative - - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-monokai-text-color - - .control-folder-label - color $ui-monokai-text-color - - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white - - .description - color $ui-inactive-text-color - - .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() \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/NewNoteModal.styl b/browser/main/modals/NewNoteModal.styl index c82b9376..c82ac9a9 100644 --- a/browser/main/modals/NewNoteModal.styl +++ b/browser/main/modals/NewNoteModal.styl @@ -47,70 +47,26 @@ text-align center margin-bottom 25px -body[data-theme="dark"] - .root - modalDark() +apply-theme(theme) + body[data-theme={theme}] + .root + background-color transparent - .header - color $ui-dark-text-color + .header + color get-theme-var(theme, 'text-color') - .control-button - border-color $ui-dark-borderColor - color $ui-dark-text-color - background-color transparent - &:focus - colorDarkPrimaryButton() + .control-button + border-color get-theme-var(theme, 'borderColor') + color get-theme-var(theme, 'text-color') + background-color transparent + &:focus + colorThemedPrimaryButton(theme) - .description - color $ui-inactive-text-color + .description + color get-theme-var(theme, 'text-color') -body[data-theme="solarized-dark"] - .root - background-color transparent +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .header - color $ui-solarized-dark-text-color - - .control-button - border-color $ui-solarized-dark-borderColor - color $ui-solarized-dark-text-color - background-color transparent - &:focus - colorDarkPrimaryButton() - - .description - color $ui-solarized-dark-text-color - -body[data-theme="monokai"] - .root - background-color transparent - - .header - color $ui-monokai-text-color - - .control-button - border-color $ui-monokai-borderColor - color $ui-monokai-text-color - background-color transparent - &:focus - colorDarkPrimaryButton() - - .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 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl index 255165ce..0d9881cd 100644 --- a/browser/main/modals/PreferencesModal/ConfigTab.styl +++ b/browser/main/modals/PreferencesModal/ConfigTab.styl @@ -128,20 +128,10 @@ colorDarkControl() background-color $ui-dark-backgroundColor color $ui-dark-text-color -colorSolarizedDarkControl() +colorThemedControl(theme) border none - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color - -colorMonokaiControl() - border none - 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 + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') body[data-theme="dark"] .root @@ -170,84 +160,36 @@ body[data-theme="dark"] select, .group-section-control-input colorDarkControl() +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color + .group-header + color get-theme-var(theme, 'text-color') + border-color get-theme-var(theme, 'borderColor') - .group-header - color $ui-solarized-dark-text-color - border-color $ui-solarized-dark-borderColor + .group-header2 + color get-theme-var(theme, 'text-color') - .group-header2 - color $ui-solarized-dark-text-color + .group-section-control-input + border-color get-theme-var(theme, 'borderColor') - .group-section-control-input - border-color $ui-solarized-dark-borderColor + .group-control + border-color get-theme-var(theme, 'borderColor') + .group-control-leftButton + colorDarkDefaultButton() + border-color get-theme-var(theme, 'borderColor') + .group-control-rightButton + colorThemedPrimaryButton(theme) + .group-hint + colorThemedControl(theme) + .group-section-control + select, .group-section-control-input + colorThemedControl(theme) - .group-control - border-color $ui-solarized-dark-borderColor - .group-control-leftButton - colorDarkDefaultButton() - border-color $ui-solarized-dark-borderColor - .group-control-rightButton - colorSolarizedDarkPrimaryButton() - .group-hint - colorSolarizedDarkControl() - .group-section-control - select, .group-section-control-input - colorSolarizedDarkControl() +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .root - color $ui-monokai-text-color - - .group-header - color $ui-monokai-text-color - border-color $ui-monokai-borderColor - - .group-header2 - color $ui-monokai-text-color - - .group-section-control-input - border-color $ui-monokai-borderColor - - .group-control - border-color $ui-monokai-borderColor - .group-control-leftButton - colorDarkDefaultButton() - border-color $ui-monokai-borderColor - .group-control-rightButton - colorMonokaiPrimaryButton() - .group-hint - colorMonokaiControl() - .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() \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/Crowdfunding.styl b/browser/main/modals/PreferencesModal/Crowdfunding.styl index 6d72290b..eb4f1289 100644 --- a/browser/main/modals/PreferencesModal/Crowdfunding.styl +++ b/browser/main/modals/PreferencesModal/Crowdfunding.styl @@ -30,20 +30,15 @@ body[data-theme="dark"] p color $ui-dark-text-color -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color - p - color $ui-solarized-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') + p + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - .root - color $ui-monokai-text-color - p - color $ui-monokai-text-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - .root - color $ui-dracula-text-color - p - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/FolderItem.styl b/browser/main/modals/PreferencesModal/FolderItem.styl index 618e9bc4..32a83d63 100644 --- a/browser/main/modals/PreferencesModal/FolderItem.styl +++ b/browser/main/modals/PreferencesModal/FolderItem.styl @@ -107,73 +107,32 @@ body[data-theme="dark"] .folderItem-right-dangerButton colorDarkDangerButton() +apply-theme(theme) + body[data-theme={theme}] + .folderItem + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + .folderItem-left-danger + color $danger-color -body[data-theme="solarized-dark"] - .folderItem - &:hover - background-color $ui-solarized-dark-button-backgroundColor + .folderItem-left-key + color $ui-dark-inactive-text-color - .folderItem-left-danger - color $danger-color + .folderItem-left-colorButton + colorThemedPrimaryButton(theme) - .folderItem-left-key - color $ui-dark-inactive-text-color + .folderItem-right-button + colorThemedPrimaryButton(theme) - .folderItem-left-colorButton - colorSolarizedDarkPrimaryButton() + .folderItem-right-confirmButton + colorThemedPrimaryButton(theme) - .folderItem-right-button - colorSolarizedDarkPrimaryButton() + .folderItem-right-dangerButton + colorThemedPrimaryButton(theme) - .folderItem-right-confirmButton - colorSolarizedDarkPrimaryButton() +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .folderItem-right-dangerButton - colorSolarizedDarkPrimaryButton() - -body[data-theme="monokai"] - .folderItem - &:hover - background-color $ui-monokai-button-backgroundColor - - .folderItem-left-danger - color $danger-color - - .folderItem-left-key - color $ui-dark-inactive-text-color - - .folderItem-left-colorButton - colorMonokaiPrimaryButton() - - .folderItem-right-button - colorMonokaiPrimaryButton() - - .folderItem-right-confirmButton - colorMonokaiPrimaryButton() - - .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() \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/InfoTab.styl b/browser/main/modals/PreferencesModal/InfoTab.styl index 44f2d9ae..dc675267 100644 --- a/browser/main/modals/PreferencesModal/InfoTab.styl +++ b/browser/main/modals/PreferencesModal/InfoTab.styl @@ -61,24 +61,16 @@ body[data-theme="dark"] .root color alpha($tab--dark-text-color, 80%) +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') + .list + a + color get-theme-var(theme, 'active-color') -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color -.list - a - color $ui-solarized-dark-active-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .root - color $ui-monokai-text-color -.list - a - color $ui-monokai-active-color - -body[data-theme="dracula"] - .root - color $ui-dracula-text-color -.list - a - color $ui-dracula-active-color +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/PreferencesModal.styl b/browser/main/modals/PreferencesModal/PreferencesModal.styl index 7004259b..2e3b4040 100644 --- a/browser/main/modals/PreferencesModal/PreferencesModal.styl +++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl @@ -64,102 +64,31 @@ top-bar--height = 50px margin-top 10px overflow-y auto -body[data-theme="dark"] - .root - modalDark() +apply-theme(theme) + body[data-theme={theme}] + .root + background-color transparent + .top-bar + background-color transparent + border-color get-theme-var(theme, 'borderColor') + p + color get-theme-var(theme, 'text-color') + .nav + background-color transparent + border-color get-theme-var(theme, 'borderColor') + .nav-button + background-color transparent + color get-theme-var(theme, 'text-color') + &:hover + color get-theme-var(theme, 'text-color') - .top-bar - background-color transparent - border-color #4A4D52 - p - color $tab--dark-text-color + .nav-button--active + @extend .nav-button + color get-theme-var(theme, 'button--active-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') - .nav - background-color transparent - border-color $ui-dark-borderColor +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .nav-button - background-color transparent - color $tab--dark-text-color - &:hover - color $ui-dark-text-color - - .nav-button--active - @extend .nav-button - color white - background-color $dark-primary-button-background--active - &:hover - color white - - -body[data-theme="solarized-dark"] - .root - background-color transparent - .top-bar - background-color transparent - border-color $ui-solarized-dark-borderColor - p - color $ui-solarized-dark-text-color - .nav - background-color transparent - border-color $ui-solarized-dark-borderColor - .nav-button - background-color transparent - color $ui-solarized-dark-text-color - &:hover - color $ui-solarized-dark-text-color - - .nav-button--active - @extend .nav-button - color $ui-solarized-dark-button--active-color - background-color $ui-solarized-dark-button--active-backgroundColor - &:hover - color white - -body[data-theme="monokai"] - .root - background-color transparent - .top-bar - background-color transparent - border-color $ui-monokai-borderColor - p - color $ui-monokai-text-color - .nav - background-color transparent - border-color $ui-monokai-borderColor - .nav-button - background-color transparent - color $ui-monokai-text-color - &:hover - color $ui-monokai-text-color - - .nav-button--active - @extend .nav-button - color $ui-monokai-button--active-color - 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 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/SnippetTab.styl b/browser/main/modals/PreferencesModal/SnippetTab.styl index dd22b72e..5d899797 100644 --- a/browser/main/modals/PreferencesModal/SnippetTab.styl +++ b/browser/main/modals/PreferencesModal/SnippetTab.styl @@ -149,66 +149,25 @@ body[data-theme="default"], body[data-theme="white"] .snippet-item-selected background darken($ui-backgroundColor, 5) -body[data-theme="dark"] - .snippets - background $ui-dark-backgroundColor - .snippet-item - color white - &::after - background $ui-dark-borderColor - &:hover - background darken($ui-dark-backgroundColor, 5) - .snippet-item-selected - background darken($ui-dark-backgroundColor, 5) - .snippet-detail - color white - .group-control-button - colorDarkPrimaryButton() +apply-theme(theme) + body[data-theme={theme}] + .snippets + background get-theme-var(theme, 'backgroundColor') + .snippet-item + color get-theme-var(theme, 'text-color') + &::after + background get-theme-var(theme, 'borderColor') + &:hover + background darken(get-theme-var(theme, 'backgroundColor'), 5) + .snippet-item-selected + background darken(get-theme-var(theme, 'backgroundColor'), 5) + .snippet-detail + color get-theme-var(theme, 'text-color') + .group-control-button + colorThemedPrimaryButton(theme) -body[data-theme="solarized-dark"] - .snippets - background $ui-solarized-dark-backgroundColor - .snippet-item - color white - &::after - background $ui-solarized-dark-borderColor - &:hover - background darken($ui-solarized-dark-backgroundColor, 5) - .snippet-item-selected - background darken($ui-solarized-dark-backgroundColor, 5) - .snippet-detail - color white - .group-control-button - colorSolarizedDarkPrimaryButton() +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .snippets - background $ui-monokai-backgroundColor - .snippet-item - color White - &::after - background $ui-monokai-borderColor - &:hover - background darken($ui-monokai-backgroundColor, 5) - .snippet-item-selected - background darken($ui-monokai-backgroundColor, 5) - .snippet-detail - 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() \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/StoragesTab.styl b/browser/main/modals/PreferencesModal/StoragesTab.styl index 9a1a0ef8..bed3ff72 100644 --- a/browser/main/modals/PreferencesModal/StoragesTab.styl +++ b/browser/main/modals/PreferencesModal/StoragesTab.styl @@ -159,118 +159,47 @@ body[data-theme="dark"] colorDarkDefaultButton() border-color $ui-dark-borderColor +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') + .folderList-item + border-bottom get-theme-var(theme, 'borderColor') -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color + .folderList-empty + color get-theme-var(theme, 'text-color') - .folderList-item - border-bottom $ui-solarized-dark-borderColor + .list-empty + color get-theme-var(theme, 'text-color') + .list-control-addStorageButton + border-color get-theme-var(theme, 'button-backgroundColor') + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') - .folderList-empty - color $ui-solarized-dark-text-color + .addStorage-header + color get-theme-var(theme, 'text-color') + border-color get-theme-var(theme, 'borderColor') - .list-empty - color $ui-solarized-dark-text-color - .list-control-addStorageButton - border-color $ui-solarized-dark-button-backgroundColor - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + .addStorage-body-section-name-input + border-color $get-theme-var(theme, 'borderColor') - .addStorage-header - color $ui-solarized-dark-text-color - border-color $ui-solarized-dark-borderColor + .addStorage-body-section-type-description + color get-theme-var(theme, 'text-color') - .addStorage-body-section-name-input - border-color $$ui-solarized-dark-borderColor + .addStorage-body-section-path-button + colorPrimaryButton() + .addStorage-body-control + border-color get-theme-var(theme, 'borderColor') - .addStorage-body-section-type-description - color $ui-solarized-dark-text-color + .addStorage-body-control-createButton + colorDarkPrimaryButton() + .addStorage-body-control-cancelButton + colorDarkDefaultButton() + border-color get-theme-var(theme, 'borderColor') - .addStorage-body-section-path-button - colorPrimaryButton() - .addStorage-body-control - border-color $ui-solarized-dark-borderColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .addStorage-body-control-createButton - colorDarkPrimaryButton() - .addStorage-body-control-cancelButton - colorDarkDefaultButton() - border-color $ui-solarized-dark-borderColor - -body[data-theme="monokai"] - .root - color $ui-monokai-text-color - - .folderList-item - border-bottom $ui-monokai-borderColor - - .folderList-empty - color $ui-monokai-text-color - - .list-empty - color $ui-monokai-text-color - .list-control-addStorageButton - border-color $ui-monokai-button-backgroundColor - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - - .addStorage-header - color $ui-monokai-text-color - border-color $ui-monokai-borderColor - - .addStorage-body-section-name-input - border-color $$ui-monokai-borderColor - - .addStorage-body-section-type-description - color $ui-monokai-text-color - - .addStorage-body-section-path-button - colorPrimaryButton() - .addStorage-body-control - border-color $ui-monokai-borderColor - - .addStorage-body-control-createButton - colorDarkPrimaryButton() - .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 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index c6181a13..b52b1bdb 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -12,6 +12,7 @@ import _ from 'lodash' import i18n from 'browser/lib/i18n' import { getLanguages } from 'browser/lib/Languages' import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily' +import uiThemes from 'browser/lib/ui-themes' const OSX = global.process.platform === 'darwin' @@ -197,12 +198,20 @@ class UiTab extends React.Component { onChange={(e) => this.handleUIChange(e)} ref='uiTheme' > - - - - - - + + { + uiThemes.filter(theme => !theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => { + return () + }) + } + + + { + uiThemes.filter(theme => theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => { + return () + }) + } + diff --git a/browser/main/modals/RenameFolderModal.styl b/browser/main/modals/RenameFolderModal.styl index c9909d00..435aa6a0 100644 --- a/browser/main/modals/RenameFolderModal.styl +++ b/browser/main/modals/RenameFolderModal.styl @@ -43,23 +43,31 @@ border-radius 2px padding 0 25px margin 0 auto + font-size 14px colorPrimaryButton() -body[data-theme="dark"] - .root - modalDark() +apply-theme(theme) + body[data-theme={theme}] + .root + background-color transparent - .header - background-color $ui-dark-button--hover-backgroundColor - border-color $ui-dark-borderColor - color $ui-dark-text-color + .header + background-color get-theme-var(theme, 'button--hover-backgroundColor') + border-color get-theme-var(theme, 'borderColor') + color get-theme-var(theme, 'text-color') - .description - color $ui-inactive-text-color + .description + color $ui-inactive-text-color - .control-input - border-color $ui-dark-borderColor - color $ui-dark-text-color + .control-input + border-color get-theme-var(theme, 'borderColor') + color get-theme-var(theme, 'text-color') - .control-confirmButton - colorDarkPrimaryButton() + .control-confirmButton + colorThemedPrimaryButton(theme) + +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) diff --git a/browser/styles/Detail/TagSelect.styl b/browser/styles/Detail/TagSelect.styl index 8900422c..5fc23310 100644 --- a/browser/styles/Detail/TagSelect.styl +++ b/browser/styles/Detail/TagSelect.styl @@ -51,78 +51,34 @@ background-color alpha($ui-button--active-backgroundColor, 40%) color $ui-text-color -body[data-theme="dark"] - .TagSelect - .react-autosuggest__input - color $ui-dark-text-color - - ul - border-color $ui-dark-borderColor - background-color $ui-dark-noteList-backgroundColor - color $ui-dark-text-color - - &:before - background-color $ui-dark-noteList-backgroundColor - - li[aria-selected="true"] - background-color $ui-dark-button--active-backgroundColor - color $ui-dark-text-color - -body[data-theme="monokai"] - .TagSelect - .react-autosuggest__input - color $ui-monokai-text-color - - ul - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor - color $ui-monokai-text-color - - &:before - background-color $ui-dark-noteList-backgroundColor - - li[aria-selected="true"] - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - -body[data-theme="dracula"] - .TagSelect - .react-autosuggest__input - color $ui-dracula-text-color - - ul - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor - color $ui-dracula-text-color - - &:before - background-color $ui-dark-noteList-backgroundColor - - li[aria-selected="true"] - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - -body[data-theme="solarized-dark"] - .TagSelect - .react-autosuggest__input - color $ui-solarized-dark-text-color - - ul - border-color $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteList-backgroundColor - color $ui-solarized-dark-text-color - - &:before - background-color $ui-solarized-dark-noteList-backgroundColor - - li[aria-selected="true"] - background-color $ui-dark-button--active-backgroundColor - color $ui-solarized-dark-text-color - body[data-theme="white"] .TagSelect ul background-color $ui-white-noteList-backgroundColor li[aria-selected="true"] - background-color $ui-button--active-backgroundColor \ No newline at end of file + background-color $ui-button--active-backgroundColor + +apply-theme(theme) + body[data-theme={theme}] + .TagSelect + .react-autosuggest__input + color get-theme-var(theme, 'text-color') + + ul + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') + color get-theme-var(theme, 'text-color') + + &:before + background-color $ui-dark-noteList-backgroundColor + + li[aria-selected="true"] + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/styles/index.styl b/browser/styles/index.styl index b9f9c41e..6e3517fb 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -107,36 +107,18 @@ colorDarkPrimaryButton() &:active:hover background-color $dark-primary-button-background--active - -colorSolarizedDarkPrimaryButton() - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - border none - &:hover - background-color $dark-primary-button-background--hover - &:active - &:active:hover - background-color $dark-primary-button-background--active - -colorMonokaiPrimaryButton() - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - border none - &:hover - background-color $dark-primary-button-background--hover - &:active - &:active:hover - background-color $dark-primary-button-background--active - -colorDraculaPrimaryButton() - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - border none - &:hover - background-color $ui-dracula-button--active-backgroundColor - &:active - &:active:hover - background-color $ui-dracula-button--active-backgroundColor +colorThemedPrimaryButton(theme) + if theme == 'dark' + colorDarkPrimaryButton() + else + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') + border none + &:hover + background-color get-theme-var(theme, 'button--active-backgroundColor') + &:active + &:active:hover + background-color get-theme-var(theme, 'button--active-backgroundColor') // Danger button(Brand color) @@ -257,12 +239,14 @@ $ui-dark-borderColor = #444444 $ui-dark-backgroundColor = #2C3033 $ui-dark-noteList-backgroundColor = #2C3033 $ui-dark-noteDetail-backgroundColor = #2C3033 +$ui-dark-tagList-backgroundColor = #FFFFFF $ui-dark-tag-backgroundColor = #3A404C $dark-background-color = lighten($ui-dark-backgroundColor, 10%) $ui-dark-text-color = #DDDDDD $ui-dark-button--active-color = #f4f4f4 $ui-dark-button--active-backgroundColor = #3A404C +$ui-dark-button--hover-color = #c0392b $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%) $ui-dark-topbar-button-color = #939395 @@ -332,19 +316,11 @@ darkTooltip() pointer-events none transition 0.1s -modalDark() - position relative - z-index $modal-z-index - width 100% - background-color $ui-dark-backgroundColor - overflow hidden - border-radius $modal-border-radius - - /******* Solarized Dark theme ********/ $ui-solarized-dark-backgroundColor = #073642 $ui-solarized-dark-noteList-backgroundColor = #073642 $ui-solarized-dark-noteDetail-backgroundColor = #073642 +$ui-solarized-dark-tagList-backgroundColor = #FFFFFF $ui-solarized-dark-text-color = #93a1a1 $ui-solarized-dark-active-color = #2aa198 @@ -356,21 +332,23 @@ $ui-solarized-dark-tag-backgroundColor = #002b36 $ui-solarized-dark-button-backgroundColor = #002b36 $ui-solarized-dark-button--active-color = #93a1a1 $ui-solarized-dark-button--active-backgroundColor = #073642 +$ui-solarized-dark-button--hover-color = #c0392b $ui-solarized-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-solarized-dark-button--focus-borderColor = lighten(#369DCD, 25%) -modalSolarizedDark() - position relative - z-index $modal-z-index - width 100% - background-color $ui-solarized-dark-backgroundColor - overflow hidden - border-radius $modal-border-radius +$ui-solarized-dark-kbd-backgroundColor = darken(#21252B, 10%) +$ui-solarized-dark-kbd-color = $ui-solarized-dark-text-color + +$ui-solarized-dark-table-odd-backgroundColor = $ui-solarized-dark-noteDetail-backgroundColor +$ui-solarized-dark-table-even-backgroundColor = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%) +$ui-solarized-dark-table-head-backgroundColor = $ui-solarized-dark-table-even-backgroundColor +$ui-solarized-dark-table-borderColor = lighten(darken(#21252B, 10%), 20%) /******* Monokai theme ********/ $ui-monokai-backgroundColor = #272822 $ui-monokai-noteList-backgroundColor = #272822 $ui-monokai-noteDetail-backgroundColor = #272822 +$ui-monokai-tagList-backgroundColor = #FFFFFF $ui-monokai-text-color = #f8f8f2 $ui-monokai-active-color = #f92672 @@ -382,21 +360,23 @@ $ui-monokai-tag-backgroundColor = #373831 $ui-monokai-button-backgroundColor = #373831 $ui-monokai-button--active-color = white $ui-monokai-button--active-backgroundColor = #f92672 +$ui-monokai-button--hover-color = #f92672 $ui-monokai-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-monokai-button--focus-borderColor = lighten(#369DCD, 25%) -modalMonokai() - position relative - z-index $modal-z-index - width 100% - background-color $ui-monokai-backgroundColor - overflow hidden - border-radius $modal-border-radius +$ui-monokai-kbd-backgroundColor = darken(#21252B, 10%) +$ui-monokai-kbd-color = $ui-monokai-text-color + +$ui-monokai-table-odd-backgroundColor = $ui-monokai-noteDetail-backgroundColor +$ui-monokai-table-even-backgroundColor = darken($ui-monokai-noteDetail-backgroundColor, 10%) +$ui-monokai-table-head-backgroundColor = $ui-monokai-table-even-backgroundColor +$ui-monokai-table-borderColor = lighten(darken(#21252B, 10%), 20%) /******* Dracula theme ********/ $ui-dracula-backgroundColor = #282a36 $ui-dracula-noteList-backgroundColor = #282a36 $ui-dracula-noteDetail-backgroundColor = #282a36 +$ui-dracula-tagList-backgroundColor = #f8f8f2 $ui-dracula-text-color = #f8f8f2 $ui-dracula-active-color = #bd93f9 @@ -408,13 +388,52 @@ $ui-dracula-tag-backgroundColor = #8be9fd $ui-dracula-button-backgroundColor = #44475a $ui-dracula-button--active-color = #f8f8f2 $ui-dracula-button--active-backgroundColor = #bd93f9 +$ui-dracula-button--hover-color = #ff79c6 $ui-dracula-button--hover-backgroundColor = lighten($ui-dracula-backgroundColor, 10%) $ui-dracula-button--focus-borderColor = lighten(#44475a, 25%) -modalDracula() - position relative - z-index $modal-z-index - width 100% - background-color $ui-dracula-backgroundColor - overflow hidden - border-radius $modal-border-radius \ No newline at end of file +$ui-dracula-kbd-backgroundColor = darken(#21252B, 10%) +$ui-dracula-kbd-color = $ui-monokai-text-color + +$ui-dracula-table-odd-backgroundColor = $ui-dracula-noteDetail-backgroundColor +$ui-dracula-table-even-backgroundColor = darken($ui-dracula-noteDetail-backgroundColor, 10%) +$ui-dracula-table-head-backgroundColor = $ui-dracula-table-even-backgroundColor +$ui-dracula-table-borderColor = lighten(darken(#21252B, 10%), 20%) + +/******* Nord theme ********/ +$ui-nord-backgroundColor = #2e3440 +$ui-nord-noteList-backgroundColor = #2e3440 +$ui-nord-noteDetail-backgroundColor = #2e3440 +$ui-nord-tagList-backgroundColor = #FFFFFF + +$ui-nord-text-color = #d8dee9 +$ui-nord-inactive-text-color = #8fbcbb +$ui-nord-active-color = #5e81ac + +$ui-nord-borderColor = #3b4252 + +$ui-nord-tag-backgroundColor = #3b4252 + +$ui-nord-button-backgroundColor = #434c5e +$ui-nord-button--active-color = #d8dee9 +$ui-nord-button--active-backgroundColor = #5e81ac +$ui-nord-button--hover-color = #c0392b +$ui-nord-button--hover-backgroundColor = #434c5e + +$ui-nord-kbd-backgroundColor = $ui-nord-text-color +$ui-nord-kbd-color = $ui-nord-backgroundColor + +$ui-nord-table-odd-backgroundColor = $ui-nord-noteDetail-backgroundColor +$ui-nord-table-even-backgroundColor = darken($ui-nord-noteDetail-backgroundColor, 10%) +$ui-nord-table-head-backgroundColor = $ui-nord-table-even-backgroundColor +$ui-nord-table-borderColor = lighten(darken(#21252B, 10%), 20%) + + + +debug-theme-var(theme, suffix) + '$ui-' + theme + '-' + suffix + +get-theme-var(theme, suffix) + lookup('$ui-' + theme + '-' + suffix) + +$themes = 'monokai' 'nord' \ No newline at end of file From 93e09f11dd567739a4a9e39e95c0cb3b5d1c927a Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Thu, 30 Jan 2020 19:31:31 +0100 Subject: [PATCH 02/13] fix UI theme for SplitEditor and CreateFromURL modal --- browser/components/MarkdownSplitEditor.styl | 26 ++-- .../modals/CreateMarkdownFromURLModal.styl | 121 ++++-------------- 2 files changed, 34 insertions(+), 113 deletions(-) diff --git a/browser/components/MarkdownSplitEditor.styl b/browser/components/MarkdownSplitEditor.styl index d716c85f..49bd927a 100644 --- a/browser/components/MarkdownSplitEditor.styl +++ b/browser/components/MarkdownSplitEditor.styl @@ -16,22 +16,14 @@ z-index 10 cursor col-resize -body[data-theme="dark"] - .root - .slider - border-left 1px solid $ui-dark-borderColor +apply-theme(theme) + body[data-theme={theme}] + .root + .slider + border-left 1px solid get-theme-var(theme, 'borderColor') -body[data-theme="solarized-dark"] - .root - .slider - border-left 1px solid $ui-solarized-dark-borderColor +for theme in 'dark' 'dracula' 'solarized-dark' + apply-theme(theme) -body[data-theme="monokai"] - .root - .slider - border-left 1px solid $ui-monokai-borderColor - -body[data-theme="dracula"] - .root - .slider - border-left 1px solid $ui-dracula-borderColor +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/CreateMarkdownFromURLModal.styl b/browser/main/modals/CreateMarkdownFromURLModal.styl index 5e59e465..8aca1505 100644 --- a/browser/main/modals/CreateMarkdownFromURLModal.styl +++ b/browser/main/modals/CreateMarkdownFromURLModal.styl @@ -51,110 +51,39 @@ font-size 14px colorPrimaryButton() -body[data-theme="dark"] - .root - modalDark() - width 500px - height 270px - overflow hidden - position relative - - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-dark-text-color - - .control-folder-label - color $ui-dark-text-color - - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white - - .description - color $ui-inactive-text-color - - .control-confirmButton - colorDarkPrimaryButton() - -body[data-theme="solarized-dark"] - .root - modalSolarizedDark() - width 500px - height 270px - overflow hidden - position relative - - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-solarized-dark-text-color - - .control-folder-label - color $ui-solarized-dark-text-color - - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white - - .description - color $ui-inactive-text-color - - .control-confirmButton - colorSolarizedDarkPrimaryButton() - .error text-align center color #F44336 -body[data-theme="monokai"] - .root - modalMonokai() - width 500px - height 270px - overflow hidden - position relative +apply-theme(theme) + body[data-theme={theme}] + .root + background-color transparent + width 500px + height 270px + overflow hidden + position relative - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-monokai-text-color + .header + background-color transparent + border-color get-theme-var(theme, 'borderColor') + color get-theme-var(theme, 'text-color') - .control-folder-label - color $ui-monokai-text-color + .control-folder-label + color get-theme-var(theme, 'text-color') - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white + .control-folder-input + border 1px solid $ui-input--create-folder-modal + color white - .description - color $ui-inactive-text-color + .description + color $ui-inactive-text-color - .control-confirmButton - colorMonokaiPrimaryButton() + .control-confirmButton + colorThemedPrimaryButton(theme) -body[data-theme="dracula"] - .root - modalDracula() - width 500px - height 270px - overflow hidden - position relative +for theme in 'dark' 'dracula' 'solarized-dark' + apply-theme(theme) - .header - background-color transparent - border-color $ui-dracula-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() +for theme in $themes + apply-theme(theme) \ No newline at end of file From 24a5c839a7e2c6fa9bb28efe1a8a0a9c76dae35b Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Fri, 31 Jan 2020 12:10:19 +0100 Subject: [PATCH 03/13] fix text color of FolderSelect component --- browser/main/Detail/FolderSelect.styl | 2 ++ 1 file changed, 2 insertions(+) diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl index 76ce1eb8..ac903c6c 100644 --- a/browser/main/Detail/FolderSelect.styl +++ b/browser/main/Detail/FolderSelect.styl @@ -147,6 +147,7 @@ apply-theme(theme) border-color get-theme-var(theme, 'borderColor') .search-optionList + color get-theme-var(theme, 'text-color') border-color get-theme-var(theme, 'borderColor') background-color get-theme-var(theme, 'button-backgroundColor') @@ -160,6 +161,7 @@ apply-theme(theme) &:hover background-color get-theme-var(theme, 'button--active-backgroundColor') color get-theme-var(theme, 'button--active-color') + .search-optionList-item-name-surfix color get-theme-var(theme, 'inactive-text-color') From 69831571a5b5ce1fb5b4dbbaf9284d6f8d8f1992 Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Fri, 31 Jan 2020 23:46:27 +0100 Subject: [PATCH 04/13] fix broken title's color in ConfigTab by moving its default color to corresponding themes --- browser/main/modals/PreferencesModal/ConfigTab.styl | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl index 4e671982..dbfb393e 100644 --- a/browser/main/modals/PreferencesModal/ConfigTab.styl +++ b/browser/main/modals/PreferencesModal/ConfigTab.styl @@ -2,7 +2,6 @@ .root padding 15px - color $ui-text-color margin-bottom 30px .group @@ -14,7 +13,6 @@ .group-header2 font-size 20px - color $ui-text-color margin-bottom 15px margin-top 30px @@ -141,6 +139,14 @@ colorThemedControl(theme) background-color get-theme-var(theme, 'button-backgroundColor') color get-theme-var(theme, 'text-color') +body[data-theme="default"], +body[data-theme="white"] + .root + color $ui-text-color + + .group-header2 + color $ui-text-color + body[data-theme="dark"] .root color $ui-dark-text-color From 636996356fc31fd4e60bf5da305297c1358ee13b Mon Sep 17 00:00:00 2001 From: Bumhan Yu Date: Wed, 29 Jan 2020 23:42:29 -0500 Subject: [PATCH 05/13] update Korean section of contributing.md --- contributing.md | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/contributing.md b/contributing.md index a7c91e91..43d68d85 100644 --- a/contributing.md +++ b/contributing.md @@ -50,14 +50,26 @@ GPL v3 is too strict to be compatible with another license, so we thought it mig # Contributing to Boostnote (Korean) -### 버그 리포트를 보고할 때 -이슈의 양식은 없습니다. 하지만 부탁이 있습니다. - -**개발자 도구를 연 상태의 Boostnote 스크린샷을 첨부해주세요** +### 이슈 또는 버그 리포트를 제출하는 절차 +이슈를 제기할 때에 사용하는 양식(issue template)이 준비되어 있으니, 해당 양식에 맞추어 최대한 구체적인 정보를 첨부하여 주시기 바랍니다. 도움을 주셔서 감사합니다. -### Pull Request의 저작권에 관하여 +### Pull Request를 제출하는 절차 +Pull Request에 사용하는 양식(pull request template)이 준비되어 있으니, 코드를 접수하기 전에 미리 해당 양식을 작성해 주시기 바랍니다. 코드가 해결하고자 하는 문제가 무엇인지 정확히 알면 저희가 훨씬 신속하게 해당 pull request를 검토할 수 있습니다. + +다음 사항을 준수하여 주십시오: +- [`code_style.md`](docs/code_style.md) 에 정리된 코드 스타일 정보를 확인할 것 +- 테스트 코드를 작성하고, 아래와 같은 테스트 커맨드를 실행할 것 +``` +npm run test +``` +- 아래와 같은 린팅 커맨드로 코드를 확인할 것 +``` +npm run lint +``` + +### 저작권에 관한 기준 당신이 pull request를 요청하면, 코드 변경에 대한 저작권을 BoostIO에 양도한다는 것에 동의한다는 의미입니다. From a90d801d083ca5f1c89bb91cf5b09db20cc964d2 Mon Sep 17 00:00:00 2001 From: Bumhan Yu Date: Mon, 3 Feb 2020 06:03:21 -0500 Subject: [PATCH 06/13] update korean docs in docs/ko/ (#3454) * update korean docs in docs/ko/ * Fix typo Co-authored-by: Junyoung Choi --- docs/ko/build.md | 58 ++++++++++++++++++++++++++++++++++++++++++++++-- docs/ko/debug.md | 20 +++++++++++++++-- 2 files changed, 74 insertions(+), 4 deletions(-) diff --git a/docs/ko/build.md b/docs/ko/build.md index 17e9c712..d9a5f4a9 100644 --- a/docs/ko/build.md +++ b/docs/ko/build.md @@ -5,8 +5,6 @@ * npm: 6.x * node: 8.x -`$ grunt pre-build`를 `npm v5.x`에서 실행할 수 없기 때문에, 반드시 `npm v4.x`를 사용하셔야 합니다. - ## 개발 개발에 있어서 Webpack HRM을 사용합니다. @@ -29,6 +27,34 @@ $ yarn run dev > 1. 콤포넌트의 컨스트럭터 함수를 수정할 경우 > 2. 새로운 CSS코드를 추가할 경우(1.과 같은 이유: CSS클래스는 콤포넌트마다 다시 만들어 지는데, 이 작업은 컨스트럭터에서 일어납니다.) +## Pull Request에 사용된 코드를 적용하는 방법 +관련된 Pull request 페이지를 방문하여, url 스트링 마지막에 표기된 PR 번호를 확인합니다. +
+https://github.com/BoostIO/Boostnote/pull/2794
+
+아래의 커맨드를 실행하면서, \ 대신에 위에서 확인한 번호를 입력합니다 (부등호 신호는 빼고 입력하세요). +위에 보여진 예시의 경우, \ 자리에 2794를 입력하면 됩니다. + +_본인의 로컬 컴퓨터에 마스터 브랜치가 복사되어 있지 않은 경우_ +``` +git clone https://github.com/BoostIO/Boostnote.git +cd Boostnote +git fetch origin pull//head: +git checkout +``` + +_이미 마스터 브랜치를 로컬 컴퓨터에 저장해둔 경우_ +``` +git fetch origin pull//head: +git checkout +``` + +_To compile and run the code_ +``` +yarn +yarn run dev +``` + ## 배포 Boostnote에서는 배포 자동화를 위하여 그런트를 사용합니다. @@ -43,3 +69,31 @@ grunt pre-build 실행 파일은 `dist`에서 찾을 수 있습니다. 이 경우, 인증이 되어있지 않기 때문에 업데이터는 사용할 수 없습니다. 필요로 하다면, 이 실행파일에 Codesign나 Authenticode등의 서명을 할 수 있습니다. + +## 독자적인 배포판을 제작하는 방법 (deb, rpm) + +배포판 패키지를 제작하려면 (우분투, 페도라 등) 리눅스 플랫폼에서 `grunt build` 커맨드를 실행하면 됩니다. + +> 참조: 동일한 환경에서 `.deb` 파일과 `.rpm` 파일을 모두 만들 수 있습니다. + +지원되는 버전의 `node`와 `npm`을 설치한 다음, 빌드에 필요한 패키지를 설치합니다. + +우분투/데비안 환경 (Ubuntu/Debian): + +``` +$ sudo apt-get install -y rpm fakeroot +``` + +페도라 환경 (Fedora): + +``` +$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot +``` + +그 다음 `grunt build` 커맨드를 실행합니다. + +``` +$ grunt build +``` + +`dist` 디렉토리에 `.deb` 파일과 `.rpm` 파일이 새롭게 생성됩니다. diff --git a/docs/ko/debug.md b/docs/ko/debug.md index 290eee9c..6d68d951 100644 --- a/docs/ko/debug.md +++ b/docs/ko/debug.md @@ -1,5 +1,7 @@ # Boostnote의 디버그 방법(Electron app) +## 구글 크롬 Developer Tools를 사용한 디버깅 + Boostnote는 Electron 애플리케이션이므로 Chromium위에서 작동합니다. 그렇기 때문에 개발자분들은 Google Chrome 브라우저에서 처럼 `Developer Tools`를 사용하실 수 있습니다. 다음과 같이 `Developer Tools`를 실행할 수 있습니다: @@ -10,12 +12,26 @@ Boostnote는 Electron 애플리케이션이므로 Chromium위에서 작동합니 에러가 발생할 때에는, 에러메시지가 `console`위에 표시 됩니다. -## 디버깅 +### 디버깅 예를들면 `debugger`를 사용하여 코드 안에서 다음과 같이 일시 정지지점을 설정할 수 있습니다: ![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png) 이는 단순한 하나의 예시에 불과합니다. 자기자신에게 가장 잘 맞는 디버그 방법을 찾는 것도 좋을 것 입니다. -## 참고 + ### 참고 * [디버그에 관한 Google Chrome의 공식 문서](https://developer.chrome.com/devtools) + +## 비주얼 스튜디오 코드를 사용한 디버깅 + +1. **[크롬 디버깅 플러그인](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome 'Install Debugger for Chrome')** 을 비주얼 스튜디오 코드에 설치한 후, 프로그램을 닫았다가 재실행합니다. +2. **Shift+Command+B** 키를 누르거나, **Terminal** 메뉴 하단에 있는 **Run Build Task** 메뉴를 선택한 후 **Build Boostnote** 를 선택합니다. 아니면 터미널에서 곧바로 `yarn run watch`를 실행해도 됩니다. +3. 위의 절차가 실행되고 있을 때, 사이드바 **Activity Bar**에서 **Debug view**를 선택합니다. 키보드 단축키로는 **Shift+Command+D**를 눌러도 됩니다.. +4. **Debug configuration**에서 **Boostnote All** 설정을 선택한 후, 초록색 화살표를 클릭하거나 **F5** 키를 누르면 디버깅이 시작됩니다. +5. 이 시점에서는 **Boostnote**가 실행되고 있을 텐데, 두 개의 프로세스가 진행중인 것을 볼 수 있을 겁니다. 바로 **Boostnote Main** 프로세스와 **Boostnote Renderer** 프로세스입니다. 이제 비주얼 스튜디오 코드에서 곧바로 **디버깅 정지지점 (debug breakpoint)** 을 설정할 수 있습니다. 만약에 지정한 **정지지점 (breakpoint)** 이 등록되지 않는다면, **Boostnote Renderer** 와 **Boostnote Main** 프로세스 사이를 번갈아 확인해 보아야 합니다. + + +### 참고 + +- [일렉트론 애플리케이션 디버깅 공식 튜토리얼](https://electronjs.org/docs/tutorial/application-debugging) +- [비쥬얼 스튜디오 코드용 크롬 디버깅 플러그인](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) From e558fae4b01336de2d01bf023822474569085839 Mon Sep 17 00:00:00 2001 From: Ray Ou Date: Mon, 6 Jan 2020 20:33:52 +1100 Subject: [PATCH 07/13] Update build.md with correct description --- docs/build.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/build.md b/docs/build.md index 1e269b4c..2a8c22af 100644 --- a/docs/build.md +++ b/docs/build.md @@ -37,7 +37,7 @@ Visit the page for the pull request and look at the end of the url for the PR nu https://github.com/BoostIO/Boostnote/pull/2794 In the following, replace \ with that number (no brackets). -For the above url, you would replace \ with 2794 +For URLs below, you would replace \ with 2794 _If you do not have a local copy of the master branch yet_ ``` From 262d173c658491e1b81b507a5c9f5554492824f7 Mon Sep 17 00:00:00 2001 From: xatier Date: Sat, 4 Jan 2020 23:01:06 -0800 Subject: [PATCH 08/13] Update zh_TW translation of build.md Complete translation. Sync with English version. [1] https://github.com/BoostIO/Boostnote/blob/master/docs/build.md. --- docs/zh_TW/build.md | 64 ++++++++++++++++++++++++++++++++------------- 1 file changed, 46 insertions(+), 18 deletions(-) diff --git a/docs/zh_TW/build.md b/docs/zh_TW/build.md index 151f946d..00e3d5f7 100644 --- a/docs/zh_TW/build.md +++ b/docs/zh_TW/build.md @@ -10,7 +10,6 @@ ## 開發 我們使用 Webpack HMR 來開發 Boostnote。 - 在專案根目錄底下執行下列指令，將會以原始設置啟動 Boostnote。 **用 yarn 來安裝必要 packages** @@ -19,41 +18,70 @@ $ yarn ``` -**開始開發** +**編譯及執行** ``` $ yarn run dev ``` -> ### Notice +> ### 注意 > -> There are some cases where you have to refresh the app manually. +> 以下是一些可能要手動重新啟動程式的情況。 > -> 1. When editing a constructor method of a component -> 2. When adding a new css class (similar to 1: the CSS class is re-written by each component. This process occurs at the Constructor method.) +> 1. 修改一個 component 的 constructor 方法時。 +> 2. 新增新的 CSS 類別時 (和 1 很類似：CSS 類別會被每個 component 重寫過。這個過程在 constructor 方法中發生)。 -## Deploy +## 使用 Pull Requests 中的程式碼 +瀏覽 pull request 的頁面，從 URL 的後面找到 PR 號碼。 -We use Grunt to automate deployment. -You can build the program by using `grunt`. However, we don't recommend this because the default task includes codesign and authenticode. +
+https://github.com/BoostIO/Boostnote/pull/2794
+
+接著，於底下步驟中把 \ 換成這個號碼 (沒有括號)。 +請將上面的 URL 中的 \ 換置成 2794。 -So, we've prepared a separate script which just makes an executable file. +_如果您還未取得一份 master branch 的本地備份_ +``` +git clone https://github.com/BoostIO/Boostnote.git +cd Boostnote +git fetch origin pull//head: +git checkout +``` + +_如果您已經擁有了 master branch_ +``` +git fetch origin pull//head: +git checkout +``` + +_編譯及執行程式碼_ +``` +yarn +yarn run dev +``` + +## 佈署 + +我們用 Grunt 做自動佈署。 +您能使用 `grung` 建構本程式。然而，我們並不建議這麼做，因為預設工作流程包含了程式簽名以及 Authenticode 驗證。 + +所以，我們準備了一份額外的腳本用於建構可執行檔。 ``` grunt pre-build ``` -You will find the executable in the `dist` directory. Note, the auto updater won't work because the app isn't signed. +您可以在 `dist` 資料夾下找到可執行檔。注意，自動更新功能 (auto updater) 並不會生效，因為程式沒有被簽署過。 -If you find it necessary, you can use codesign or authenticode with this executable. +必要時您可以使用程式簽名或 authenticode 驗證執行檔。 -## Make own distribution packages (deb, rpm) +## 建立您自己的發行版套件 (deb, rpm) -Distribution packages are created by exec `grunt build` on Linux platform (e.g. Ubuntu, Fedora). +發行版套件可以透過在 Linux 平台上 (如 Ubuntu, Fedora) 執行 `grunt build` 來建立。 -> Note: You can create both `.deb` and `.rpm` in a single environment. +> 注意：您可以在同個環境中同時建立 `.deb` 及`.rpm` 。 -After installing the supported version of `node` and `npm`, install build dependency packages. +安裝支援版本的 `node` 和 `npm` 後，安裝編譯相依套件。 Ubuntu/Debian: @@ -67,10 +95,10 @@ Fedora: $ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot ``` -Then execute `grunt build`. +接著執行 `grunt build`。 ``` $ grunt build ``` -You will find `.deb` and `.rpm` in the `dist` directory. +於 `dist` 資料夾下找到 `.deb` 及 `.rpm`。 From 57a5de97f8aef19fc5d36738b54e8b982b840066 Mon Sep 17 00:00:00 2001 From: xatier Date: Mon, 6 Jan 2020 09:10:10 -0800 Subject: [PATCH 09/13] Update build.md text change per @rayou's suggestion. --- docs/zh_TW/build.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh_TW/build.md b/docs/zh_TW/build.md index 00e3d5f7..4f9c7a96 100644 --- a/docs/zh_TW/build.md +++ b/docs/zh_TW/build.md @@ -38,7 +38,7 @@ $ yarn run dev https://github.com/BoostIO/Boostnote/pull/2794 接著，於底下步驟中把 \ 換成這個號碼 (沒有括號)。 -請將上面的 URL 中的 \ 換置成 2794。 +請將下方 URL 中的 \ 換置成 2794。 _如果您還未取得一份 master branch 的本地備份_ ``` From 000a54f5ed54dee310bd88ecb2eed85459d61dfd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 28 Dec 2019 06:22:50 +0000 Subject: [PATCH 10/13] Bump handlebars from 4.0.11 to 4.5.3 Bumps [handlebars](https://github.com/wycats/handlebars.js) from 4.0.11 to 4.5.3. - [Release notes](https://github.com/wycats/handlebars.js/releases) - [Changelog](https://github.com/wycats/handlebars.js/blob/master/release-notes.md) - [Commits](https://github.com/wycats/handlebars.js/compare/v4.0.11...v4.5.3) Signed-off-by: dependabot[bot] --- yarn.lock | 46 +++++++++++++++++++++++++++------------------- 1 file changed, 27 insertions(+), 19 deletions(-) diff --git a/yarn.lock b/yarn.lock index 77621a24..b18d51a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -486,7 +486,7 @@ async@^0.9.0, async@~0.9.0: version "0.9.2" resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d" -async@^1.3.0, async@^1.4.0, async@^1.4.2, async@^1.5.1, async@^1.5.2: +async@^1.3.0, async@^1.4.2, async@^1.5.1, async@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" @@ -4420,14 +4420,15 @@ gud@^1.0.0: integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw== handlebars@^4.0.3: - version "4.0.11" - resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc" + version "4.5.3" + resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482" + integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA== dependencies: - async "^1.4.0" + neo-async "^2.6.0" optimist "^0.6.1" - source-map "^0.4.4" + source-map "^0.6.1" optionalDependencies: - uglify-js "^2.6" + uglify-js "^3.1.4" har-schema@^2.0.0: version "2.0.0" @@ -6553,6 +6554,7 @@ minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0: minimist@~0.0.1: version "0.0.10" resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf" + integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8= minipass@^2.2.1, minipass@^2.3.3: version "2.3.3" @@ -6696,6 +6698,11 @@ negotiator@0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9" +neo-async@^2.6.0: + version "2.6.1" + resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c" + integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw== + next-tick@1: version "1.0.0" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" @@ -7021,6 +7028,7 @@ open@0.0.5: optimist@^0.6.1, optimist@~0.6.0, optimist@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686" + integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY= dependencies: minimist "~0.0.1" wordwrap "~0.0.2" @@ -8976,12 +8984,6 @@ source-map@0.5.6: version "0.5.6" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" -source-map@^0.4.4, source-map@~0.4.1: - version "0.4.4" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" - dependencies: - amdefine ">=0.0.4" - source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" @@ -8990,6 +8992,12 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" +source-map@~0.4.1: + version "0.4.4" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" + dependencies: + amdefine ">=0.0.4" + sourcemapped-stacktrace@^1.1.6: version "1.1.8" resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.8.tgz#6b7a3f1a6fb15f6d40e701e23ce404553480d688" @@ -9680,14 +9688,13 @@ uc.micro@^1.0.5: resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac" integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== -uglify-js@^2.6: - version "2.8.29" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd" +uglify-js@^3.1.4: + version "3.7.3" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a" + integrity sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg== dependencies: - source-map "~0.5.1" - yargs "~3.10.0" - optionalDependencies: - uglify-to-browserify "~1.0.0" + commander "~2.20.3" + source-map "~0.6.1" uglify-js@^3.5.1: version "3.6.9" @@ -10144,6 +10151,7 @@ wordwrap@0.0.2: wordwrap@~0.0.2: version "0.0.3" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107" + integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc= wordwrap@~1.0.0: version "1.0.0" From f72fdfe33f92888cd508c18367461bcbdf1e1329 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 29 Oct 2019 04:30:13 +0000 Subject: [PATCH 11/13] Bump mixin-deep from 1.3.1 to 1.3.2 Bumps [mixin-deep](https://github.com/jonschlinkert/mixin-deep) from 1.3.1 to 1.3.2. - [Release notes](https://github.com/jonschlinkert/mixin-deep/releases) - [Commits](https://github.com/jonschlinkert/mixin-deep/compare/1.3.1...1.3.2) Signed-off-by: dependabot[bot] --- yarn.lock | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index b18d51a4..0aa21a45 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3952,6 +3952,7 @@ font-awesome@^4.3.0: for-in@^1.0.1, for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" + integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA= for-own@^0.1.4: version "0.1.5" @@ -4998,6 +4999,7 @@ is-extendable@^0.1.0, is-extendable@^0.1.1: is-extendable@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4" + integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA== dependencies: is-plain-object "^2.0.4" @@ -5127,6 +5129,7 @@ is-plain-obj@^1.0.0: is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677" + integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og== dependencies: isobject "^3.0.1" @@ -5230,6 +5233,7 @@ isobject@^2.0.0: isobject@^3.0.0, isobject@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" + integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8= isomorphic-fetch@^2.1.1: version "2.2.1" @@ -6570,8 +6574,9 @@ minizlib@^1.1.0: minipass "^2.2.1" mixin-deep@^1.1.3, mixin-deep@^1.2.0: - version "1.3.1" - resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe" + version "1.3.2" + resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566" + integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA== dependencies: for-in "^1.0.2" is-extendable "^1.0.1" From f367e9f08cd1e9767ce098cb23d1afa42ca9b8d6 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 29 Oct 2019 04:30:24 +0000 Subject: [PATCH 12/13] Bump extend from 3.0.1 to 3.0.2 Bumps [extend](https://github.com/justmoon/node-extend) from 3.0.1 to 3.0.2. - [Release notes](https://github.com/justmoon/node-extend/releases) - [Changelog](https://github.com/justmoon/node-extend/blob/master/CHANGELOG.md) - [Commits](https://github.com/justmoon/node-extend/compare/v3.0.1...v3.0.2) Signed-off-by: dependabot[bot] --- yarn.lock | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index 0aa21a45..2d153615 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3669,8 +3669,9 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2: is-extendable "^1.0.1" extend@~3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444" + version "3.0.2" + resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" + integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== extglob@^0.3.1: version "0.3.2" From 051ce9e2086f8cfc3c10a3d0fd5a5664bdd35fb5 Mon Sep 17 00:00:00 2001 From: hiiwave Date: Mon, 3 Feb 2020 19:33:38 +0800 Subject: [PATCH 13/13] Fix #3397 (#3398) * WIP: Fix #3397 * fixup! WIP: Fix #3397 * fix: catch potential URIError threw from decodeURI --- browser/components/MarkdownPreview.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index ff88540f..fc5aa95c 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -1135,7 +1135,17 @@ export default class MarkdownPreview extends React.Component { } // other case - shell.openExternal(href) + this.openExternal(href) + } + + openExternal (href) { + try { + const success = shell.openExternal(href) || shell.openExternal(decodeURI(href)) + if (!success) console.error('failed to open url ' + href) + } catch (e) { + // URI Error threw from decodeURI + console.error(e) + } } render () {