1 files changed, 188 insertions, 0 deletions
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  
+}