diff --git a/ElectronClient/app/gui/NoteText.jsx b/ElectronClient/app/gui/NoteText.jsx index a8f6b9e89..66f47df6f 100644 --- a/ElectronClient/app/gui/NoteText.jsx +++ b/ElectronClient/app/gui/NoteText.jsx @@ -49,6 +49,7 @@ require('brace/theme/solarized_light'); require('brace/theme/solarized_dark'); require('brace/theme/twilight'); require('brace/theme/dracula'); +require('brace/theme/chaos'); const NOTE_TAG_BAR_FEATURE_ENABLED = false; @@ -1201,7 +1202,7 @@ class NoteTextComponent extends React.Component { const previousTheme = Setting.value('theme'); Setting.setValue('theme', Setting.THEME_LIGHT); this.lastSetHtml_ = ''; - await this.updateHtml(this.state.note.markup_language, tempBody, { useCustomCss: false }); + await this.updateHtml(this.state.note.markup_language, tempBody, { useCustomCss: true }); this.forceUpdate(); const restoreSettings = async () => { diff --git a/ElectronClient/app/gui/style/theme/nord.js b/ElectronClient/app/gui/style/theme/nord.js new file mode 100644 index 000000000..e3137383e --- /dev/null +++ b/ElectronClient/app/gui/style/theme/nord.js @@ -0,0 +1,84 @@ +const nord = ['#2e3440', '#3b4252', '#434c5e', '#4c566a', '#d8dee9', '#e5e9f0', '#eceff4', '#8fbcbb', '#88c0d0', '#81a1c1', '#5e81ac', '#bf616a', '#d08770', '#ebcb8b', '#a3be8c', '#b48ead']; + +// DOCUMENTATION of Nord as of Oct 3 +// 0 #2e3440 : Base component color of "Polar Night". +// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. +// 1 #3b4252 : Lighter shade color of the base component color. +// Used as a lighter background color for UI elements like status bars. +// 2 #434c5e : Lighter shade color of the base component color. +// Used as line highlighting in the editor. +// In the UI scope it may be used as selection- and highlight color. +// 3 #4c566a : Lighter shade color of the base component color. +// Used for comments, invisibles, indent- and wrap guide marker. +// In the UI scope used as pseudoclass color for disabled elements. +// 4 #d8dee9 : Base component color of "Snow Storm". +// Main color for text, variables, constants and attributes. +// In the UI scope used as semi-light background depending on the theme shading design. +// 5 #e5e9f0 : Lighter shade color of the base component color. +// Used as a lighter background color for UI elements like status bars. +// Used as semi-light background depending on the theme shading design. +// 6 #eceff4 : Lighter shade color of the base component color. +// Used for punctuations, carets and structuring characters like curly- and square brackets. +// In the UI scope used as background, selection- and highlight color depending on the theme shading design. +// 7 #8fbcbb : Bluish core color. +// Used for classes, types and documentation tags. +// 8 #88c0d0 : Bluish core accent color. +// Represents the accent color of the color palette. +// Main color for primary UI elements and methods/functions. +// 9 #81a1c1 : Bluish core color. +// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and +// punctuations like (semi)colons,commas and braces. +// 10 #5e81ac : Bluish core color. +// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`). +// 11 #bf616a : Colorful component color. +// Used for errors, git/diff deletion and linter marker. +// 12 #d08770 : Colorful component color. +// Used for annotations. +// 13 #ebcb8b : Colorful component color. +// Used for escape characters, regular expressions and markup entities. +// In the UI scope used for warnings and git/diff renamings. +// 14 #a3be8c : Colorful component color. +// Main color for strings and attribute values. +// In the UI scope used for git/diff additions and success visualizations. +// 15 #b48ead : Colorful component color. +// Used for numbers. +// 2e3440 === rbga(46, 52, 64, 1) + +const nordStyle = { + backgroundColor: nord[0], + backgroundColorTransparent: 'rgba(46, 52, 64, 0.9)', + oddBackgroundColor: nord[1], + color: nord[5], // For regular text + colorError: nord[11], + colorWarn: nord[12], + colorFaded: nord[4], // For less important text; + colorBright: nord[6], // For important text; + dividerColor: nord[10], + selectedColor: nord[9], + urlColor: nord[8], + + backgroundColor2: nord[2], + depthColor: 'rgb(200, 200, 200, OPACITY)', + color2: nord[8], + selectedColor2: nord[10], + colorError2: nord[11], + + raisedBackgroundColor: nord[2], + raisedColor: nord[7], + + warningBackgroundColor: nord[13], + + htmlColor: nord[4], + htmlBackgroundColor: nord[1], + htmlDividerColor: nord[2], + htmlLinkColor: nord[10], + htmlTableBackgroundColor: nord[0], + htmlCodeBackgroundColor: nord[0], + htmlCodeBorderColor: nord[2], + htmlCodeColor: nord[13], + + editorTheme: 'chaos', + codeThemeCss: 'atom-one-dark-reasonable.css', +}; + +module.exports = nordStyle; diff --git a/ElectronClient/app/package.json b/ElectronClient/app/package.json index c02e37c4e..844fa5458 100644 --- a/ElectronClient/app/package.json +++ b/ElectronClient/app/package.json @@ -113,7 +113,7 @@ "mark.js": "^8.11.1", "markdown-it": "^8.4.1", "markdown-it-abbr": "^1.0.4", - "markdown-it-anchor": "^5.2.4", + "markdown-it-anchor": "^5.2.5", "markdown-it-deflist": "^2.0.3", "markdown-it-emoji": "^1.4.0", "markdown-it-footnote": "^3.0.2", @@ -123,7 +123,7 @@ "markdown-it-multimd-table": "^3.2.0", "markdown-it-sub": "^1.0.0", "markdown-it-sup": "^1.0.0", - "markdown-it-toc-done-right": "^4.0.2", + "markdown-it-toc-done-right": "^4.1.0", "md5": "^2.2.1", "moment": "^2.22.2", "multiparty": "^4.2.1", diff --git a/ElectronClient/app/theme.js b/ElectronClient/app/theme.js index e9e472f1c..2038ae995 100644 --- a/ElectronClient/app/theme.js +++ b/ElectronClient/app/theme.js @@ -1,4 +1,5 @@ const Setting = require('lib/models/Setting.js'); +const nordStyle = require('./gui/style/theme/nord'); // globalStyle should be used for properties that do not change across themes // i.e. should not be used for colors @@ -399,14 +400,17 @@ function themeStyle(theme) { // relevant properties output = Object.assign({}, globalStyle, fontSizes, lightStyle); - if (theme == Setting.THEME_DARK) { - output = Object.assign({}, output, darkStyle); - } else if (theme == Setting.THEME_SOLARIZED_LIGHT) { - output = Object.assign({}, output, solarizedLightStyle); - } else if (theme == Setting.THEME_SOLARIZED_DARK) { - output = Object.assign({}, output, solarizedDarkStyle); - } else if (theme == Setting.THEME_DRACULA) { - output = Object.assign({}, output, draculaStyle); + switch (theme) { + case Setting.THEME_DARK : + output = Object.assign({}, output, darkStyle); break; + case Setting.THEME_SOLARIZED_LIGHT : + output = Object.assign({}, output, solarizedLightStyle); break; + case Setting.THEME_SOLARIZED_DARK : + output = Object.assign({}, output, solarizedDarkStyle); break; + case Setting.THEME_DRACULA : + output = Object.assign({}, output, draculaStyle); break; + case Setting.THEME_NORD : + output = Object.assign({}, output, nordStyle); break; } // Note: All the theme specific things should go in addExtraStyles diff --git a/README.md b/README.md index 5ad945a3d..5be48e234 100644 --- a/README.md +++ b/README.md @@ -266,7 +266,7 @@ Joplin uses and renders a Github-flavoured Markdown with a few variations and ad # Custom CSS -Rendered markdown can be customized by placing a userstyle file in the profile directory `~/.config/joplin-desktop/userstyle.css` (This path might be different on your device - check at the top of the Config screen for the exact path). This file supports standard CSS syntax. Joplin ***must*** be restarted for the new css to be applied, please ensure that Joplin is not closing to the tray, but is actually exiting. Note that this file is used only when display the notes, **not when printing or exporting to PDF**. This is because printing has a lot more restrictions (for example, printing white text over a black background is usually not wanted), so special rules are applied to make it look good when printing, and a userstyle.css would interfer with that. +Rendered markdown can be customized by placing a userstyle file in the profile directory `~/.config/joplin-desktop/userstyle.css` (This path might be different on your device - check at the top of the Config screen for the exact path). This file supports standard CSS syntax. Joplin ***must*** be restarted for the new css to be applied, please ensure that Joplin is not closing to the tray, but is actually exiting. Note that this file is used for both displaying the notes and printing the notes. Be aware how the CSS may look printed (for example, printing white text over a black background is usually not wanted). # Note templates diff --git a/ReactNativeClient/lib/components/select-date-time-dialog.js b/ReactNativeClient/lib/components/select-date-time-dialog.js index df8818d1a..a66fe6d3c 100644 --- a/ReactNativeClient/lib/components/select-date-time-dialog.js +++ b/ReactNativeClient/lib/components/select-date-time-dialog.js @@ -4,6 +4,7 @@ import PopupDialog, { DialogTitle, DialogButton } from 'react-native-popup-dialo import DatePicker from 'react-native-datepicker'; import moment from 'moment'; import { _ } from 'lib/locale.js'; +const { time } = require('lib/time-utils.js'); class SelectDateTimeDialog extends React.PureComponent { @@ -41,7 +42,7 @@ class SelectDateTimeDialog extends React.PureComponent { } dateTimeFormat() { - return 'MM/DD/YYYY HH:mm'; + return time.dateTimeFormat(); } stringToDate(s) { diff --git a/ReactNativeClient/lib/models/Setting.js b/ReactNativeClient/lib/models/Setting.js index c2a7c9601..8a5d0796d 100644 --- a/ReactNativeClient/lib/models/Setting.js +++ b/ReactNativeClient/lib/models/Setting.js @@ -228,6 +228,7 @@ class Setting extends BaseModel { output[Setting.THEME_DRACULA] = _('Dracula'); output[Setting.THEME_SOLARIZED_LIGHT] = _('Solarised Light'); output[Setting.THEME_SOLARIZED_DARK] = _('Solarised Dark'); + output[Setting.THEME_NORD] = _('Nord'); } return output; }, @@ -914,6 +915,7 @@ Setting.THEME_DARK = 2; Setting.THEME_SOLARIZED_LIGHT = 3; Setting.THEME_SOLARIZED_DARK = 4; Setting.THEME_DRACULA = 5; +Setting.THEME_NORD = 6; Setting.FONT_DEFAULT = 0; Setting.FONT_MENLO = 1; diff --git a/ReactNativeClient/package.json b/ReactNativeClient/package.json index 9f282f25c..e7c5d1df2 100644 --- a/ReactNativeClient/package.json +++ b/ReactNativeClient/package.json @@ -23,7 +23,7 @@ "katex": "^0.10.0", "markdown-it": "^8.4.0", "markdown-it-abbr": "^1.0.4", - "markdown-it-anchor": "^5.2.4", + "markdown-it-anchor": "^5.2.5", "markdown-it-deflist": "^2.0.3", "markdown-it-emoji": "^1.4.0", "markdown-it-footnote": "^3.0.2", @@ -33,7 +33,7 @@ "markdown-it-multimd-table": "^3.2.0", "markdown-it-sub": "^1.0.0", "markdown-it-sup": "^1.0.0", - "markdown-it-toc-done-right": "^4.0.2", + "markdown-it-toc-done-right": "^4.1.0", "md5": "^2.2.1", "moment": "^2.24.0", "prop-types": "^15.6.0",