feat: Initial clean release of CHM

packages/lib/themes/aritimDark.ts

@@ -0,0 +1,39 @@
+import { Theme } from './type';
+import theme_dark from './dark';
+
+const theme: Theme = {
+	...theme_dark,
+
+	backgroundColor: '#10151a', // Main background color
+	backgroundColorTransparent: 'rgba(16, 21, 26, 0.9)', //
+	oddBackgroundColor: '#141a21',
+	color: '#d3dae3', // For regular text (everything except notebooks)
+	colorError: '#4a2608',
+	colorWarn: '#d66500',
+	colorFaded: '#666a73', // For less important text (e.g. not selected menu in settings)
+	dividerColor: '#141a21', // Borders, I wish I could remove them
+	selectedColor: '#2b5278', // Selected note
+	urlColor: '#5a95c5', // Links to external sites (e.g. in settings)
+
+	backgroundColor2: '#141a21', // Notebooks main background
+	color2: '#d3dae3', // Notebook sidebar text color
+	selectedColor2: '#10151a', // Selected notebook (or settings icon in settings)
+	colorError2: '#4a2608',
+
+	raisedBackgroundColor: '#2b5278', // Table, hover
+	raisedColor: '#141a21',
+
+	warningBackgroundColor: '#4a2608', // Info / Warning boxes bg color
+
+	tableBackgroundColor: '#141a21', // Table (even) background color
+	codeBackgroundColor: '#141a21', // Single line code bg
+	codeBorderColor: '#141a21', // Single line code border, and tables
+	codeColor: '#005b47', // Single line code text
+
+	codeMirrorTheme: 'monokai',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+
+	highlightedColor: '#d3dae3',
+};
+
+export default theme;

packages/lib/themes/dark.ts

@@ -0,0 +1,69 @@
+import { Theme, ThemeAppearance } from './type';
+import lightTheme from './light';
+
+// This is the default dark theme in Joplin
+const theme: Theme = {
+	...lightTheme,
+
+	appearance: ThemeAppearance.Dark,
+
+	// Color scheme "1" is the basic one, like used to display the note
+	// content. It's basically dark gray text on white background
+	backgroundColor: '#16181D',
+	backgroundColorTransparent: 'rgba(22,24,29,0.9)',
+	oddBackgroundColor: '#101216',
+	color: '#E8E6E1',
+	colorError: '#E57373',
+	colorCorrect: '#7CBF8E',
+	colorWarn: '#D9A05B',
+	colorWarnUrl: '#FFE1A8',
+	colorFaded: '#9AA0AA', // For less important text
+	dividerColor: '#2A2E35',
+	selectedColor: '#262B33',
+	urlColor: '#8AB4FF',
+	colorErrorSelected: '#FFB4B4',
+
+	// Color scheme "2" is used for the sidebar. It's white text over
+	// dark blue background.
+	backgroundColor2: '#0F1114',
+	color2: '#E8E6E1',
+	selectedColor2: '#1E2A44',
+	colorError2: '#ff6c6c',
+	colorPublished2: '#789FE9',
+	colorWarn2: '#ffcb81',
+	colorWarn3: '#ffcb81',
+	backgroundColorTransparent2: 'rgba(255, 255, 255, 0.1)',
+
+	// Color scheme "3" is used for the config screens for example/
+	// It's dark text over gray background.
+	backgroundColor3: '#1E2127',
+	backgroundColorHover3: '#2A2E36',
+	color3: '#C6CBD3',
+
+	// Color scheme "4" is used for secondary-style buttons. It makes a white
+	// button with blue text.
+	backgroundColor4: '#16181D',
+	color4: '#8AB4FF',
+	backgroundColor4Dimmed: '#232A3A',
+
+	raisedBackgroundColor: '#2A2E35',
+	raisedColor: '#E8E6E1',
+	searchMarkerBackgroundColor: '#F5D9A8',
+	searchMarkerColor: '#1A1D21',
+
+	warningBackgroundColor: '#4A3418',
+	destructiveColor: '#E57373',
+
+	tableBackgroundColor: '#1A1D22',
+	codeBackgroundColor: '#1E2127',
+	codeBorderColor: '#2A2E35',
+	codeColor: '#E8E6E1',
+
+	codeMirrorTheme: 'material-darker',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+
+	headerBackgroundColor: '#1A1D22',
+	textSelectionColor: '#8AB4FF',
+};
+
+export default theme;

