Dark mode for documentation of FeathersJS

dark-mode.css

body.dark, body.dark #app, body.dark .navbar, body.dark .sidebar, body.dark .links {
    background: rgb(13, 22, 28) !important;
    color: rgb(255, 255, 255);
}

body.dark .navbar{
    border-bottom: 1px solid rgba(128, 128, 128, 0.35);
}

body.dark .home-link img {
    filter: invert(1) brightness(2);
}

body.dark div[class*=language-] {
    background-color: rgb(44, 62, 80);
}

body.dark .content code {
    background-color: rgb(44, 62, 80);
    color: rgb(193, 193, 193);
}

body.dark .language-text code {
    color: rgb(177, 177, 177) !important;
}

body.dark .tabs-component-panels, .tabs-component-tabs li {
    background: rgba(0, 0, 0, 0);
    border: none;
}

body.dark .tabs-component-panels {
    border-top: 1px solid rgb(255, 255, 255);
}

body.dark a.sidebar-link {
    color: rgb(128, 128, 128);
}

body.dark code {
    color: rgb(220, 220, 220) !important;
}

body.dark a.nav-link.router-link-active {
    color: rgb(233, 21, 181);
}

body.dark .search-box input {
    filter: invert(1);
}

body.dark ul.nav-dropdown {
    background: rgb(13, 22, 28) !important;
}

body.dark tr:nth-child(2n) {
    background: rgba(0, 0, 0, 0);
}

body.dark blockquote {
    background: rgb(44, 62, 80);
}

body.dark blockquote, body.dark blockquote p {
    color: rgb(255, 255, 255);
}

body.dark blockquote a code, body.dark blockquote p code {
    background: #1c3042 !important;
}

body.dark a.sidebar-link:hover{
    color: #d513a5 !important;
}

#app, .navbar, .sidebar, .links,
.home-link img,
div[class*=language-],
.content code,
.language-text code,
.tabs-component-panels, .tabs-component-tabs li,
.tabs-component-panels,
code,
a.nav-link.router-link-active,
.search-box input,
ul.nav-dropdown,
tr:nth-child(2n),
blockquote,
blockquote, blockquote p {
    transition: all .5s ease;
}

dark-mode.js

class DarkMode {

  constructor(dark = false) {
    this._dark = dark;
    this._key = 'dark-mode-feathers'
    this._css = `body.dark,body.dark #app,body.dark .links,body.dark .navbar,body.dark .sidebar{background:#0d161c!important;color:#fff}body.dark .navbar{border-bottom:1px solid rgba(128,128,128,.35)}body.dark .home-link img{filter:invert(1) brightness(2)}body.dark div[class*=language-]{background-color:#2c3e50}body.dark .content code{background-color:#2c3e50;color:#c1c1c1}body.dark .language-text code{color:#b1b1b1!important}.tabs-component-tabs li,body.dark .tabs-component-panels{background:rgba(0,0,0,0);border:none}body.dark .tabs-component-panels{border-top:1px solid #fff}body.dark a.sidebar-link{color:grey}body.dark code{color:#dcdcdc!important}body.dark a.nav-link.router-link-active{color:#e915b5}body.dark .search-box input{filter:invert(1)}body.dark ul.nav-dropdown{background:#0d161c!important}body.dark tr:nth-child(2n){background:rgba(0,0,0,0)}body.dark blockquote{background:#2c3e50}body.dark blockquote,body.dark blockquote p{color:#fff}body.dark blockquote a code,body.dark blockquote p code{background:#1c3042!important}body.dark a.sidebar-link:hover{color:#d513a5!important}#app,.content code,.home-link img,.language-text code,.links,.navbar,.search-box input,.sidebar,.tabs-component-panels,.tabs-component-tabs li,a.nav-link.router-link-active,blockquote,blockquote p,code,div[class*=language-],tr:nth-child(2n),ul.nav-dropdown{transition:all .5s ease}`;
  }

  init() {
    this._addCSS();
    this._dark = (/true/i).test(window.localStorage.getItem(this._key));
    if (this._dark) this.toggle(false);
  }

  toggle(dark = this._dark) {
    if (dark) {
      this._dark = false;
      document.body.classList.remove('dark');
      this._remove();
    } else {
      document.body.classList.add('dark');
      this._save();
    }
  }

  _save() {
    window.localStorage.setItem(this._key, 'true');
  }

  _remove() {
    window.localStorage.removeItem(this._key);
  }

