self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-01-11 18:24:43 +02:00
Code Issues Releases Activity

Desktop: Resolves #1903: Add Nord theme (#2004)

Browse Source 
code by vzsky (PR was abandoned)
closes #1903
This commit is contained in:
Helmut K. C. Tessarek 2019-10-30 05:55:45 -04:00 committed by Laurent Cozic
parent 0386534b3a
commit dece5d8de7
4 changed files with 99 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ElectronClient/app/gui/NoteText.jsx
View File

@ -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;

84
ElectronClient/app/gui/style/theme/nord.js Normal file
View File

@ -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;

20
ElectronClient/app/theme.js
View File

@ -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

2
ReactNativeClient/lib/models/Setting.js
View File

@ -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;