Skip to content

Commit b1f8e41

Browse files
cwickhamcwickham
authored
Merge pull request #5 from quarto-dev/brand-example-dark
Add example with light and dark brands
2 parents 49cd294 + fdd2e48 commit b1f8e41

File tree

10 files changed

+216
-0
lines changed

10 files changed

+216
-0
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/.quarto/
2+
_site/

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# brand-simple-dark-mode
2+
3+
4+
<https://examples.quarto.pub/brand-simple-dark-mode/>
5+
6+
This is a simple example of using
7+
[**brand.yml**](https://posit-dev.github.io/brand-yml/) across a range
8+
of Quarto supported formats with both a `light` and `dark` brand.
9+
10+
The project is a website with a homepage, `index.qmd`, that is rendered
11+
to multiple formats: `html`, `revealjs`, and `typst`, and a dashboard,
12+
`dashboard.qmd`.
13+
14+
Light and dark brand files are specified in `_quarto.yml`:
15+
16+
``` yaml
17+
brand:
18+
light: _brand.yml
19+
dark: _brand-dark.yml
20+
```
21+
22+
Where the `light` brand information is stored in `_brand.yml`:
23+
24+
``` yaml
25+
color:
26+
palette:
27+
dark-grey: "#222222"
28+
blue: "#ddeaf1"
29+
background: blue
30+
foreground: dark-grey
31+
primary: black
32+
33+
logo:
34+
medium: logo.png
35+
36+
typography:
37+
fonts:
38+
- family: Jura
39+
source: google
40+
base: Jura
41+
headings: Jura
42+
```
43+
44+
And the `dark` brand information is stored in `_brand-dark.yml`:
45+
46+
``` yaml
47+
color:
48+
palette:
49+
dark-grey: "#222222"
50+
blue: "#ddeaf1"
51+
background: dark-grey
52+
foreground: blue
53+
primary: white
54+
55+
logo:
56+
medium: logo.png
57+
58+
typography:
59+
fonts:
60+
- family: Jura
61+
source: google
62+
base: Jura
63+
headings: Jura
64+
```
65+
66+
To preview locally, run:
67+
68+
``` bash
69+
quarto preview
70+
```

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: brand-simple-dark-mode
3+
format: gfm
4+
---
5+
6+
<https://examples.quarto.pub/brand-simple-dark-mode/>
7+
8+
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.
9+
10+
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`.
11+
12+
Light and dark brand files are specified in `_quarto.yml`:
13+
14+
```{.yaml}
15+
brand:
16+
light: _brand.yml
17+
dark: _brand-dark.yml
18+
```
19+
20+
Where the `light` brand information is stored in `_brand.yml`:
21+
22+
```{.yaml}
23+
{{< include _brand.yml >}}
24+
```
25+
26+
And the `dark` brand information is stored in `_brand-dark.yml`:
27+
28+
```{.yaml}
29+
{{< include _brand-dark.yml >}}
30+
```
31+
32+
To preview locally, run:
33+
34+
```bash
35+
quarto preview
36+
```

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
color:
2+
palette:
3+
dark-grey: "#222222"
4+
blue: "#ddeaf1"
5+
background: dark-grey
6+
foreground: blue
7+
primary: white
8+
9+
logo:
10+
medium: logo.png
11+
12+
typography:
13+
fonts:
14+
- family: Jura
15+
source: google
16+
base: Jura
17+
headings: Jura

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
color:
2+
palette:
3+
dark-grey: "#222222"
4+
blue: "#ddeaf1"
5+
background: blue
6+
foreground: dark-grey
7+
primary: black
8+
9+
logo:
10+
medium: logo.png
11+
12+
typography:
13+
fonts:
14+
- family: Jura
15+
source: google
16+
base: Jura
17+
headings: Jura

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
- source: project
2+
quarto-pub:
3+
- id: e013ed23-f589-4305-9d1e-c320e6491939
4+
url: https://examples.quarto.pub/brand-simple-dark-mode/
5+

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
project:
2+
type: website
3+
4+
website:
5+
title: "Simple Brand Example - Dark Mode"
6+
navbar:
7+
title: "Demo CO"
8+
tools:
9+
- icon: github
10+
href: https://github.com/quarto-dev/quarto-examples/tree/main/brand/brand-simple-dark
11+
12+
brand:
13+
light: _brand.yml
14+
dark: _brand-dark.yml
15+
16+

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
title: "Dashboard"
3+
format: dashboard
4+
---
5+
6+
## Row
7+
8+
::: {.valuebox icon="currency-dollar" color="primary"}
9+
Sales
10+
11+
5.6k
12+
:::
13+
14+
::: {.valuebox icon="graph-up" color="primary"}
15+
Change
16+
17+
22%
18+
:::
19+
20+
{{< lipsum 1 >}}
21+
22+
## Row
23+
24+
{{< placeholder 400 100 format=svg >}}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: "Brand - Dark mode"
3+
format:
4+
html:
5+
respect-user-color-scheme: true
6+
other-links:
7+
- href: dashboard.html
8+
icon: speedometer
9+
text: Dashboard
10+
typst: default
11+
revealjs:
12+
output-file: index-reveal.html
13+
dashboard:
14+
output-file: index-dashboard.html
15+
---
16+
17+
## Overview
18+
19+
This is a document themed using [**brand.yml**](https://posit-dev.github.io/brand-yml/) with both light and dark versions.
20+
21+
## Subheading
22+
23+
{{< lipsum 1 >}}
24+
25+
::: {.content-visible when-format="dashboard"}
26+
27+
28+
29+
:::

‎brand/brand-simple-dark-mode/logo.png‎

12.5 KB
Loading

0 commit comments

Comments
 (0)