feat(docs): "dark" as brand color

Author: rstoenescu

docs/src/assets/menu.js

@@ -44,7 +44,6 @@ const gettingStarted = [
   },
   {
     name: 'VS Code Configuration',
-    badge: 'new',
     path: 'vs-code-configuration'
   }
 ]
@@ -181,7 +180,6 @@ const cli = [
       },
       {
         name: 'CSS Preprocessors',
-        badge: 'new',
         path: 'css-preprocessors'
       },
       {
@@ -483,7 +481,6 @@ const style = [
   },
   {
     name: 'Theme Builder',
-    badge: 'new',
     path: 'theme-builder'
   },
   {
@@ -513,7 +510,6 @@ const style = [
   },
   {
     name: 'Sass/SCSS Variables',
-    badge: 'new',
     path: 'sass-scss-variables'
   },
   {
@@ -550,7 +546,6 @@ const layout = [
       },
       {
         name: 'Flex Playground',
-        badge: 'new',
         path: 'flex-playground'
       }
     ]
@@ -577,13 +572,11 @@ const layout = [
   },
   {
     name: 'Layout Builder',
-    badge: 'new',
     external: true,
     path: '/layout-builder'
   },
   {
     name: 'Layout Gallery',
-    badge: 'new',
     path: 'gallery'
   },
   {
@@ -1273,7 +1266,7 @@ module.exports = [
     path: 'quasar-utils',
     children: utils
   }
-  
+
   /*
   // FIREBASE DOCS: UNCOMMENT WHEN READY TO RELEASE
   ,{

docs/src/components/HeaderMenu.vue

@@ -51,6 +51,14 @@ div
           q-icon(name="style")
         q-item-section Theme Builder
 
+      q-item(clickable, to="/style/dark-mode")
+        q-item-section(avatar)
+          q-icon(name="invert_colors")
+        q-item-section
+          .row.no-wrap.items-center
+            span Dark Mode
+            q-badge.q-ml-sm new
+
       q-item(clickable, tag="a", href="/layout-builder", target="_blank")
         q-item-section.text-primary(avatar)
           q-icon(name="dashboard")

docs/src/components/page-parts/color-palette/BrandColors.vue

@@ -19,6 +19,7 @@ export default {
         'primary',
         'secondary',
         'accent',
+        'dark',
         'positive',
         'negative',
         'info',

docs/src/components/page-parts/theming/ThemeBuilder.vue

@@ -30,13 +30,14 @@
             q-toolbar
               q-btn(flat, dense, round, icon="arrow_back")
               q-space
+              q-toggle.q-mr-sm(dense, v-model="darkMode", :dark="dark.primary", color="red", label="Dark mode")
               q-btn(flat, dense, round, icon="search")
               q-btn(flat, dense, round, icon="menu")
 
             q-toolbar(inset)
               q-toolbar-title Quasar
 
-          .q-px-md.q-py-lg
+          .q-px-md.q-py-lg(:class="pageClass")
             .row.q-col-gutter-md
               .col-12.col-sm-6.col-md-4.col-lg-3(
                 v-for="color in sideColors"
@@ -48,7 +49,7 @@
                       .ellipsis.text-capitalize {{ color }}
                       q-space
                       q-icon(
-                        v-if="color !== 'secondary'"
+                        v-if="color !== 'secondary' && color !== 'dark'"
                         :name="$q.iconSet.type[color]"
                         size="24px"
                       )
@@ -117,6 +118,7 @@ export default {
         primary: '#027BE3',
         secondary: '#26A69A',
         accent: '#9C27B0',
+        dark: '#424242',
 
         positive: '#21BA45',
         negative: '#C10015',
@@ -128,17 +130,19 @@ export default {
         primary: true,
         secondary: true,
         accent: true,
+        dark: true,
 
         positive: true,
         negative: true,
         info: false,
         warning: false
       },
 
+      darkMode: false,
       exportDialog: false,
       exportTab: 'sass',
-      list: ['primary', 'secondary', 'accent', 'positive', 'negative', 'info', 'warning'],
-      sideColors: ['secondary', 'positive', 'negative', 'info', 'warning']
+      list: ['primary', 'secondary', 'accent', 'dark', 'positive', 'negative', 'info', 'warning'],
+      sideColors: ['secondary', 'dark', 'positive', 'negative', 'info', 'warning']
     }
   },
 
@@ -155,6 +159,10 @@ export default {
       this.update('accent', val)
     },
 
+    'colors.dark' (val) {
+      this.update('dark', val)
+    },
+
     'colors.positive' (val) {
       this.update('positive', val)
     },
@@ -173,11 +181,18 @@ export default {
   },
 
   computed: {
+    pageClass () {
+      return this.darkMode === true
+        ? 'bg-grey-10 text-white'
+        : 'bg-white text-black'
+    },
+
     sassExport () {
       return `// src/css/quasar.variables.sass\n\n` +
         `$primary   : ${this.colors.primary}\n` +
         `$secondary : ${this.colors.secondary}\n` +
         `$accent    : ${this.colors.accent}\n\n` +
+        `$dark      : ${this.colors.dark}\n\n` +
         `$positive  : ${this.colors.positive}\n` +
         `$negative  : ${this.colors.negative}\n` +
         `$info      : ${this.colors.info}\n` +
@@ -189,6 +204,7 @@ export default {
         `$primary   : ${this.colors.primary};\n` +
         `$secondary : ${this.colors.secondary};\n` +
         `$accent    : ${this.colors.accent};\n\n` +
+        `$dark      : ${this.colors.dark};\n\n` +
         `$positive  : ${this.colors.positive};\n` +
         `$negative  : ${this.colors.negative};\n` +
         `$info      : ${this.colors.info};\n` +
@@ -200,6 +216,7 @@ export default {
         `$primary   = ${this.colors.primary}\n` +
         `$secondary = ${this.colors.secondary}\n` +
         `$accent    = ${this.colors.accent}\n\n` +
+        `$dark      = ${this.colors.dark}\n\n` +
         `$positive  = ${this.colors.positive}\n` +
         `$negative  = ${this.colors.negative}\n` +
         `$info      = ${this.colors.info}\n` +
@@ -218,6 +235,8 @@ return {
         secondary: '${this.colors.secondary}',
         accent: '${this.colors.accent}',
 
+        dark: '${this.colors.dark}',
+
         positive: '${this.colors.positive}',
         negative: '${this.colors.negative}',
         info: '${this.colors.info}',
@@ -238,6 +257,8 @@ window.quasarConfig = {
     secondary: '${this.colors.secondary}',
     accent: '${this.colors.accent}',
 
+    dark: '${this.colors.dark}',
+
     positive: '${this.colors.positive}',
     negative: '${this.colors.negative}',
     info: '${this.colors.info}',
@@ -257,6 +278,8 @@ Vue.use(Quasar, {
       secondary: '${this.colors.secondary}',
       accent: '${this.colors.accent}',
 
+      dark: '${this.colors.dark}',
+
       positive: '${this.colors.positive}',
       negative: '${this.colors.negative}',
       info: '${this.colors.info}',

docs/src/pages/introduction-to-quasar.md

@@ -93,7 +93,7 @@ Quasar comes equipped with over 40 language packs out of the box. On top of that
 And finally, it’s worth mentioning the significant amount of time taken to write great, bloat-free, focused and complete documentation, so that developers can quickly pick up Quasar. We put special effort into our documentation to be sure there is no confusion.
 
 ## Underlying technologies
-[Vue](https://vuejs.org/), [Nodejs](https://nodejs.org/), [Webpack](https://webpack.js.org/), [Cordova](https://cordova.apache.org/), [Electron](https://electronjs.org/).
+[Vue](https://vuejs.org/), [Nodejs](https://nodejs.org/), [Webpack](https://webpack.js.org/), [Cordova](https://cordova.apache.org/), [Capacitor](https://capacitor.ionicframework.com), [Electron](https://electronjs.org/).
 
 Except for Vue, which takes half a day to pick up and will change you forever, there is no requirement for you to know the other technologies. They are all integrated and configured in Quasar for you.
 

docs/src/pages/quasar-plugins/dark.md

@@ -2,6 +2,9 @@
 title: Dark Plugin
 desc: A Quasar plugin to toggle or configure the Dark Mode state of your app.
 badge: v1.3+
+related:
+  - /style/dark-mode
+  - /style/theme-builder
 ---
 
 ::: tip

docs/src/pages/style/color-palette.md

@@ -12,8 +12,9 @@ Most of the colors that Quasar Components use are strongly linked with these thr
 
 <brand-colors />
 
-::: tip
-Also check [Theme Builder](/style/theme-builder) for a tool on customizing the brand colors of your website/app.
+::: tip TIPS
+* Also check [Theme Builder](/style/theme-builder) for a tool on customizing the brand colors of your website/app.
+* `dark` was added in Quasar v1.3.0.
 :::
 
 ## Color List

docs/src/pages/style/dark-mode.md

@@ -2,6 +2,9 @@
 title: Dark Mode
 desc: Handle dark mode with Quasar.
 badge: v1.3+
+related:
+  - /quasar-plugins/dark
+  - /style/theme-builder
 ---
 
 Dark Mode is a supplemental mode that can be used to display mostly dark surfaces on the UI. The design reduces the light emitted by device screens while maintaining the minimum color contrast ratios required for readability.
@@ -24,7 +27,7 @@ You can easily switch between Dark mode and light mode (which is default) throug
 
 ## How to style your app
 
-Since your app can be in Dark mode or not, you can easily style it by taking advantage of the `body` tag attached CSS class: `body--light` or `body--dark`. That is if you want to support both modes.
+Since your app can be in Dark mode or not, you can easily style it by taking advantage of the `body` tag attached CSS class: `body--light` or `body--dark`. **That is if you want to support both modes.**
 
 ```css
 .body--light {
@@ -35,3 +38,11 @@ Since your app can be in Dark mode or not, you can easily style it by taking adv
   /* ... */
 }
 ```
+
+Should you wish to override the default Dark mode page background color:
+
+```css
+body.body--dark {
+  background: #000
+}
+```

docs/src/pages/style/theme-builder.md

@@ -3,6 +3,8 @@ title: Theming
 desc: Theme builder for a Quasar app with which you can play with the brand colors.
 components:
   - theming/ThemeBuilder
+related:
+  - /style/dark-mode
 ---
 
 One of the most important parts of a website/app is to build a brand for it. First step is to choose the brand colors that you are going to use and this is what the tool below helps you with.
@@ -13,6 +15,7 @@ Click on the colored buttons besides the layout below and when you are ready, hi
 
 <theme-builder class="q-py-lg" />
 
-::: tip
-Sass/SCSS is only available if you have Quasar v1.1.1+ and your project is managed by Quasar CLI through @quasar/app v1.1.0+.
+::: tip TIPS
+* Sass/SCSS is only available if you have Quasar v1.1.1+ and your project is managed by Quasar CLI through @quasar/app v1.1.0+.
+* `dark` was added in Quasar v1.3.0.
 :::

ui/dev/components/form/checkbox.vue

@@ -18,6 +18,7 @@
         Indeterminate
       </p>
       <q-checkbox v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" label="Tap me to change between 3 states" />
+      <q-checkbox v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" color="accent" label="Tap me to change between 3 states" />
 
       <p class="caption">
         Tests