Add example with light and dark brands

brand/brand-simple-dark-mode/.gitignore

@@ -0,0 +1,2 @@
+/.quarto/
+_site/

brand/brand-simple-dark-mode/README.md

@@ -0,0 +1,70 @@
+# brand-simple-dark-mode
+
+
+<https://examples.quarto.pub/brand-simple-dark-mode/>
+
+This is a simple example of using
+[**brand.yml**](https://posit-dev.github.io/brand-yml/) across a range
+of Quarto supported formats with both a `light` and `dark` brand.
+
+The project is a website with a homepage, `index.qmd`, that is rendered
+to multiple formats: `html`, `revealjs`, and `typst`, and a dashboard,
+`dashboard.qmd`.
+
+Light and dark brand files are specified in `_quarto.yml`:
+
+``` yaml
+brand:
+  light: _brand.yml
+  dark: _brand-dark.yml
+```
+
+Where the `light` brand information is stored in `_brand.yml`:
+
+``` yaml
+color:
+  palette:
+    dark-grey: "#222222"
+    blue: "#ddeaf1"
+  background: blue
+  foreground: dark-grey
+  primary: black
+
+logo: 
+  medium: logo.png
+
+typography:
+  fonts:
+    - family: Jura
+      source: google
+  base: Jura
+  headings: Jura
+```
+
+And the `dark` brand information is stored in `_brand-dark.yml`:
+
+``` yaml
+color:
+  palette:
+    dark-grey: "#222222"
+    blue: "#ddeaf1"
+  background: dark-grey
+  foreground: blue
+  primary: white
+
+logo: 
+  medium: logo.png
+
+typography:
+  fonts:
+    - family: Jura
+      source: google
+  base: Jura
+  headings: Jura
+```
+
+To preview locally, run:
+
+``` bash
+quarto preview
+```

brand/brand-simple-dark-mode/README.qmd

@@ -0,0 +1,36 @@
+---
+title: brand-simple-dark-mode
+format: gfm
+---
+
+<https://examples.quarto.pub/brand-simple-dark-mode/>
+
+This is a simple example of using [**brand.yml**](https://posit-dev.github.io/brand-yml/) across a range of Quarto supported formats with both a `light` and `dark` brand.
+
+The project is a website with a homepage, `index.qmd`, that is rendered to multiple formats: `html`, `revealjs`, and `typst`, and a dashboard, `dashboard.qmd`.
+
+Light and dark brand files are specified in `_quarto.yml`:
+
+```{.yaml}
+brand:
+  light: _brand.yml
+  dark: _brand-dark.yml
+```
+
+Where the `light` brand information is stored in `_brand.yml`:
+
+```{.yaml}
+{{< include _brand.yml >}}
+```
+
+And the `dark` brand information is stored in `_brand-dark.yml`:
+
+```{.yaml}
+{{< include _brand-dark.yml >}}
+```
+
+To preview locally, run:
+
+```bash
+quarto preview
+```

brand/brand-simple-dark-mode/_brand-dark.yml

@@ -0,0 +1,17 @@
+color:
+  palette:
+    dark-grey: "#222222"
+    blue: "#ddeaf1"
+  background: dark-grey
+  foreground: blue
+  primary: white
+
+logo: 
+  medium: logo.png
+
+typography:
+  fonts:
+    - family: Jura
+      source: google
+  base: Jura
+  headings: Jura

brand/brand-simple-dark-mode/_brand.yml

@@ -0,0 +1,17 @@
+color:
+  palette:
+    dark-grey: "#222222"
+    blue: "#ddeaf1"
+  background: blue
+  foreground: dark-grey
+  primary: black
+
+logo: 
+  medium: logo.png
+
+typography:
+  fonts:
+    - family: Jura
+      source: google
+  base: Jura
+  headings: Jura

brand/brand-simple-dark-mode/_publish.yml

@@ -0,0 +1,5 @@
+- source: project
+  quarto-pub:
+    - id: e013ed23-f589-4305-9d1e-c320e6491939
+      url: https://examples.quarto.pub/brand-simple-dark-mode/
+

brand/brand-simple-dark-mode/_quarto.yml

@@ -0,0 +1,16 @@
+project:
+  type: website
+
+website:
+  title: "Simple Brand Example - Dark Mode"
+  navbar:
+    title: "Demo CO"
+    tools:
+      - icon: github
+        href: https://github.com/quarto-dev/quarto-examples/tree/main/brand/brand-simple-dark
+
+brand:
+  light: _brand.yml
+  dark: _brand-dark.yml
+
+

brand/brand-simple-dark-mode/dashboard.qmd

@@ -0,0 +1,24 @@
+---
+title: "Dashboard"
+format: dashboard
+---
+
+## Row
+
+::: {.valuebox icon="currency-dollar" color="primary"}
+Sales
+
+5.6k
+:::
+
+::: {.valuebox icon="graph-up" color="primary"}
+Change
+
+22%
+:::
+
+{{< lipsum 1 >}}
+
+## Row
+
+{{< placeholder 400 100 format=svg >}}

brand/brand-simple-dark-mode/index.qmd

@@ -0,0 +1,29 @@
+---
+title: "Brand - Dark mode"
+format:
+  html: 
+    respect-user-color-scheme: true
+    other-links:
+      - href: dashboard.html
+        icon: speedometer
+        text: Dashboard
+  typst: default
+  revealjs:
+    output-file: index-reveal.html
+  dashboard: 
+    output-file: index-dashboard.html
+---
+
+## Overview
+
+This is a document themed using [**brand.yml**](https://posit-dev.github.io/brand-yml/) with both light and dark versions.
+
+## Subheading
+
+{{< lipsum 1 >}}
+
+::: {.content-visible when-format="dashboard"}
+
+
+
+:::