From cf2c56c7061b7ed40fdd3b40a352ddb9c9b7371f Mon Sep 17 00:00:00 2001 From: alexwl Date: Tue, 2 Oct 2018 13:17:04 +0300 Subject: Initial commit --- javascript/app/utils/color-themes.js | 188 +++++++++++++++++++++++++++++++++++ 1 file changed, 188 insertions(+) create mode 100644 javascript/app/utils/color-themes.js (limited to 'javascript/app/utils/color-themes.js') diff --git a/javascript/app/utils/color-themes.js b/javascript/app/utils/color-themes.js new file mode 100644 index 0000000..0a563ff --- /dev/null +++ b/javascript/app/utils/color-themes.js @@ -0,0 +1,188 @@ +function colorThemeToCss(colorTheme) { + const css = ` + body { + color: ${colorTheme.defaultColor} !important; + background-color: ${colorTheme.backgroundColor} !important; + } + input { + color: ${colorTheme.defaultColor} !important; + background-color: ${colorTheme.backgroundColor} !important; + border-color: ${colorTheme.borderColor} !important; + } + .package-content { + border-top: 1px solid ${colorTheme.borderColor} !important; + } + .header a { + color : ${colorTheme.menuLinkColor} !important; + } + a { + color: ${colorTheme.typeColor} !important; + } + span.link { + color: ${colorTheme.typeColor} !important; + } + .header { + background-color: ${colorTheme.menuColor} !important; + border-bottom: 1px solid ${colorTheme.borderColor} !important; + } + .declarations-content { + background-color: ${colorTheme.navigationPanelColor} !important; + border: 1px solid ${colorTheme.borderColor} !important; + } + .declarations-header { + background-color: ${colorTheme.navigationPanelColor} !important; + border: 1px solid ${colorTheme.borderColor} !important; + } + li.declaration { + border-bottom: 1px solid ${colorTheme.borderColor} !important; + } + .left-panel { + background-color: ${colorTheme.navigationPanelColor} !important; + border-right: 1px solid ${colorTheme.borderColor} !important; + } + .show-left-panel-button { + background-color: ${colorTheme.navigationPanelColor} !important; + border-right:1px solid ${colorTheme.borderColor} !important; + border-bottom:1px solid ${colorTheme.borderColor} !important; + } + .right-panel { + background-color: ${colorTheme.backgroundColor} !important; + } + a.jstree-anchor { + color: ${colorTheme.defaultColor} !important; + } + .declaration > a { + color: ${colorTheme.defaultColor} !important; + } + .highlighted-line { + background : ${colorTheme.highlightedLineColor} !important; + } + table.source-code { + background-color: ${colorTheme.backgroundColor} !important; + color: ${colorTheme.defaultColor} !important; + } + .jstree-clicked { + background-color: ${colorTheme.backgroundColor} !important; + } + .jstree-hovered { + background-color: ${colorTheme.backgroundColor} !important; + } + ul.autocomplete-items { + background-color: ${colorTheme.backgroundColor} !important; + border-top: 1px solid ${colorTheme.borderColor} !important; + border-left: 1px solid ${colorTheme.borderColor} !important; + border-right: 1px solid ${colorTheme.borderColor} !important; + } + ul.autocomplete-items > li { + border-bottom: 1px solid ${colorTheme.borderColor} !important; + } + ul.autocomplete-items > li:hover { + background-color: ${colorTheme.highlightedLineColor} !important; + } + ul.autocomplete-items > li.highlighted { + background-color: ${colorTheme.highlightedLineColor} !important; + } + .source-code-snippet { + color: ${colorTheme.defaultColor} !important; + border-bottom: 1px solid ${colorTheme.borderColor} !important; + } + .source-code-snippet:hover { + background-color: ${colorTheme.highlightedLineColor} !important; + } + .bottom-panel { + background-color: ${colorTheme.backgroundColor} !important; + border-top: 1px solid ${colorTheme.borderColor} !important; + } + .bottom-panel-header { + border-bottom: 1px solid ${colorTheme.borderColor} !important; + } + .paginated-list-header { + border-bottom: 1px solid ${colorTheme.borderColor} !important; + } + li.search-result { + border-bottom: 1px solid ${colorTheme.borderColor} !important; + } + .search-results-header { + border-bottom: 1px solid ${colorTheme.borderColor} !important; + } + .info-window-content { + border-top: 1px solid ${colorTheme.borderColor} !important; + } + .info-window { + border: 1px solid ${colorTheme.borderColor} !important; + background-color:${colorTheme.infoWindowColor} !important; + color: ${colorTheme.defaultColor} !important; + } + .type-info { + border-top: 1px solid ${colorTheme.borderColor} !important; + }`; + return css; +} + +const darkTheme = { + id: "darkTheme", + name: "Dark theme", + description: "Dark theme (Monokai based)", + defaultColor: "#F8F8F2", + backgroundColor: "#272822", + typeColor: "#66D9EF", + literalColor: "#E6DB74", + topLevelIdFromCurrentModule : "#A6E22E", + localIdentifierColor: ["#F0A3FF","#0075DC","#993F00", + "#2BCE48","#FFCC99","#808080","#94FFB5","#8F7C00", + "#C20088","#FFA405","#FFA8BB","#426600","#FF0010", + "#5EF1F2","#00998F","#E0FF66","#FFFF80", + "#FFFF00","#FF5005"], + menuColor: "#3c3b37", + menuLinkColor : "#F8F8F2", + infoWindowColor: "#3c3b37", + navigationPanelColor: "#3c3b37", + linkColor : "#0366d6", + borderColor: "#535557", + highlightedLineColor: "#4a4a4a" +}; + +const lightTheme = { + id: "lightTheme", + name: "Light theme", + description: "Light theme (Github based)", + defaultColor: "#24292e", + backgroundColor: "#ffffff", + typeColor: "#005cc5", + literalColor: "#032f62", + topLevelIdFromCurrentModule : "#6f42c1", + localIdentifierColor: ["#005C31", + "#2BCE48","#808080","#8F7C00", + "#C20088","#FFA405","#ffa8bb","#426600","#FF0010", + "#09d7d8","#00998F","#990000","#FF5005"], + menuColor: "#f2f4f8", + menuLinkColor : "#24292e", + infoWindowColor: "#f2f4f8", + navigationPanelColor: "#f2f4f8", + linkColor : "#0366d6", + borderColor: "#e1e4e8", + highlightedLineColor: "#eaeaea" +}; + +function updateColorThemeCss (colorTheme) { + const newStyle = document.createElement('style'); + newStyle.type = 'text/css'; + newStyle.innerHTML = colorThemeToCss(colorTheme); + newStyle.id = 'color-theme'; + const oldStyle = document.querySelector("style#color-theme"); + if(oldStyle) { + oldStyle.parentElement.removeChild(oldStyle); + } + document.getElementsByTagName('head')[0].appendChild(newStyle); +} + +const themes = { + darkTheme: darkTheme, + lightTheme: lightTheme +}; + +export { + updateColorThemeCss, + colorThemeToCss, + themes +} -- cgit v1.2.3