new-feature allow custom multi-theme

Author: mrin9

docs/examples/example100.html

@@ -83,6 +83,12 @@
         getRapiDoc().setAttribute('layout', newLayout );
       }
 
+      function changeRenderStyle() {
+        let currRender = getRapiDoc().getAttribute('render-style');
+        let newRender = currRender === "read" ? "view" : "read";
+        getRapiDoc().setAttribute('render-style', newRender );
+      }
+
       function toggleAttr(attr){
         if (getRapiDoc().getAttribute(attr) === 'false'){
           getRapiDoc().setAttribute(attr,"true");
@@ -131,6 +137,7 @@
     <rapi-doc id="thedoc" spec-url="https://petstore.swagger.io/v2/swagger.json"> 
       <div style="display:flex; margin:10px; justify-content:center;flex-wrap: wrap;">
         <button class="btn" onclick="changeAttr('header-color')">Change Header Color</button>
+        <button class="btn" onclick="changeRenderStyle()">Render Style</button>
         <button class="btn" onclick="changeAttr('heading-text')">Change Heading Text</button>
         <button class="btn" onclick="changeLogo()">Change Logo</button>
         <button class="btn" onclick="changeFont()">Change Font</button>

src/components/schema-tree.js

@@ -36,7 +36,7 @@ export default class SchemaTree extends LitElement {
         padding: 8px 16px 16px 16px;
       }
       .tree .tr:hover{
-        background-color:rgba(128,128,128, 0.07);
+        background-color:var(--hover-color);
       }
       .collapsed-descr .tr {
         max-height:20px;

src/rapidoc.js

@@ -6,8 +6,7 @@ import FontStyles from '@/styles/font-styles';
 import InputStyles from '@/styles/input-styles';
 import FlexStyles from '@/styles/flex-styles';
 import TableStyles from '@/styles/table-styles';
-import setTheme from '@/utils/theme';
-import ColorUtils from '@/utils/color-utils';
+import SetTheme from '@/utils/theme';
 import ProcessSpec from '@/utils/spec-parser';
 
 import '@/components/m-logo';
@@ -64,6 +63,8 @@ export default class RapiDoc extends LitElement {
 
       // Main Colors and Font
       theme: { type: String },
+      bgColor: { type: String, attribute: 'bg-color' },
+      textColor: { type: String, attribute: 'text-color' },
       headerColor: { type: String, attribute: 'header-color' },
       primaryColor: { type: String, attribute: 'primary-color' },
       regularFont: { type: String, attribute: 'regular-font' },
@@ -103,30 +104,26 @@ export default class RapiDoc extends LitElement {
 
   /* eslint-disable indent */
   render() {
+    const newTheme = {
+      bg1: this.bgColor,
+      fg1: this.textColor,
+      headerColor: this.headerColor,
+      primaryColor: this.primaryColor,
+      navBgColor: this.navBgColor,
+      navTextColor: this.navTextColor,
+      navHoverBgColor: this.navHoverBgColor,
+      navHoverTextColor: this.navHoverTextColor,
+      navAccentColor: this.navAccentColor,
+    };
     return html`
       ${FontStyles}
       ${InputStyles}
       ${FlexStyles}
       ${TableStyles}
-      ${this.theme === 'dark' ? setTheme('dark', {
-        bg1: '#36312C',
-        fg1: '#EBD1B7',
-        lightFg: '#7A7267',
-      }) : setTheme('light')}
+
+      ${this.theme === 'dark' ? SetTheme('dark', newTheme) : SetTheme('light', newTheme)}
       <style>
         :host {
-          --primary-color:${this.primaryColor ? `${this.primaryColor}` : '#FF791A'};
-          --dark-primary-color:${ColorUtils.color.brightness(this.primaryColor ? this.primaryColor : '#FF791A', -30)};
-          --primary-text:${this.primaryColor ? `${ColorUtils.color.invert(this.primaryColor)}` : '#ffffff'};
-          --header-bg:${this.headerColor ? `${this.headerColor}` : '#444'};
-          --header-fg:${this.headerColor ? `${ColorUtils.color.invert(this.headerColor)}` : '#ccc'};
-
-          --nav-bg-color:${this.navBgColor ? `${this.navBgColor}` : 'var(--bg2)'};
-          --nav-text-color:${this.navTextColor ? `${this.navTextColor}` : 'var(--fg3)'};
-          --nav-hover-bg-color:${this.navHoverBgColor ? `${this.navHoverBgColor}` : 'var(--hover-color)'};
-          --nav-hover-text-color:${this.navHoverTextColor ? `${this.navHoverTextColor}` : 'var(--fg3)'};
-          --nav-accent-color:${this.navAccentColor ? `${this.navAccentColor}` : 'var(--primary-color)'};
-
           --layout:${this.layout ? `${this.layout}` : 'row'};
           --font-mono:${this.monoFont ? `${this.monoFont}` : 'Monaco, "Andale Mono", "Roboto Mono", Consolas'}; 
           --font-regular:${this.regularFont ? `${this.regularFont}` : 'rapidoc, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
@@ -190,7 +187,7 @@ export default class RapiDoc extends LitElement {
         }
 
         .nav-scroll:hover::-webkit-scrollbar {
-          width: 30px;
+          width: 24px;
         }
 
         .nav-bar-tag {
@@ -273,9 +270,9 @@ export default class RapiDoc extends LitElement {
         }
 
         input.header-input{
-          background:${this.headerColor ? ColorUtils.color.brightness(this.headerColor, -20) : ColorUtils.color.inputReverseBg};
+          background:var(--header-color-darker);
           color:var(--header-fg);
-          border:1px solid var(--dark-primary-color);
+          border:1px solid var(--header-color-border);
           flex:1; 
           padding-right:24px;
           border-radius:3px;
@@ -657,6 +654,15 @@ export default class RapiDoc extends LitElement {
         this.loadSpec(newVal);
       }
     }
+    if (name === 'render-style') {
+      if (newVal === 'read') {
+        window.setTimeout(() => {
+          this.observeExpandedContent();
+        }, 100);
+      } else {
+        this.intersectionObserver.disconnect();
+      }
+    }
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
@@ -707,6 +713,12 @@ export default class RapiDoc extends LitElement {
     this.matchPaths = '';
   }
 
+  // Public Method
+  updateTheme(baseTheme, objTheme = {}) {
+    SetTheme(baseTheme, objTheme);
+  }
+
+  // Public Method
   async loadSpec(specUrl) {
     if (!specUrl) {
       return;
@@ -750,14 +762,15 @@ export default class RapiDoc extends LitElement {
         this.selectedServer = this.resolvedSpec.servers[0].url;
       }
     }
+
+    this.requestUpdate();
     // Put it at the end of event loop, to allow loading all the child elements (must for larger specs)
     this.intersectionObserver.disconnect();
     if (this.renderStyle === 'read') {
       window.setTimeout(() => {
         this.observeExpandedContent();
       }, 100);
     }
-    this.requestUpdate();
   }
 
   onIntersect(entries) {

src/styles/input-styles.js

@@ -9,7 +9,7 @@ input, select, button {
   color:var(--fg);
 }
 /* Button */
-.m-btn{
+.m-btn {
   border-radius: var(--border-radius);
   font-weight: 600;
   display: inline-block;
@@ -25,16 +25,16 @@ input, select, button {
   user-select: none;
   cursor: pointer;
 }
-.m-btn.primary{
+.m-btn.primary {
   background-color:var(--primary-color);
-  color:var(--primary-text);
+  color:var(--primary-color-invert);
 }
-.m-btn.large{padding:8px 14px;}
-.m-btn.small{padding:5px 12px;}
-.m-btn.circle{border-radius:50%;}
-.m-btn:hover{ 
+.m-btn.large { padding:8px 14px;}
+.m-btn.small { padding:5px 12px;}
+.m-btn.circle { border-radius:50%;}
+.m-btn:hover { 
   background-color: var(--primary-color);
-  color:var(--primary-text);
+  color:var(--primary-color-invert);
 }
 .m-btn:disabled{ 
   background-color: var(--bg3);

src/styles/schema-styles.js

@@ -49,7 +49,7 @@ export default html`
       font-size:10px; 
       font-weight:bold; 
       background-color:var(--primary-color); 
-      color:var(--primary-text); 
+      color:var(--primary-color-invert); 
       border-radius:2px;
       line-height:18px;
       padding:0px 5px;