mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-15 09:04:04 +02:00
144 lines
3.5 KiB
JavaScript
144 lines
3.5 KiB
JavaScript
const Setting = require('lib/models/Setting.js');
|
|
const { Platform } = require('react-native');
|
|
|
|
const globalStyle = {
|
|
fontSize: 16,
|
|
margin: 15, // No text and no interactive component should be within this margin
|
|
itemMarginTop: 10,
|
|
itemMarginBottom: 10,
|
|
backgroundColor: '#ffffff',
|
|
color: '#555555', // For regular text
|
|
colorError: 'red',
|
|
colorWarn: '#9A5B00',
|
|
colorFaded: '#777777', // For less important text
|
|
fontSizeSmaller: 14,
|
|
dividerColor: '#dddddd',
|
|
strongDividerColor: '#aaaaaa',
|
|
selectedColor: '#e5e5e5',
|
|
headerBackgroundColor: '#F0F0F0',
|
|
disabledOpacity: 0.2,
|
|
colorUrl: '#7B81FF',
|
|
textSelectionColor: '#0096FF',
|
|
|
|
raisedBackgroundColor: '#0080EF',
|
|
raisedColor: '#003363',
|
|
raisedHighlightedColor: '#ffffff',
|
|
|
|
warningBackgroundColor: '#FFD08D',
|
|
|
|
// For WebView - must correspond to the properties above
|
|
htmlFontSize: '16px',
|
|
htmlColor: '#222222',
|
|
htmlBackgroundColor: 'white',
|
|
htmlDividerColor: 'rgb(230,230,230)',
|
|
htmlLinkColor: 'rgb(80,130,190)',
|
|
htmlLineHeight: '1.6em',
|
|
|
|
htmlCodeBackgroundColor: 'rgb(243, 243, 243)',
|
|
htmlCodeBorderColor: 'rgb(220, 220, 220)',
|
|
htmlCodeColor: 'rgb(0,0,0)',
|
|
|
|
codeThemeCss: 'hljs-atom-one-light.css',
|
|
};
|
|
|
|
globalStyle.marginRight = globalStyle.margin;
|
|
globalStyle.marginLeft = globalStyle.margin;
|
|
globalStyle.marginTop = globalStyle.margin;
|
|
globalStyle.marginBottom = globalStyle.margin;
|
|
globalStyle.htmlMarginLeft = ((globalStyle.marginLeft / 10) * 0.6).toFixed(2) + 'em';
|
|
|
|
let themeCache_ = {};
|
|
|
|
function addExtraStyles(style) {
|
|
style.icon = {
|
|
color: style.color,
|
|
fontSize: 30,
|
|
};
|
|
|
|
style.lineInput = {
|
|
color: style.color,
|
|
backgroundColor: style.backgroundColor,
|
|
borderBottomWidth: 1,
|
|
borderColor: style.strongDividerColor,
|
|
paddingBottom: 0,
|
|
};
|
|
|
|
if (Platform.OS === 'ios') {
|
|
delete style.lineInput.borderBottomWidth;
|
|
delete style.lineInput.borderColor;
|
|
}
|
|
|
|
style.buttonRow = {
|
|
flexDirection: 'row',
|
|
borderTopWidth: 1,
|
|
borderTopColor: style.dividerColor,
|
|
paddingTop: 10,
|
|
};
|
|
|
|
style.normalText = {
|
|
color: style.color,
|
|
fontSize: style.fontSize,
|
|
};
|
|
|
|
style.urlText = {
|
|
color: style.colorUrl,
|
|
fontSize: style.fontSize,
|
|
};
|
|
|
|
style.headerStyle = {
|
|
color: style.color,
|
|
fontSize: style.fontSize * 1.2,
|
|
fontWeight: 'bold',
|
|
};
|
|
|
|
style.headerWrapperStyle = {
|
|
backgroundColor: style.headerBackgroundColor,
|
|
};
|
|
|
|
return style;
|
|
}
|
|
|
|
function themeStyle(theme) {
|
|
if (!theme) {
|
|
console.warn('Theme not set!! Defaulting to Light theme');
|
|
theme = Setting.THEME_LIGHT;
|
|
}
|
|
|
|
if (themeCache_[theme]) return themeCache_[theme];
|
|
|
|
let output = Object.assign({}, globalStyle);
|
|
if (theme == Setting.THEME_LIGHT) return addExtraStyles(output);
|
|
|
|
output.backgroundColor = '#1D2024';
|
|
output.color = '#dddddd';
|
|
output.colorFaded = '#777777';
|
|
output.dividerColor = '#555555';
|
|
output.strongDividerColor = '#888888';
|
|
output.selectedColor = '#333333';
|
|
output.textSelectionColor = '#00AEFF';
|
|
output.headerBackgroundColor = '#2D3136';
|
|
|
|
output.raisedBackgroundColor = '#0F2051';
|
|
output.raisedColor = '#788BC3';
|
|
output.raisedHighlightedColor = '#ffffff';
|
|
|
|
output.htmlColor = 'rgb(220,220,220)';
|
|
output.htmlBackgroundColor = 'rgb(29,32,36)';
|
|
output.htmlLinkColor = 'rgb(166,166,255)';
|
|
|
|
output.htmlDividerColor = '#3D444E';
|
|
output.htmlLinkColor = 'rgb(166,166,255)';
|
|
output.htmlCodeColor = '#ffffff';
|
|
output.htmlCodeBackgroundColor = 'rgb(47, 48, 49)';
|
|
output.htmlCodeBorderColor = 'rgb(70, 70, 70)';
|
|
|
|
output.codeThemeCss = 'hljs-atom-one-dark-reasonable.css';
|
|
|
|
output.colorUrl = '#7B81FF';
|
|
|
|
themeCache_[theme] = output;
|
|
return addExtraStyles(themeCache_[theme]);
|
|
}
|
|
|
|
module.exports = { globalStyle, themeStyle };
|