She's a Rainbow

She's a Rainbow ~ She Comes in Colours Everywhere



This weekend I was listening to my Rolling Stone discography and came upon this delightful song:



I suddenly realized that I had forgotten to explain how to customize any aspect of QuickBase's CSS including colors. With all the commotion last week over the Branding & Application Bars and the new class definitions for Vibrant and Success I rushed to put together this application that demonstrates a new way to customize any aspect of QuickBase's look and feel using Service Workers:

She's A Rainbow
https://haversineconsulting.quickbase.com/db/bne59biqr

Have a look around and you will note that the Branding & Application Bars have the trendy new purple color scheme popularized by world famolus Pantone Color Institute:

Color of the Year 2018 - Ultra Violet 18-3838
https://www.pantone.com/color-of-the-year-2018

Now let me show you how you can modify any aspect of QuickBase's CSS using a Service Worker by making several color and structural modifications to the Branding and Application Bars. Using an evergreen version of Chrome, FireFox, Opera, UC Browser or the Fall Creators Edition of Edge click the button labeled "reg.html" and dismiss the alert messages after it shows up:

If you now visit the various tables you will see that each table has a different color scheme for the Branding & Application Bar and the the fourth table has hidden the Branding Bar:

Home     - #74489D Dark Lavender
Table #1 - #6495ED Cornflower Blue
Table #2 - #ED6495 Light Crimson
Table #3 - #95ED64 Inchworm
Table #4 - #74489D Dark Lavender - Branding Bar Begone!

Table #1 Screenshot


Table #4 Screenshot (Branding Bar BEGONE!)
  

We achieved these various effects without modifying anything in the native QuickBase Branding configuration - rather we modified QuickBase's nav.css file "on-the-fly" during transport of the file from QuickBase's Server to your Browser's rendering engine using simple Service Workers. For demo purposes explained in the notes below, we actually used four slightly different Service Workers - one for each table. Here is the full code for sw1.js that controls Table #1 and links to all four Service Workers.

self.addEventListener("install", event => {
  event.waitUntil(self.skipWaiting());
});
self.addEventListener("activate", event => {
  event.waitUntil(self.clients.claim());
});
self.addEventListener("fetch", event => {
  var navCSS = "https://assets.quickbasecdn.net/res/873e615-1340/css/themes/classic/nav.css";
  
  var init = {
    status: 200,
    statusText: "OK",
    headers: {"Content-Type": "text/css"}
  };
  if (event.request.url == navCSS) {
    event.respondWith(
      fetch(event.request.url + "?rand=" + new Date().getTime()).then(response => {
        return response.text().then(resp => {
          var respModified = resp.replace(/74489D/g, "6495ED");
          return new Response(respModified, init);
        });
      })
    )
  }
});

Service Worker for Table #1
https://haversineconsulting.quickbase.com/db/bne59biqr?a=dbpage&pagename=sw1.js

Service Worker for Table #2
https://haversineconsulting.quickbase.com/db/bne59biqr?a=dbpage&pagename=sw2.js

Service Worker for Table #3
https://haversineconsulting.quickbase.com/db/bne59biqr?a=dbpage&pagename=sw3.js

Service Worker for Table #4
https://haversineconsulting.quickbase.com/db/bne59biqr?a=dbpage&pagename=sw4.js

In a nutshell. we un-cached the CSS file nav.css and substituted a new color for the default color #74489D in the original file and responded with the modified CSS content.  Yep that is all the code does - pretty simple.

What could be simpler and more obvious? - if you don't like the defaults just change them! 

In the case of the Table #4 we left the color alone and simply changed the Branding Bar to display: none. Begone Branding Bar! I did not like your looks and you were only taking up valuable screen space.

Service Worker Registration Page
https://haversineconsulting.quickbase.com/db/bne59biqr?a=pageedit&pagename=reg.html

Notes:

(1) Obviously this technique could be used to modify any aspect of QuickBase's CSS - not just colors. In fact, Service Workers can be used to  modify any aspect of QuickBase whatsoever and is why it is affectionately called god mode for QuickBase.

(2) Note the changes made by the Service Worker do not result in any jank (ie screen flicker) in the display. This is because the changes are made BEFORE your browser even starts rendering the page!

(3) Admittedly the Service Worker code is fragile because it makes assumptions about the structure of QuickBase's nav.css as well even the fact that such a file is even used to construct the page. These concerns are not even significant as the Service Worker could easily be written in another fashion. I explicitly avoided addressing this issue as it would only make the Service Worker longer and cloud understanding its utterly simple purpose (to modify QuickBase's native styling).

(4) MAJOR TAKEAWAYS:

• Rolling Stones Good
• Service Workers is god Mode for QuuickBase
• Agile Bad