packages/lib/themes/dracula.ts

@@ -0,0 +1,37 @@
+import { Theme } from './type';
+import theme_dark from './dark';
+
+const theme: Theme = {
+	...theme_dark,
+
+	backgroundColor: '#282a36',
+	backgroundColorTransparent: 'rgba(40, 42, 54, 0.9)',
+	oddBackgroundColor: '#282a36',
+	color: '#f8f8f2', // For regular text
+	colorError: '#ff5555',
+	colorWarn: '#a65a2e',
+	colorFaded: '#6272a4', // For less important text;
+	dividerColor: '#bd93f9',
+	selectedColor: '#44475a',
+	urlColor: '#8be9fd',
+
+	backgroundColor2: '#21222C',
+	color2: '#bd93f9',
+	selectedColor2: '#44475a',
+	colorError2: '#ff5555',
+
+	raisedBackgroundColor: '#44475a',
+	raisedColor: '#bd93f9',
+
+	warningBackgroundColor: '#a65a2e',
+
+	tableBackgroundColor: '#6272a4',
+	codeBackgroundColor: '#44475a',
+	codeBorderColor: '#f8f8f2',
+	codeColor: '#50fa7b',
+
+	codeMirrorTheme: 'dracula',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+};
+
+export default theme;

packages/lib/themes/ink.ts

@@ -0,0 +1,71 @@
+import { Theme, ThemeAppearance } from './type';
+
+// 宣纸白主题：以宣纸底色、松烟墨文字与靛青点缀构成的中式极简配色。
+// 底色刻意不使用纯白，避免长时间阅读时的眩光；点缀色克制，仅用于链接与焦点。
+const theme: Theme = {
+	appearance: ThemeAppearance.Light,
+
+	// Color scheme "1" is the basic one, like used to display the note
+	// content. It's basically dark gray text on white background
+	backgroundColor: '#FBFAF7',
+	backgroundColorTransparent: 'rgba(251,250,247,0.92)',
+	oddBackgroundColor: '#F5F2EB',
+	color: '#1C1B19',
+	colorError: '#A3352B',
+	colorCorrect: '#3F6B4F',
+	colorWarn: '#B4552F',
+	colorWarnUrl: '#33506B',
+	colorFaded: '#8A857C',
+	dividerColor: '#E7E2D8',
+	selectedColor: '#EFEBE1',
+	urlColor: '#33506B',
+	colorErrorSelected: '#8C2E25',
+	shadowColor: 'rgba(28,27,25,0.08)',
+
+	// Color scheme "2" is used for the sidebar. It's white text over
+	// dark blue background.
+	backgroundColor2: '#211F1C',
+	color2: '#EDEAE4',
+	selectedColor2: '#3A362F',
+	colorError2: '#DE8E7C',
+	colorPublished2: '#9BB0C4',
+	colorWarn2: '#DDB77A',
+	colorWarn3: '#B4552F',
+	backgroundColorTransparent2: 'rgba(0,0,0,0.12)',
+
+	// Color scheme "3" is used for the config screens for example/
+	// It's dark text over gray background.
+	backgroundColor3: '#F3F0E9',
+	backgroundColorHover3: '#E2DCCE',
+	color3: '#6E675C',
+
+	// Color scheme "4" is used for secondary-style buttons. It makes a white
+	// button with blue text.
+	backgroundColor4: '#FFFFFF',
+	color4: '#33506B',
+	backgroundColor4Dimmed: '#E7EDF3',
+
+	raisedBackgroundColor: '#EDE9E0',
+	raisedColor: '#1C1B19',
+	searchMarkerBackgroundColor: '#F0DFB0',
+	searchMarkerColor: '#1C1B19',
+
+	warningBackgroundColor: '#F4E3C8',
+	destructiveColor: '#A3352B',
+
+	tableBackgroundColor: '#F7F5F0',
+	codeBackgroundColor: '#F5F2EB',
+	codeBorderColor: '#E7E2D8',
+	codeColor: '#1C1B19',
+
+	blockQuoteOpacity: 0.72,
+
+	codeMirrorTheme: 'default',
+	codeThemeCss: 'atom-one-light.css',
+
+	headerBackgroundColor: '#F4F1E9',
+	textSelectionColor: '#CBDCEA',
+	colorBright2: '#FFFFFF',
+};
+
+export default theme;

