You've already forked joplin
mirror of
https://github.com/laurent22/joplin.git
synced 2025-08-13 22:12:50 +02:00
Desktop: Moved all themes out into their own .js theme files (#2951)
* Working on an aritim-dark theme, very WIP still * Update aritim.js * Added new theme "Aritim-Dark" * removing aritim-dark "brace" theme for now * Updating style with some changes * Reset branch back to the original upstream state, to create a different pull-request for moving all themes outside * Reset branch back to the original upstream state * Moved all themes out into their own .js theme files * Updating master to use the seperated themes stuff * Moved themes into their own const * Removed switch case for themes and simplified it. Thanks Laurent for the help!
This commit is contained in:
Tobias Johansson
GitHub
40
ElectronClient/gui/style/theme/dark.js
Normal file
40
ElectronClient/gui/style/theme/dark.js
Normal file
@@ -0,0 +1,40 @@
|
||||
const darkStyle = {
|
||||
backgroundColor: '#1D2024',
|
||||
backgroundColorTransparent: 'rgba(255,255,255,0.9)',
|
||||
oddBackgroundColor: '#dddddd',
|
||||
color: '#dddddd',
|
||||
colorError: 'red',
|
||||
colorWarn: '#9A5B00',
|
||||
colorFaded: '#777777', // For less important text
|
||||
colorBright: '#ffffff', // For important text
|
||||
dividerColor: '#555555',
|
||||
selectedColor: '#333333',
|
||||
urlColor: '#4E87EE',
|
||||
|
||||
backgroundColor2: '#181A1D',
|
||||
depthColor: 'rgb(200, 200, 200, OPACITY)',
|
||||
color2: '#ffffff',
|
||||
selectedColor2: '#013F74',
|
||||
colorError2: '#ff6c6c',
|
||||
|
||||
raisedBackgroundColor: '#474747',
|
||||
raisedColor: '#ffffff',
|
||||
|
||||
warningBackgroundColor: '#CC6600',
|
||||
|
||||
htmlColor: 'rgb(220,220,220)',
|
||||
htmlBackgroundColor: 'rgb(29,32,36)',
|
||||
htmlDividerColor: '#3D444E',
|
||||
htmlCodeColor: '#ffffff',
|
||||
htmlLinkColor: 'rgb(166,166,255)',
|
||||
htmlTableBackgroundColor: 'rgb(40, 41, 42)',
|
||||
htmlCodeBackgroundColor: 'rgb(47, 48, 49)',
|
||||
htmlCodeBorderColor: 'rgb(70, 70, 70)',
|
||||
|
||||
editorTheme: 'twilight',
|
||||
codeThemeCss: 'atom-one-dark-reasonable.css',
|
||||
|
||||
highlightedColor: '#0066C7',
|
||||
};
|
||||
|
||||
module.exports = darkStyle;
|
||||
38
ElectronClient/gui/style/theme/dracula.js
Normal file
38
ElectronClient/gui/style/theme/dracula.js
Normal file
@@ -0,0 +1,38 @@
|
||||
const draculaStyle = {
|
||||
backgroundColor: '#282a36',
|
||||
backgroundColorTransparent: 'rgba(40, 42, 54, 0.9)',
|
||||
oddBackgroundColor: '#282a36',
|
||||
color: '#f8f8f2', // For regular text
|
||||
colorError: '#ff5555',
|
||||
colorWarn: '#ffb86c',
|
||||
colorFaded: '#6272a4', // For less important text;
|
||||
colorBright: '#50fa7b', // For important text;
|
||||
dividerColor: '#bd93f9',
|
||||
selectedColor: '#44475a',
|
||||
urlColor: '#8be9fd',
|
||||
|
||||
backgroundColor2: '#21222C',
|
||||
depthColor: 'rgb(200, 200, 200, OPACITY)',
|
||||
color2: '#bd93f9',
|
||||
selectedColor2: '#44475a',
|
||||
colorError2: '#ff5555',
|
||||
|
||||
raisedBackgroundColor: '#44475a',
|
||||
raisedColor: '#bd93f9',
|
||||
|
||||
warningBackgroundColor: '#ffb86c',
|
||||
|
||||
htmlColor: '#f8f8f2',
|
||||
htmlBackgroundColor: '#282a36',
|
||||
htmlDividerColor: '#f8f8f2',
|
||||
htmlLinkColor: '#8be9fd',
|
||||
htmlTableBackgroundColor: '#6272a4',
|
||||
htmlCodeBackgroundColor: '#44475a',
|
||||
htmlCodeBorderColor: '#f8f8f2',
|
||||
htmlCodeColor: '#50fa7b',
|
||||
|
||||
editorTheme: 'dracula',
|
||||
codeThemeCss: 'atom-one-dark-reasonable.css',
|
||||
};
|
||||
|
||||
module.exports = draculaStyle;
|
||||
39
ElectronClient/gui/style/theme/light.js
Normal file
39
ElectronClient/gui/style/theme/light.js
Normal file
@@ -0,0 +1,39 @@
|
||||
// This is the default theme in Joplin
|
||||
const lightStyle = {
|
||||
backgroundColor: '#ffffff',
|
||||
backgroundColorTransparent: 'rgba(255,255,255,0.9)',
|
||||
oddBackgroundColor: '#dddddd',
|
||||
color: '#222222', // For regular text
|
||||
colorError: 'red',
|
||||
colorWarn: '#9A5B00',
|
||||
colorFaded: '#777777', // For less important text
|
||||
colorBright: '#000000', // For important text
|
||||
dividerColor: '#dddddd',
|
||||
selectedColor: '#e5e5e5',
|
||||
urlColor: '#155BDA',
|
||||
|
||||
backgroundColor2: '#162B3D',
|
||||
depthColor: 'rgb(100, 182, 253, OPACITY)',
|
||||
color2: '#f5f5f5',
|
||||
selectedColor2: '#0269C2',
|
||||
colorError2: '#ff6c6c',
|
||||
|
||||
raisedBackgroundColor: '#e5e5e5',
|
||||
raisedColor: '#222222',
|
||||
|
||||
warningBackgroundColor: '#FFD08D',
|
||||
|
||||
htmlColor: '#222222',
|
||||
htmlBackgroundColor: 'white',
|
||||
htmlDividerColor: 'rgb(230,230,230)',
|
||||
htmlLinkColor: 'rgb(80,130,190)',
|
||||
htmlTableBackgroundColor: 'rgb(247, 247, 247)',
|
||||
htmlCodeBackgroundColor: 'rgb(243, 243, 243)',
|
||||
htmlCodeBorderColor: 'rgb(220, 220, 220)',
|
||||
htmlCodeColor: 'rgb(0,0,0)',
|
||||
|
||||
editorTheme: 'chrome',
|
||||
codeThemeCss: 'atom-one-light.css',
|
||||
};
|
||||
|
||||
module.exports = lightStyle;
|
||||
38
ElectronClient/gui/style/theme/solarizedDark.js
Normal file
38
ElectronClient/gui/style/theme/solarizedDark.js
Normal file
@@ -0,0 +1,38 @@
|
||||
const solarizedDarkStyle = {
|
||||
backgroundColor: '#002b36',
|
||||
backgroundColorTransparent: 'rgba(0, 43, 54, 0.9)',
|
||||
oddBackgroundColor: '#073642',
|
||||
color: '#93a1a1', // For regular text
|
||||
colorError: '#dc322f',
|
||||
colorWarn: '#cb4b16',
|
||||
colorFaded: '#657b83', // For less important text;
|
||||
colorBright: '#eee8d5', // For important text;
|
||||
dividerColor: '#586e75',
|
||||
selectedColor: '#073642',
|
||||
urlColor: '#268bd2',
|
||||
|
||||
backgroundColor2: '#073642',
|
||||
depthColor: 'rgb(200, 200, 200, OPACITY)',
|
||||
color2: '#eee8d5',
|
||||
selectedColor2: '#6c71c4',
|
||||
colorError2: '#cb4b16',
|
||||
|
||||
raisedBackgroundColor: '#073642',
|
||||
raisedColor: '#839496',
|
||||
|
||||
warningBackgroundColor: '#b5890055',
|
||||
|
||||
htmlColor: '#93a1a1',
|
||||
htmlBackgroundColor: '#002b36',
|
||||
htmlDividerColor: '#073642',
|
||||
htmlLinkColor: '#268bd2',
|
||||
htmlTableBackgroundColor: '#002b36',
|
||||
htmlCodeBackgroundColor: '#002b36',
|
||||
htmlCodeBorderColor: '#696969',
|
||||
htmlCodeColor: '#fdf6e3',
|
||||
|
||||
editorTheme: 'solarized_dark',
|
||||
codeThemeCss: 'atom-one-dark-reasonable.css',
|
||||
};
|
||||
|
||||
module.exports = solarizedDarkStyle;
|
||||
38
ElectronClient/gui/style/theme/solarizedLight.js
Normal file
38
ElectronClient/gui/style/theme/solarizedLight.js
Normal file
@@ -0,0 +1,38 @@
|
||||
const solarizedLightStyle = {
|
||||
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;
|
||||
colorBright: '#073642', // For important text;
|
||||
dividerColor: '#eee8d5',
|
||||
selectedColor: '#eee8d5',
|
||||
urlColor: '#268bd2',
|
||||
|
||||
backgroundColor2: '#002b36',
|
||||
depthColor: 'rgb(100, 182, 253, OPACITY)',
|
||||
color2: '#eee8d5',
|
||||
selectedColor2: '#6c71c4',
|
||||
colorError2: '#cb4b16',
|
||||
|
||||
raisedBackgroundColor: '#eee8d5',
|
||||
raisedColor: '#073642',
|
||||
|
||||
warningBackgroundColor: '#b5890055',
|
||||
|
||||
htmlColor: '#657b83',
|
||||
htmlBackgroundColor: '#fdf6e3',
|
||||
htmlDividerColor: '#eee8d5',
|
||||
htmlLinkColor: '#268bd2',
|
||||
htmlTableBackgroundColor: '#fdf6e3',
|
||||
htmlCodeBackgroundColor: '#fdf6e3',
|
||||
htmlCodeBorderColor: '#eee8d5',
|
||||
htmlCodeColor: '#002b36',
|
||||
|
||||
editorTheme: 'solarized_light',
|
||||
codeThemeCss: 'atom-one-light.css',
|
||||
};
|
||||
|
||||
module.exports = solarizedLightStyle;
|
||||
@@ -1,5 +1,13 @@
|
||||
const Setting = require('lib/models/Setting.js');
|
||||
const nordStyle = require('./gui/style/theme/nord');
|
||||
|
||||
const themes = {
|
||||
[Setting.THEME_LIGHT]: require('./gui/style/theme/light'),
|
||||
[Setting.THEME_DARK]: require('./gui/style/theme/dark'),
|
||||
[Setting.THEME_DRACULA]: require('./gui/style/theme/dracula'),
|
||||
[Setting.THEME_SOLARIZED_LIGHT]: require('./gui/style/theme/solarizedLight'),
|
||||
[Setting.THEME_SOLARIZED_DARK]: require('./gui/style/theme/solarizedDark'),
|
||||
[Setting.THEME_NORD]: 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
|
||||
@@ -73,194 +81,6 @@ globalStyle.buttonStyle = {
|
||||
borderRadius: 4,
|
||||
};
|
||||
|
||||
const lightStyle = {
|
||||
backgroundColor: '#ffffff',
|
||||
backgroundColorTransparent: 'rgba(255,255,255,0.9)',
|
||||
oddBackgroundColor: '#dddddd',
|
||||
color: '#222222', // For regular text
|
||||
colorError: 'red',
|
||||
colorWarn: '#9A5B00',
|
||||
colorFaded: '#777777', // For less important text
|
||||
colorBright: '#000000', // For important text
|
||||
dividerColor: '#dddddd',
|
||||
selectedColor: '#e5e5e5',
|
||||
urlColor: '#155BDA',
|
||||
|
||||
backgroundColor2: '#162B3D',
|
||||
depthColor: 'rgb(100, 182, 253, OPACITY)',
|
||||
color2: '#f5f5f5',
|
||||
selectedColor2: '#0269C2',
|
||||
colorError2: '#ff6c6c',
|
||||
|
||||
raisedBackgroundColor: '#e5e5e5',
|
||||
raisedColor: '#222222',
|
||||
|
||||
warningBackgroundColor: '#FFD08D',
|
||||
|
||||
htmlColor: '#222222',
|
||||
htmlBackgroundColor: 'white',
|
||||
htmlDividerColor: 'rgb(230,230,230)',
|
||||
htmlLinkColor: 'rgb(80,130,190)',
|
||||
htmlTableBackgroundColor: 'rgb(247, 247, 247)',
|
||||
htmlCodeBackgroundColor: 'rgb(243, 243, 243)',
|
||||
htmlCodeBorderColor: 'rgb(220, 220, 220)',
|
||||
htmlCodeColor: 'rgb(0,0,0)',
|
||||
|
||||
editorTheme: 'chrome',
|
||||
codeThemeCss: 'atom-one-light.css',
|
||||
};
|
||||
|
||||
const darkStyle = {
|
||||
backgroundColor: '#1D2024',
|
||||
backgroundColorTransparent: 'rgba(255,255,255,0.9)',
|
||||
oddBackgroundColor: '#dddddd',
|
||||
color: '#dddddd',
|
||||
colorError: 'red',
|
||||
colorWarn: '#9A5B00',
|
||||
colorFaded: '#777777', // For less important text
|
||||
colorBright: '#ffffff', // For important text
|
||||
dividerColor: '#555555',
|
||||
selectedColor: '#333333',
|
||||
urlColor: '#4E87EE',
|
||||
|
||||
backgroundColor2: '#181A1D',
|
||||
depthColor: 'rgb(200, 200, 200, OPACITY)',
|
||||
color2: '#ffffff',
|
||||
selectedColor2: '#013F74',
|
||||
colorError2: '#ff6c6c',
|
||||
|
||||
raisedBackgroundColor: '#474747',
|
||||
raisedColor: '#ffffff',
|
||||
|
||||
warningBackgroundColor: '#CC6600',
|
||||
|
||||
htmlColor: 'rgb(220,220,220)',
|
||||
htmlBackgroundColor: 'rgb(29,32,36)',
|
||||
htmlDividerColor: '#3D444E',
|
||||
htmlCodeColor: '#ffffff',
|
||||
htmlLinkColor: 'rgb(166,166,255)',
|
||||
htmlTableBackgroundColor: 'rgb(40, 41, 42)',
|
||||
htmlCodeBackgroundColor: 'rgb(47, 48, 49)',
|
||||
htmlCodeBorderColor: 'rgb(70, 70, 70)',
|
||||
|
||||
editorTheme: 'twilight',
|
||||
codeThemeCss: 'atom-one-dark-reasonable.css',
|
||||
|
||||
highlightedColor: '#0066C7',
|
||||
};
|
||||
|
||||
// Solarized Styles
|
||||
const solarizedLightStyle = {
|
||||
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;
|
||||
colorBright: '#073642', // For important text;
|
||||
dividerColor: '#eee8d5',
|
||||
selectedColor: '#eee8d5',
|
||||
urlColor: '#268bd2',
|
||||
|
||||
backgroundColor2: '#002b36',
|
||||
depthColor: 'rgb(100, 182, 253, OPACITY)',
|
||||
color2: '#eee8d5',
|
||||
selectedColor2: '#6c71c4',
|
||||
colorError2: '#cb4b16',
|
||||
|
||||
raisedBackgroundColor: '#eee8d5',
|
||||
raisedColor: '#073642',
|
||||
|
||||
warningBackgroundColor: '#b5890055',
|
||||
|
||||
htmlColor: '#657b83',
|
||||
htmlBackgroundColor: '#fdf6e3',
|
||||
htmlDividerColor: '#eee8d5',
|
||||
htmlLinkColor: '#268bd2',
|
||||
htmlTableBackgroundColor: '#fdf6e3',
|
||||
htmlCodeBackgroundColor: '#fdf6e3',
|
||||
htmlCodeBorderColor: '#eee8d5',
|
||||
htmlCodeColor: '#002b36',
|
||||
|
||||
editorTheme: 'solarized_light',
|
||||
codeThemeCss: 'atom-one-light.css',
|
||||
};
|
||||
|
||||
const solarizedDarkStyle = {
|
||||
backgroundColor: '#002b36',
|
||||
backgroundColorTransparent: 'rgba(0, 43, 54, 0.9)',
|
||||
oddBackgroundColor: '#073642',
|
||||
color: '#93a1a1', // For regular text
|
||||
colorError: '#dc322f',
|
||||
colorWarn: '#cb4b16',
|
||||
colorFaded: '#657b83', // For less important text;
|
||||
colorBright: '#eee8d5', // For important text;
|
||||
dividerColor: '#586e75',
|
||||
selectedColor: '#073642',
|
||||
urlColor: '#268bd2',
|
||||
|
||||
backgroundColor2: '#073642',
|
||||
depthColor: 'rgb(200, 200, 200, OPACITY)',
|
||||
color2: '#eee8d5',
|
||||
selectedColor2: '#6c71c4',
|
||||
colorError2: '#cb4b16',
|
||||
|
||||
raisedBackgroundColor: '#073642',
|
||||
raisedColor: '#839496',
|
||||
|
||||
warningBackgroundColor: '#b5890055',
|
||||
|
||||
htmlColor: '#93a1a1',
|
||||
htmlBackgroundColor: '#002b36',
|
||||
htmlDividerColor: '#073642',
|
||||
htmlLinkColor: '#268bd2',
|
||||
htmlTableBackgroundColor: '#002b36',
|
||||
htmlCodeBackgroundColor: '#002b36',
|
||||
htmlCodeBorderColor: '#696969',
|
||||
htmlCodeColor: '#fdf6e3',
|
||||
|
||||
editorTheme: 'solarized_dark',
|
||||
codeThemeCss: 'atom-one-dark-reasonable.css',
|
||||
};
|
||||
|
||||
const draculaStyle = {
|
||||
backgroundColor: '#282a36',
|
||||
backgroundColorTransparent: 'rgba(40, 42, 54, 0.9)',
|
||||
oddBackgroundColor: '#282a36',
|
||||
color: '#f8f8f2', // For regular text
|
||||
colorError: '#ff5555',
|
||||
colorWarn: '#ffb86c',
|
||||
colorFaded: '#6272a4', // For less important text;
|
||||
colorBright: '#50fa7b', // For important text;
|
||||
dividerColor: '#bd93f9',
|
||||
selectedColor: '#44475a',
|
||||
urlColor: '#8be9fd',
|
||||
|
||||
backgroundColor2: '#21222C',
|
||||
depthColor: 'rgb(200, 200, 200, OPACITY)',
|
||||
color2: '#bd93f9',
|
||||
selectedColor2: '#44475a',
|
||||
colorError2: '#ff5555',
|
||||
|
||||
raisedBackgroundColor: '#44475a',
|
||||
raisedColor: '#bd93f9',
|
||||
|
||||
warningBackgroundColor: '#ffb86c',
|
||||
|
||||
htmlColor: '#f8f8f2',
|
||||
htmlBackgroundColor: '#282a36',
|
||||
htmlDividerColor: '#f8f8f2',
|
||||
htmlLinkColor: '#8be9fd',
|
||||
htmlTableBackgroundColor: '#6272a4',
|
||||
htmlCodeBackgroundColor: '#44475a',
|
||||
htmlCodeBorderColor: '#f8f8f2',
|
||||
htmlCodeColor: '#50fa7b',
|
||||
|
||||
editorTheme: 'dracula',
|
||||
codeThemeCss: 'atom-one-dark-reasonable.css',
|
||||
};
|
||||
|
||||
function addExtraStyles(style) {
|
||||
style.tagStyle = {
|
||||
fontSize: style.fontSize,
|
||||
@@ -427,20 +247,7 @@ function themeStyle(theme) {
|
||||
|
||||
// All theme are based on the light style, and just override the
|
||||
// relevant properties
|
||||
output = Object.assign({}, globalStyle, fontSizes, lightStyle);
|
||||
|
||||
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;
|
||||
}
|
||||
output = Object.assign({}, globalStyle, fontSizes, themes[Setting.THEME_LIGHT], themes[theme]);
|
||||
|
||||
// Note: All the theme specific things should go in addExtraStyles
|
||||
// so that their definition is not split between here and the
|
||||
|
||||
Reference in New Issue
Block a user