From 1cdac943bad5edae2dfa7f3b7e365b5a12707ec5 Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Fri, 8 Feb 2019 00:50:47 +0100 Subject: [PATCH 1/4] adding Nord theme and streamlining UI theming --- browser/components/MarkdownPreview.js | 11 +- browser/components/NoteItem.styl | 198 ++++++------------ browser/components/NoteItemSimple.styl | 175 ++++++---------- browser/components/RealtimeNotification.styl | 50 ++--- browser/components/SideNavFilter.styl | 174 +++++---------- browser/components/SnippetTab.styl | 126 +++-------- browser/components/StorageItem.styl | 81 +++---- browser/components/TagListItem.styl | 45 ++-- browser/components/TodoListPercentage.styl | 32 ++- browser/components/markdown.styl | 180 +++++----------- browser/components/render/MermaidRender.js | 7 +- browser/lib/ui-themes.js | 39 ++++ browser/main/Detail/Detail.styl | 29 +-- browser/main/Detail/FolderSelect.styl | 85 +++----- browser/main/Detail/FullscreenButton.styl | 50 ++--- browser/main/Detail/InfoPanel.styl | 189 ++++------------- 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 | 126 +++-------- browser/main/SideNav/PreferenceButton.styl | 102 +++++---- browser/main/SideNav/SideNav.styl | 21 +- browser/main/SideNav/StorageItem.styl | 94 +++++---- browser/main/SideNav/SwitchButton.styl | 118 +++++------ browser/main/StatusBar/StatusBar.styl | 36 ++-- browser/main/TopBar/TopBar.styl | 94 +++------ browser/main/global.styl | 55 ++--- browser/main/lib/ConfigManager.js | 13 +- browser/main/modals/CreateFolderModal.styl | 140 ++++--------- browser/main/modals/NewNoteModal.styl | 80 ++----- .../modals/PreferencesModal/ConfigTab.styl | 130 ++++-------- .../modals/PreferencesModal/Crowdfunding.styl | 25 +-- .../modals/PreferencesModal/FolderItem.styl | 83 ++------ .../main/modals/PreferencesModal/InfoTab.styl | 34 ++- .../PreferencesModal/PreferencesModal.styl | 127 +++-------- .../modals/PreferencesModal/SnippetTab.styl | 85 ++------ .../modals/PreferencesModal/StoragesTab.styl | 159 ++++---------- browser/main/modals/PreferencesModal/UiTab.js | 21 +- browser/main/modals/RenameFolderModal.styl | 36 ++-- browser/styles/Detail/TagSelect.styl | 86 ++------ browser/styles/index.styl | 139 ++++++------ 45 files changed, 1257 insertions(+), 2371 deletions(-) create mode 100644 browser/lib/ui-themes.js diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index a6819ce92..2cde0fb78 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 a31f00a49..75078db44 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 - - .item-wrapper - border-color alpha($ui-monokai-button-backgroundColor, 60%) + 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--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%) - - .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 + border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%) -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 - .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%) + color $ui-inactive-text-color - .item-title - color $ui-inactive-text-color + .item-title-empty + color $ui-inactive-text-color - .item-title-icon - color $ui-inactive-text-color + .item-bottom-tagList-item + background-color alpha($ui-dark-button--active-backgroundColor, 40%) + color $ui-inactive-text-color - .item-title-empty - color $ui-inactive-text-color + .item-bottom-tagList-empty + color $ui-inactive-text-color + vertical-align middle - .item-bottom-tagList-item - background-color alpha($ui-dark-button--active-backgroundColor, 40%) - color $ui-inactive-text-color +for theme in 'dracula' + apply-theme(theme) - .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 70b74be7c..a36de5ed6 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-title - .item-simple-title-empty - .item-simple-title-icon - .item-simple-bottom-time + .item-simple + 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-simple-bottom-tagList-item + 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 alpha(#fff, 20%) - color $ui-monokai-text-color - &:active - transition 0.15s - background-color $ui-monokai-button--active-backgroundColor - color $ui-monokai-text-color + 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(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 - -body[data-theme="dracula"] - .root - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor + 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 - .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 +for theme in 'dracula' + apply-theme(theme) - .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 36330c484..795807b9e 100644 --- a/browser/components/RealtimeNotification.styl +++ b/browser/components/RealtimeNotification.styl @@ -30,36 +30,20 @@ body[data-theme="dark"] &:hover color #5CB85C - -body[data-theme="solarized-dark"] - .notification-area - background-color none - - .notification-link - color $ui-solarized-dark-text-color - border none - background-color $ui-solarized-dark-button-backgroundColor - &:hover - color #5CB85C - -body[data-theme="monokai"] - .notification-area - background-color none - - .notification-link - color $ui-monokai-text-color - border none - background-color $ui-monokai-button-backgroundColor - &:hover - color #5CB85C - -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 +apply-theme(theme) + body[data-theme={theme}] + .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') + +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) + +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 1da8c7e4a..41e679ca9 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 - -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-label - color $ui-solarized-dark-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-label - color $ui-solarized-dark-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-label - color $ui-solarized-dark-text-color - -body[data-theme="monokai"] - .menu-button - &:active - background-color $ui-monokai-noteList-backgroundColor - color $ui-monokai-text-color - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - - .menu-button--active - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - .menu-button-label - color $ui-monokai-text-color - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - .menu-button-label - color $ui-monokai-text-color - - .menu-button-star--active - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - .menu-button-label - color $ui-monokai-text-color - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - .menu-button-label - color $ui-monokai-text-color - - .menu-button-trash--active - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - .menu-button-label - color $ui-monokai-text-color - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - .menu-button-label - color $ui-monokai-text-color - -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 +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') + + .menu-button--active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') + .menu-button-label + 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 get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') + .menu-button-label + 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 get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') + .menu-button-label + 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') + +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) + +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 d101f3183..994e3b5aa 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 - .deleteButton - color $ui-solarized-dark-button--active-color +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 - .button - color $ui-solarized-dark-button--active-color - transition 0.15s - - .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 - - .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 - 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-monokai-text-color - transition 0.15s + color get-theme-var(theme, 'text-color') .button - color $ui-monokai-text-color - transition 0.15s + color get-theme-var(theme, 'active-color') - .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 - - .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 + border none + color $ui-inactive-text-color + background-color transparent + transition color background-color 0.15s + border-left 4px solid transparent + + .input + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + color get-theme-var(theme, 'text-color') 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 +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .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 df8cbbc6e..e0a3c6cd2 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 - - .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 - -body[data-theme="monokai"] - .folderList-item - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - &:active - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - - .folderList-item--active - @extend .folderList-item - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - &:active - background-color $ui-monokai-button-backgroundColor - &:hover - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - -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 +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 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') + +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) + +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 9f407a171..1f78c46f1 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 5a0f32570..4a0081cd3 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 - - .progressBar - background-color $ui-monokai-active-color - - .percentageText - color $ui-monokai-text-color +apply-theme(theme) + body[data-theme={theme}] + .percentageBar + background-color: get-theme-var(theme, 'borderColor') -body[data-theme="dracula"] - .percentageBar - background-color $ui-dracula-borderColor + .progressBar + background-color get-theme-var(theme, 'active-color') - .progressBar - background-color: $ui-dracula-active-color + .percentageText + color get-theme-var(theme, 'text-color') - .percentageText - color $ui-dracula-text-color +for theme in 'dracula' + apply-theme(theme) - .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 4921b531d..ca1f9cdd6 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 - border-color themeDarkBorder - background-color themeSolarizedDarkTableHead - dt - border-color themeDarkBorder - dd - border-color themeDarkBorder - background-color $ui-solarized-dark-noteDetail-backgroundColor - - 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 - -themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor -themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%) -themeMonokaiTableHead = themeMonokaiTableEven -themeMonokaiTableBorder = themeDarkBorder - -body[data-theme="monokai"] - color $ui-monokai-text-color - border-color themeDarkBorder - background-color $ui-monokai-noteDetail-backgroundColor - table - thead - tr - background-color themeMonokaiTableHead - th - border-color themeMonokaiTableBorder - &:last-child - border-right solid 1px themeMonokaiTableBorder - tbody - tr:nth-child(2n + 1) - background-color themeMonokaiTableOdd - tr:nth-child(2n) - background-color themeMonokaiTableEven - td - border-color themeMonokaiTableBorder - &:last-child - border-right solid 1px themeMonokaiTableBorder - kbd - background-color themeDarkBackground - - dl - border-color themeDarkBorder - background-color themeMonokaiTableHead - dt - border-color themeDarkBorder - dd +apply-theme(theme) + body[data-theme={theme}] + color get-theme-var(theme, 'text-color') 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 + 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') + + 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') + + 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') + +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) + +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 e28e06ea9..61bd85042 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 000000000..3d9044c6d --- /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 1b7bd6066..f03de5d73 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 fe045e3af..76ce1eb8b 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 - - .search-optionList - color white - border-color $ui-monokai-borderColor - background-color $ui-monokai-button-backgroundColor - - .search-optionList-item - &:hover - background-color lighten($ui-monokai-button--hover-backgroundColor, 15%) - - .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 - -body[data-theme="dracula"] - .root - color $ui-dracula-text-color - &:hover - color #f8f8f2 - background-color $ui-dark-button--hover-backgroundColor - border-color $ui-dracula-borderColor - - .search-optionList - color #f8f8f2 - border-color $ui-dracula-borderColor - background-color $ui-dracula-button-backgroundColor - - .search-optionList-item - &:hover - background-color lighten($ui-dracula-button--hover-backgroundColor, 15%) - - .search-optionList-item--active - background-color $ui-dracula-button--active-backgroundColor - color $ui-dracula-button--active-color - &:hover - background-color $ui-dark-button--hover-backgroundColor - color $ui-dracula-button--active-color - .search-optionList-item-name-surfix - color $ui-dracula-inactive-text-color +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-input + color get-theme-var(theme, 'text-color') + background-color transparent + border-color get-theme-var(theme, 'borderColor') + + .search-optionList + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'button-backgroundColor') + + .search-optionList-item + &:hover + background-color lighten(get-theme-var(theme, 'button--hover-backgroundColor'), 15%) + + .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') + +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) + +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 133577f37..52a3b9617 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 1f774174c..416258160 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 - - .infoPanel-defaul-count - color $ui-dark-text-color - - .infoPanel-sub-count - color $ui-inactive-text-color - - .infoPanel-default - color $ui-dark-text-color - - .infoPanel-sub - color $ui-inactive-text-color - - .infoPanel-noteLink - background-color alpha($ui-dark-borderColor, 60%) - color $ui-dark-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 - -body[data-theme="solarized-dark"] - .control-infoButton-panel - background-color $ui-solarized-dark-noteList-backgroundColor - - .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 + .modification-date-desc + color $ui-inactive-text-color - .infoPanel-sub-count - color $ui-inactive-text-color + .infoPanel-defaul-count + color get-theme-var(theme, 'text-color') - .infoPanel-default - color $ui-dracula-text-color + .infoPanel-sub-count + color $ui-inactive-text-color - .infoPanel-sub - color $ui-inactive-text-color + .infoPanel-default + color get-theme-var(theme, 'text-color') - .infoPanel-noteLink - background-color alpha($ui-dracula-borderColor, 20%) - color $ui-dracula-text-color + .infoPanel-sub + color $ui-inactive-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 + .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(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') + +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/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index cdfeaf3a2..678969a5a 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 - -body[data-theme="monokai"] - .root - border-left 1px solid $ui-monokai-borderColor - background-color $ui-monokai-noteDetail-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -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 1ca465166..d44f61b6b 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 1af936455..c312d2716 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 - - .tabList .tabButton - border-color $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') - .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 - -body[data-theme="monokai"] - .root - border-left 1px solid $ui-monokai-borderColor - background-color $ui-monokai-noteDetail-backgroundColor - - .body - background-color $ui-monokai-noteDetail-backgroundColor - - .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 + .tabList .tabButton + border-color get-theme-var(theme, '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 + .tabButton + &:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + transition 0.15s - .tabList .tabButton - border-color $ui-dracula-borderColor + .tabList + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + color get-theme-var(theme, 'text-color') - .tabButton - &:hover - color $ui-dracula-text-color - background-color $ui-dracula-noteDetail-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .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 844561c6b..6107b7311 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 - - .tag-removeButton - border-color $ui-button--focus-borderColor - background-color transparent - - .tag-label - color $ui-solarized-dark-text-color - -body[data-theme="monokai"] - .tag - background-color $ui-monokai-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-monokai-text-color + .tag-label + color get-theme-var(theme, 'text-color') -body[data-theme="dracula"] - .tag - background-color $ui-dracula-tag-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .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 2b47b9327..481e67478 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 26fc83771..8d346f4a9 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 75a9061ca..57b0fc03e 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 73959c9ba..2b42ae3df 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 - - .control - background-color $ui-dark-noteList-backgroundColor - border-color $ui-dark-borderColor - - .control-sortBy-select - &:hover - transition 0.2s - color $ui-dark-text-color - - .control-button - color $ui-dark-inactive-text-color - &:hover - color $ui-dark-text-color - - .control-button--active - color $ui-dark-text-color - &:active - color $ui-dark-text-color - - -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 +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 get-theme-var(theme, 'noteList-backgroundColor') + border-color get-theme-var(theme, 'borderColor') + + .control-sortBy-select + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') + + .control-button + color get-theme-var(theme, 'inactive-text-color') + &:hover + color get-theme-var(theme, '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) + +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 54513cb6b..33422b4f6 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 9fa6d4fa8..86b6caebc 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 a06ecb111..375a989f1 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 36099140a..2184bc69b 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 23dec2089..7ed89eb54 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 61b21fc5d..a0eeadf60 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() - -body[data-theme="solarized-dark"] - .root, .root--expanded - background-color $ui-solarized-dark-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 $ui-solarized-dark-inactive-text-color - background-color $ui-solarized-dark-noteList-backgroundColor - - .control-search-input - background-color $ui-solarized-dark-noteList-backgroundColor - input - background-color $ui-solarized-dark-noteList-backgroundColor - color $ui-solarized-dark-text-color - -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 +apply-theme(theme) + body[data-theme={theme}] + .root, .root--expanded + background-color get-theme-var(theme, 'noteList-backgroundColor') + + .control + border-color get-theme-var(theme, 'borderColor') + .control-search + background-color get-theme-var(theme, '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-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') + +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) + +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 d864993dd..b0da56f51 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 - -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 - -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 +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') + +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) + +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 5558b3bd1..e8e11b9ed 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 938486833..95d6249ad 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 - - .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() - -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 +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 get-theme-var(theme, '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 + + .description + color $ui-inactive-text-color + + .control-confirmButton + colorThemedPrimaryButton(theme) + +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/main/modals/NewNoteModal.styl b/browser/main/modals/NewNoteModal.styl index c82b93764..c82ac9a91 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 255165ce7..0d9881cd9 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() - -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color - - .group-header - color $ui-solarized-dark-text-color - border-color $ui-solarized-dark-borderColor - - .group-header2 - color $ui-solarized-dark-text-color - - .group-section-control-input - border-color $ui-solarized-dark-borderColor - - .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() - -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 +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') + + .group-header + color get-theme-var(theme, 'text-color') + border-color get-theme-var(theme, 'borderColor') + + .group-header2 + color get-theme-var(theme, 'text-color') + + .group-section-control-input + border-color get-theme-var(theme, '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) + +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) + +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 6d72290ba..eb4f12894 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 618e9bc40..32a83d636 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-danger - color $danger-color - - .folderItem-left-key - color $ui-dark-inactive-text-color - - .folderItem-left-colorButton - colorSolarizedDarkPrimaryButton() - - .folderItem-right-button - colorSolarizedDarkPrimaryButton() - - .folderItem-right-confirmButton - colorSolarizedDarkPrimaryButton() - - .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-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-colorButton + colorThemedPrimaryButton(theme) - .folderItem-left-danger - color $danger-color + .folderItem-right-button + colorThemedPrimaryButton(theme) - .folderItem-left-key - color $ui-dark-inactive-text-color + .folderItem-right-confirmButton + colorThemedPrimaryButton(theme) - .folderItem-left-colorButton - colorDraculaPrimaryButton() + .folderItem-right-dangerButton + colorThemedPrimaryButton(theme) - .folderItem-right-button - colorDraculaPrimaryButton() +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .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 44f2d9ae5..dc675267a 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%) - -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color -.list - a - color $ui-solarized-dark-active-color - -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 +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') + .list + a + color get-theme-var(theme, 'active-color') + +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) + +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 7004259b3..2e3b40400 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() - - .top-bar - background-color transparent - border-color #4A4D52 - p - color $tab--dark-text-color - - .nav - background-color transparent - border-color $ui-dark-borderColor - - .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 +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') + + .nav-button--active + @extend .nav-button + color get-theme-var(theme, 'button--active-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') + +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/main/modals/PreferencesModal/SnippetTab.styl b/browser/main/modals/PreferencesModal/SnippetTab.styl index dd22b72ed..5d899797a 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() - -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() - -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 +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) + +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/main/modals/PreferencesModal/StoragesTab.styl b/browser/main/modals/PreferencesModal/StoragesTab.styl index 9a1a0ef88..bed3ff729 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 - - -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color - - .folderList-item - border-bottom $ui-solarized-dark-borderColor - - .folderList-empty - color $ui-solarized-dark-text-color - - .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-header - color $ui-solarized-dark-text-color - border-color $ui-solarized-dark-borderColor - - .addStorage-body-section-name-input - border-color $$ui-solarized-dark-borderColor - - .addStorage-body-section-type-description - color $ui-solarized-dark-text-color - - .addStorage-body-section-path-button - colorPrimaryButton() - .addStorage-body-control - border-color $ui-solarized-dark-borderColor - - .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 +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') + + .folderList-item + border-bottom get-theme-var(theme, 'borderColor') + + .folderList-empty + color get-theme-var(theme, 'text-color') + + .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') + + .addStorage-header + color get-theme-var(theme, 'text-color') + border-color get-theme-var(theme, 'borderColor') + + .addStorage-body-section-name-input + border-color $get-theme-var(theme, 'borderColor') + + .addStorage-body-section-type-description + color get-theme-var(theme, 'text-color') + + .addStorage-body-section-path-button + colorPrimaryButton() + .addStorage-body-control + border-color get-theme-var(theme, 'borderColor') + + .addStorage-body-control-createButton + colorDarkPrimaryButton() + .addStorage-body-control-cancelButton + colorDarkDefaultButton() + border-color get-theme-var(theme, 'borderColor') + +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) + +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 c6181a13f..b52b1bdbc 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 c9909d008..435aa6a07 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 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 - .header - background-color $ui-dark-button--hover-backgroundColor - 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') - .description - color $ui-inactive-text-color + .control-confirmButton + colorThemedPrimaryButton(theme) - .control-input - border-color $ui-dark-borderColor - color $ui-dark-text-color +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .control-confirmButton - colorDarkPrimaryButton() +for theme in $themes + apply-theme(theme) diff --git a/browser/styles/Detail/TagSelect.styl b/browser/styles/Detail/TagSelect.styl index 8900422c7..5fc233101 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"] +body[data-theme="white"] .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 + background-color $ui-white-noteList-backgroundColor li[aria-selected="true"] - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color + background-color $ui-button--active-backgroundColor -body[data-theme="solarized-dark"] - .TagSelect - .react-autosuggest__input - color $ui-solarized-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + .TagSelect + .react-autosuggest__input + color get-theme-var(theme, 'text-color') - ul - border-color $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteList-backgroundColor - color $ui-solarized-dark-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-solarized-dark-noteList-backgroundColor + &:before + background-color $ui-dark-noteList-backgroundColor - li[aria-selected="true"] - background-color $ui-dark-button--active-backgroundColor - color $ui-solarized-dark-text-color + li[aria-selected="true"] + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') -body[data-theme="white"] - .TagSelect - ul - background-color $ui-white-noteList-backgroundColor +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - li[aria-selected="true"] - background-color $ui-button--active-backgroundColor \ No newline at end of file +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 b9f9c41e0..6e3517fb9 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 2/4] 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 d716c85f1..49bd927a9 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 5e59e4654..8aca1505c 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 - - .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 +apply-theme(theme) + body[data-theme={theme}] + .root + background-color transparent + width 500px + height 270px + overflow hidden + position relative - .control-confirmButton - colorMonokaiPrimaryButton() + .header + background-color transparent + border-color get-theme-var(theme, 'borderColor') + color get-theme-var(theme, 'text-color') -body[data-theme="dracula"] - .root - modalDracula() - width 500px - height 270px - overflow hidden - position relative + .control-folder-label + color get-theme-var(theme, 'text-color') - .header - background-color transparent - border-color $ui-dracula-borderColor - color $ui-dracula-text-color + .control-folder-input + border 1px solid $ui-input--create-folder-modal + color white - .control-folder-label - color $ui-dracula-text-color + .description + color $ui-inactive-text-color - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white + .control-confirmButton + colorThemedPrimaryButton(theme) - .description - color $ui-inactive-text-color +for theme in 'dark' 'dracula' 'solarized-dark' + apply-theme(theme) - .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 3/4] 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 76ce1eb8b..ac903c6c5 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 4/4] 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 4e6719825..dbfb393e5 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