packages/lib/themes/inkDark.ts

@@ -0,0 +1,70 @@
+import { Theme, ThemeAppearance } from './type';
+
+// 墨夜主题：与“宣纸白”同一审美的暗色版本，用墨黑背景、米白文字保持低对比度刺激。
+const theme: Theme = {
+	appearance: ThemeAppearance.Dark,
+
+	// Color scheme "1" is the basic one, like used to display the note
+	// content. It's basically dark gray text on white background
+	backgroundColor: '#161513',
+	backgroundColorTransparent: 'rgba(22,21,19,0.92)',
+	oddBackgroundColor: '#1E1C1A',
+	color: '#E6E1D8',
+	colorError: '#E08C7A',
+	colorCorrect: '#8FB99B',
+	colorWarn: '#DDB77A',
+	colorWarnUrl: '#A8C4DB',
+	colorFaded: '#8B857B',
+	dividerColor: '#312E29',
+	selectedColor: '#2C2925',
+	urlColor: '#A8C4DB',
+	colorErrorSelected: '#F0A392',
+	shadowColor: 'rgba(0,0,0,0.4)',
+
+	// Color scheme "2" is used for the sidebar. It's white text over
+	// dark blue background.
+	backgroundColor2: '#100F0E',
+	color2: '#DCD6CB',
+	selectedColor2: '#2A2723',
+	colorError2: '#DE8E7C',
+	colorPublished2: '#9BB0C4',
+	colorWarn2: '#DDB77A',
+	colorWarn3: '#DDB77A',
+	backgroundColorTransparent2: 'rgba(0,0,0,0.3)',
+
+	// Color scheme "3" is used for the config screens for example/
+	// It's dark text over gray background.
+	backgroundColor3: '#1C1A18',
+	backgroundColorHover3: '#33302A',
+	color3: '#9A9389',
+
+	// Color scheme "4" is used for secondary-style buttons. It makes a white
+	// button with blue text.
+	backgroundColor4: '#232120',
+	color4: '#CFE0EE',
+	backgroundColor4Dimmed: '#2B3038',
+
+	raisedBackgroundColor: '#2A2724',
+	raisedColor: '#E6E1D8',
+	searchMarkerBackgroundColor: '#6B5620',
+	searchMarkerColor: '#F5EFE2',
+
+	warningBackgroundColor: '#4A3A1E',
+	destructiveColor: '#C9564A',
+
+	tableBackgroundColor: '#1E1C1A',
+	codeBackgroundColor: '#1E1C1A',
+	codeBorderColor: '#312E29',
+	codeColor: '#E6E1D8',
+
+	blockQuoteOpacity: 0.7,
+
+	codeMirrorTheme: 'dracula',
+	codeThemeCss: 'atom-one-dark.css',
+
+	headerBackgroundColor: '#1C1A18',
+	textSelectionColor: '#3E5265',
+	colorBright2: '#FFFFFF',
+};
+
+export default theme;

packages/lib/themes/light.ts

