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 }