1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
joplin/ReactNativeClient/lib/themes/nord.ts
2020-09-15 14:01:07 +01:00

85 lines
3.6 KiB
TypeScript

import { Theme } from './type';
import theme_dark from './dark';
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 theme:Theme = {
...theme_dark,
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],
color2: nord[8],
selectedColor2: nord[10],
colorError2: nord[11],
raisedBackgroundColor: nord[2],
raisedColor: nord[7],
warningBackgroundColor: nord[13],
tableBackgroundColor: nord[0],
codeBackgroundColor: nord[0],
codeBorderColor: nord[2],
codeColor: nord[13],
codeMirrorTheme: 'nord',
codeThemeCss: 'atom-one-dark-reasonable.css',
};
export default theme;