@@ -0,0 +1,70 @@
+import { Theme, ThemeAppearance } from './type';
+
+// This is the default theme in Joplin
+const theme: Theme = {
+	appearance: ThemeAppearance.Light,
+
+	// Color scheme "1" is the basic one, like used to display the note
+	// content. It's basically dark gray text on white background
+	backgroundColor: '#FBFBFA',
+	backgroundColorTransparent: 'rgba(251,251,250,0.9)',
+	oddBackgroundColor: '#F1F0EC',
+	color: '#1A1D21', // For regular text
+	colorError: '#C93A3A',
+	colorCorrect: '#2F7D4F', // Opposite of colorError
+	colorWarn: '#B25E09',
+	colorWarnUrl: '#2456D6',
+	colorFaded: '#5F6B7A', // For less important text
+	dividerColor: '#E7E5E0',
+	selectedColor: '#ECEBE7',
+	urlColor: '#2456D6',
+	colorErrorSelected: '#A32E2E',
+	shadowColor: 'rgba(26,29,33,0.12)',
+
+	// Color scheme "2" is used for the sidebar. It's white text over
+	// dark blue background.
+	backgroundColor2: '#22262D',
+	color2: '#F4F2ED',
+	selectedColor2: '#171B21',
+	colorError2: '#ff7070',
+	colorPublished2: '#789FE9',
+	colorWarn2: '#ffcb81',
+	colorWarn3: '#ff7626',
+	backgroundColorTransparent2: 'rgba(0, 0, 0, 0.1)',
+
+	// Color scheme "3" is used for the config screens for example/
+	// It's dark text over gray background.
+	backgroundColor3: '#F3F2EE',
+	backgroundColorHover3: '#E9E7E1',
+	color3: '#5B6470',
+
+	// Color scheme "4" is used for secondary-style buttons. It makes a white
+	// button with blue text.
+	backgroundColor4: '#ffffff',
+	color4: '#2456D6',
+	backgroundColor4Dimmed: '#E8EEFD',
+
+	raisedBackgroundColor: '#ECEBE7',
+	raisedColor: '#1A1D21',
+	searchMarkerBackgroundColor: '#F5D9A8',
+	searchMarkerColor: '#1A1D21',
+
+	warningBackgroundColor: '#F5D9A8',
+	destructiveColor: '#C93A3A',
+
+	tableBackgroundColor: '#F7F6F3',
+	codeBackgroundColor: '#F5F4F1',
+	codeBorderColor: '#E7E5E0',
+	codeColor: '#1A1D21',
+
+	blockQuoteOpacity: 0.7,
+
+	codeMirrorTheme: 'default',
+	codeThemeCss: 'atom-one-light.css',
+
+	headerBackgroundColor: '#F5F4F1',
+	textSelectionColor: '#2456D6',
+	colorBright2: '#ffffff',
+};
+
+export default theme;

packages/lib/themes/nord.ts

@@ -0,0 +1,86 @@
+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', '#8f503b'];
+
+// 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)
+// 16 #8f503b :    Colorful component color.
+// Darkened version of nord[12] to avoid white text on light background.
+// Used for warning backgrounds.
+
+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;
+	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[16],
+
+	tableBackgroundColor: nord[0],
+	codeBackgroundColor: nord[0],
+	codeBorderColor: nord[2],
+	codeColor: nord[13],
+
+	codeMirrorTheme: 'nord',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+};
+
+export default theme;

packages/lib/themes/oledDark.ts

@@ -0,0 +1,20 @@
+import { Theme } from './type';
+import theme_dark from './dark';
+
+const theme: Theme = {
+	...theme_dark,
+	backgroundColor: '#000000',
+	color: '#dddddd',
+	colorFaded: '#777777',
+	dividerColor: '#3D444E',
+	urlColor: 'rgb(166,166,255)',
+	codeColor: '#ffffff',
+	raisedBackgroundColor: '#0F2051',
+	raisedColor: '#788BC3',
+	tableBackgroundColor: 'rgb(0, 0, 0)',
+	codeBackgroundColor: 'rgb(47, 48, 49)',
+	codeBorderColor: 'rgb(70, 70, 70)',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+};
+
+export default theme;

packages/lib/themes/solarizedDark.ts

@@ -0,0 +1,45 @@
+import { Theme } from './type';
+import theme_dark from './dark';
+
+const theme: Theme = {
+	...theme_dark,
+
+	backgroundColor: '#002b36',
+	backgroundColorTransparent: 'rgba(0, 43, 54, 0.9)',
+	oddBackgroundColor: '#073642',
+	color: '#839496', // For regular text
+	colorError: '#dc322f',
+	colorWarn: '#cb4b16',
+	colorFaded: '#657b83', // For less important text;
+	dividerColor: '#586e75',
+	selectedColor: '#073642',
+	urlColor: '#268bd2',
+
+	backgroundColor2: '#073642',
+	color2: '#eee8d5',
+	selectedColor2: '#586e75',
+	colorError2: '#cb4b16',
+
+	backgroundColor3: '#012732',
+	backgroundColorHover3: '#2aa19870',
+	color3: '#93a1a1',
+
+	backgroundColor4: '#073642',
+	backgroundColor4Dimmed: '#073642',
+	color4: '#93a1a1',
+
+	raisedBackgroundColor: '#073642',
+	raisedColor: '#839496',
+
+	warningBackgroundColor: '#b5890055',
+
+	tableBackgroundColor: '#002b36',
+	codeBackgroundColor: '#002b36',
+	codeBorderColor: '#696969',
+	codeColor: '#839496',
+
+	codeMirrorTheme: 'solarized dark',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+};
+
+export default theme;