  _addCSS() {
    const styles = document.createElement('style');
    styles.innerHTML = this._css;
    document.head.appendChild(styles);
  }

}

dark-mode.min.css

body.dark,body.dark #app,body.dark .links,body.dark .navbar,body.dark .sidebar{background:#0d161c!important;color:#fff}body.dark .navbar{border-bottom:1px solid rgba(128,128,128,.35)}body.dark .home-link img{filter:invert(1) brightness(2)}body.dark div[class*=language-]{background-color:#2c3e50}body.dark .content code{background-color:#2c3e50;color:#c1c1c1}body.dark .language-text code{color:#b1b1b1!important}.tabs-component-tabs li,body.dark .tabs-component-panels{background:rgba(0,0,0,0);border:none}body.dark .tabs-component-panels{border-top:1px solid #fff}body.dark a.sidebar-link{color:grey}body.dark code{color:#dcdcdc!important}body.dark a.nav-link.router-link-active{color:#e915b5}body.dark .search-box input{filter:invert(1)}body.dark ul.nav-dropdown{background:#0d161c!important}body.dark tr:nth-child(2n){background:rgba(0,0,0,0)}body.dark blockquote{background:#2c3e50}body.dark blockquote,body.dark blockquote p{color:#fff}body.dark blockquote a code,body.dark blockquote p code{background:#1c3042!important}body.dark a.sidebar-link:hover{color:#d513a5!important}#app,.content code,.home-link img,.language-text code,.links,.navbar,.search-box input,.sidebar,.tabs-component-panels,.tabs-component-tabs li,a.nav-link.router-link-active,blockquote,blockquote p,code,div[class*=language-],tr:nth-child(2n),ul.nav-dropdown{transition:all .5s ease}

dark-mode.min.js

class DarkMode{constructor(a=!1){this._dark=a,this._key="dark-mode-feathers",this._css=`body.dark,body.dark #app,body.dark .links,body.dark .navbar,body.dark .sidebar{background:#0d161c!important;color:#fff}body.dark .navbar{border-bottom:1px solid rgba(128,128,128,.35)}body.dark .home-link img{filter:invert(1) brightness(2)}body.dark div[class*=language-]{background-color:#2c3e50}body.dark .content code{background-color:#2c3e50;color:#c1c1c1}body.dark .language-text code{color:#b1b1b1!important}.tabs-component-tabs li,body.dark .tabs-component-panels{background:rgba(0,0,0,0);border:none}body.dark .tabs-component-panels{border-top:1px solid #fff}body.dark a.sidebar-link{color:grey}body.dark code{color:#dcdcdc!important}body.dark a.nav-link.router-link-active{color:#e915b5}body.dark .search-box input{filter:invert(1)}body.dark ul.nav-dropdown{background:#0d161c!important}body.dark tr:nth-child(2n){background:rgba(0,0,0,0)}body.dark blockquote{background:#2c3e50}body.dark blockquote,body.dark blockquote p{color:#fff}body.dark blockquote a code,body.dark blockquote p code{background:#1c3042!important}body.dark a.sidebar-link:hover{color:#d513a5!important}#app,.content code,.home-link img,.language-text code,.links,.navbar,.search-box input,.sidebar,.tabs-component-panels,.tabs-component-tabs li,a.nav-link.router-link-active,blockquote,blockquote p,code,div[class*=language-],tr:nth-child(2n),ul.nav-dropdown{transition:all .5s ease}`}init(){this._addCSS(),this._dark=/true/i.test(window.localStorage.getItem(this._key)),this._dark&&this.toggle(!1)}toggle(a=this._dark){a?(this._dark=!1,document.body.classList.remove("dark"),this._remove()):(document.body.classList.add("dark"),this._save())}_save(){window.localStorage.setItem(this._key,"true")}_remove(){window.localStorage.removeItem(this._key)}_addCSS(){const a=document.createElement("style");a.innerHTML=this._css,document.head.appendChild(a)}}

Why? 😎

This gist is designed for add dark mode to FeathersJS documentation for don't burn your eyes 😵 and continue loving it! 😍

The code add to localStorage the value of dark mode true/false for remember your preferences.

How use 👀 👀

Copy and paste code of dark-mode.min.js and after write:

const dark = new DarkMode();
dark.init();

Toggle

dark.toggle();

I hope that Feathers team can add this dark mode to the documentation. Only need add dark-mode.min.js and a switch selector 😄