packages/lib/themes/solarizedLight.ts

@@ -0,0 +1,39 @@
+import { Theme } from './type';
+import theme_light from './light';
+
+const theme: Theme = {
+	...theme_light,
+
+	backgroundColor: '#fdf6e3',
+	backgroundColorTransparent: 'rgba(253, 246, 227, 0.9)',
+	oddBackgroundColor: '#eee8d5',
+	color: '#657b83', // For regular text
+	colorError: '#dc322f',
+	colorWarn: '#cb4b16',
+	colorFaded: '#839496', // For less important text;
+	dividerColor: '#eee8d5',
+	selectedColor: '#eee8d5',
+	urlColor: '#268bd2',
+
+	backgroundColor2: '#002b36',
+	color2: '#eee8d5',
+	selectedColor2: '#6c71c4',
+	colorError2: '#cb4b16',
+
+	raisedBackgroundColor: '#eee8d5',
+	raisedColor: '#073642',
+
+	warningBackgroundColor: '#b5890055',
+
+	tableBackgroundColor: '#fdf6e3',
+	codeBackgroundColor: '#fdf6e3',
+	codeBorderColor: '#eee8d5',
+	codeColor: '#002b36',
+
+	codeMirrorTheme: 'solarized light',
+	codeThemeCss: 'atom-one-light.css',
+
+	backgroundColor4Dimmed: '#eee8d5',
+};
+
+export default theme;

packages/lib/themes/type.ts

@@ -0,0 +1,75 @@
+export enum ThemeAppearance {
+	Light = 'light',
+	Dark = 'dark',
+}
+
+export interface Theme {
+	appearance: ThemeAppearance;
+
+	// Color scheme "1" is the basic one, like used to display the note
+	// content. It's basically dark gray text on white background
+	backgroundColor: string;
+	backgroundColorTransparent: string;
+	oddBackgroundColor: string;
+	color: string; // For regular text
+	colorError: string;
+	colorErrorSelected: string; // On a selectedColor background
+	colorCorrect: string;
+	colorWarn: string;
+	colorWarnUrl: string; // For URL displayed over a warningBackgroundColor
+	colorFaded: string; // For less important text
+	dividerColor: string;
+	selectedColor: string;
+	urlColor: string;
+	shadowColor: string;
+
+	// Color scheme "2" is used for the sidebar. It's white text over
+	// dark blue background.
+	backgroundColor2: string;
+	backgroundColorTransparent2: string; // Used for dimmed region outside modals
+	color2: string;
+	selectedColor2: string;
+	colorError2: string;
+	colorPublished2?: string; // Published items on the sidebar
+	colorWarn2: string; // On a darker background (eg. sidebar)
+	colorWarn3: string; // On a lighter background (eg. note list)
+
+	// Color scheme "3" is used for the config screens for example/
+	// It's dark text over gray background.
+	backgroundColor3: string;
+	backgroundColorHover3: string;
+	color3: string;
+
+	// Color scheme "4" is used for secondary-style buttons. It makes a white
+	// button with blue text.
+	color4: string;
+	backgroundColor4: string;
+	backgroundColor4Dimmed: string;
+
+	backgroundColor5?: string;
+	color5?: string;
+
+	raisedBackgroundColor: string;
+	raisedColor: string;
+	searchMarkerBackgroundColor: string;
+	searchMarkerColor: string;
+
+	warningBackgroundColor: string;
+	destructiveColor: string;
+
+	tableBackgroundColor: string;
+	codeBackgroundColor: string;
+	codeBorderColor: string;
+	codeColor: string;
+
+	blockQuoteOpacity: number;
+
+	codeMirrorTheme: string;
+	codeThemeCss: string;
+
+	highlightedColor?: string;
+
+	headerBackgroundColor: string;
+	textSelectionColor: string;
+	colorBright2: string;
+}