Survey question
Who prefers dark mode on desktop/laptop?
Survey question
Who prefers light mode on desktop/laptop?
Survey question
Who doesn’t care, or switches between light and dark mode?
_brand.yml
color:
palette:
pure-white: '#ffffff'
soft-white: '#fefefe'
water-white: '#f8fdff'
leaf-green: '#a2cc84'
leaf-green-translucent: '#a2cc8440'
forest-green: '#416e49'
aqua-blue: '#62aec6'
moss-green: '#548e5b'
earth-brown: '#426e4b'
foreground: forest-green
background: water-white
primary: leaf-green
secondary: aqua-blue
tertiary: moss-green
success: forest-green
info: aqua-blue
warning: '#fcc865'
danger: '#d13030'
typography:
fonts:
- family: "Montserrat"
source: google
weight: [400, 500, 600, 700]
style: [normal, italic]
- family: "Merriweather"
source: google
weight: [300, 400, 700]
style: [normal, italic]
- family: "Fira Code"
source: google
weight: [400, 500]
base:
family: "Merriweather"
size: 32px
weight: 300
line-height: 1.6
headings:
family: "Montserrat"
weight: 600
style: normal
color: forest-green
line-height: 1.2
monospace-inline:
family: "Fira Code"
size: "0.9em"
weight: 400
background-color: leaf-green-translucent
monospace-block:
family: "Fira Code"
size: "0.95em"
weight: 400
background-color: leaf-green-translucent
line-height: 1.5
link:
weight: 400
color: moss-green
decoration: "underline"
logo:
medium: ecological-balance.png
_brand.yml
color:
palette:
quantum-navy: '#0e2d49'
deep-blue: '#0f2e4a'
midnight-blue: '#0d2c48'
accent-blue: '#102f4b'
light-gold: '#fcc865'
light-gold-translucent: '#fcc86540'
light-gold-more-translucent: '#fcc86520'
highlight-cream: '#ffffff'
light-navy: '#fafdff'
foreground: quantum-navy
background: light-navy
primary: deep-blue
secondary: accent-blue
tertiary: midnight-blue
success: '#00853e'
info: quantum-navy
warning: light-gold
danger: '#d13030'
typography:
fonts:
- family: "Space Mono"
source: google
weight: [400, 700]
style: [normal, italic]
- family: "Quicksand"
source: google
weight: [300, 400, 500, 600, 700]
style: [normal]
- family: "Source Code Pro"
source: google
weight: [400, 700]
base:
family: "Quicksand"
size: 32px
weight: 400
line-height: 1.6
headings:
family: "Quicksand"
weight: 700
style: normal
color: deep-blue
line-height: 1.2
monospace:
family: "Space Mono"
size: "0.9em"
weight: 400
monospace-inline:
family: "Space Mono"
size: "0.9em"
weight: 400
color: deep-blue
background-color: light-gold-translucent
monospace-block:
family: "Source Code Pro"
size: "0.9em"
weight: 400
color: highlight-cream
background-color: light-gold-translucent
line-height: 1.5
link:
weight: 600
color: deep-blue
decoration: "underline"
background-color: light-gold-more-translucent
logo:
medium: quantum-linguistics.png
_brand.yml
color:
palette:
climate-orange: '#f39f88'
deep-orange: '#f29e87'
bright-coral: '#f3a088'
soft-peach: '#f5a58c'
charcoal-black: '#050000'
soft-charcoal: '#05000060'
pure-black: '#000000'
pure-white: '#ffffff'
climate-code: '#22ff2210'
foreground: charcoal-black
background: climate-orange
primary: '#081040'
secondary: deep-orange
tertiary: soft-peach
success: '#2e8b57'
info: bright-coral
warning: '#fcc865'
danger: '#d13030'
typography:
fonts:
- family: "Roboto"
source: google
weight: [300, 400, 500, 700]
style: [normal, italic]
- family: "Oswald"
source: google
weight: [400, 500, 600]
style: [normal]
- family: "Inconsolata"
source: google
weight: [400, 700]
base:
family: "Roboto"
size: 32px
weight: 400
line-height: 1.6
headings:
family: "Oswald"
weight: 600
style: normal
color: soft-charcoal
line-height: 1.2
monospace:
family: "Inconsolata"
size: "0.9em"
weight: 400
monospace-inline:
family: "Inconsolata"
size: "0.95em"
weight: 400
background-color: climate-code
color: charcoal-black
monospace-block:
family: "Inconsolata"
size: "1em"
weight: 400
background-color: climate-code
line-height: 1.5
link:
weight: 500
decoration: "none"
logo:
medium: climate-insight.png
_brand.yml
color:
palette:
light-gray: '#efefef'
deep-blue: '#121933'
navy-blue: '#121833'
midnight-blue: '#121934'
soft-gray: '#f8f8f8'
orion-green: '#52AC5A'
magenta: '#8b38a2'
magenta-translucent: '#8b38a250'
royal-purple: '#381953'
cosmic-black: '#000000'
foreground: navy-blue
background: light-gray
primary: deep-blue
secondary: royal-purple
tertiary: soft-gray
success: '#416e49'
info: midnight-blue
warning: '#fcc865'
danger: '#d13030'
typography:
fonts:
- family: "Exo 2"
source: google
weight: [300, 400, 500, 700]
style: [normal, italic]
- family: "Titillium Web"
source: google
weight: [300, 400, 600, 700]
style: [normal, italic]
- family: "JetBrains Mono"
source: google
weight: [400, 600]
style: [normal]
base:
family: "Titillium Web"
size: 32px
weight: 400
line-height: 1.5
headings:
family: "Exo 2"
weight: 600
style: normal
color: orion-green
line-height: 1.2
monospace:
family: "JetBrains Mono"
size: "0.9em"
weight: 400
monospace-inline:
family: "JetBrains Mono"
size: "0.9em"
weight: 400
color: deep-blue
background-color: magenta-translucent
monospace-block:
family: "JetBrains Mono"
size: "0.95em"
weight: 400
color: light-gray
background-color: magenta-translucent
line-height: 1.5
link:
weight: 500
color: deep-blue
decoration: "none"
logo:
medium: orions-reach.png
_brand.yml
color:
palette:
ivory-white: '#fefefe'
sea-white: '#f8fffc'
pure-white: '#ffffff'
slate-grey: '#fdfdfd'
deep-black: '#000000'
light-orange: '#F45F50'
deep-orange: '#CC3936'
crimson: '#5c0000'
light-orange-translucent: '#F45F5040'
deep-aqua: '#005F70'
light-aqua: '#6BCCCE'
aqua-accent: '#65cdd0'
foreground: deep-black
background: sea-white
primary: deep-aqua
secondary: aqua-accent
tertiary: slate-grey
success: '#008060'
info: crimson
warning: '#f77865'
danger: '#780000'
typography:
fonts:
- family: "Libre Baskerville"
source: google
weight: [400, 700]
style: [normal, italic]
- family: "Work Sans"
source: google
weight: [300, 400, 500, 600]
style: [normal]
- family: "IBM Plex Mono"
source: google
weight: [400, 600]
base:
family: "Work Sans"
size: 32px
weight: 400
line-height: 1.5
headings:
family: "Libre Baskerville"
weight: 700
style: normal
color: deep-aqua
line-height: 1.3
monospace:
family: "IBM Plex Mono"
size: "0.9em"
weight: 400
monospace-inline:
family: "IBM Plex Mono"
size: "0.9em"
weight: 400
color: crimson
background-color: light-orange-translucent
monospace-block:
family: "IBM Plex Mono"
size: "0.95em"
weight: 400
color: pure-white
background-color: light-orange-translucent
line-height: 1.5
link:
weight: 500
decoration: "underline"
logo:
medium: tidal-equity.png
_brand.yml
color:
background:
light: '#f3f3f8'
dark: '#0f0412'
foreground:
light: '#113322'
dark: '#f8f8f8'
logo:
small:
light: sun-face.png
dark: moon-face.png
typography:
base:
family: Helvetica Neue
size: 32px
headings:
family: American Typewriter
color:
light: '#11226d'
dark: '#eeeeff'
monospace-inline:
background-color:
dark: '#ffffff20'
monospace-block:
background-color:
dark: '#ffffff20'
respect-user-color-scheme: true_brand.yml
color:
background:
light: '#f3f3f8'
dark: '#0f0412'
foreground:
light: '#113322'
dark: '#f8f8f8'
logo:
small:
light: sun-face.png
dark: moon-face.png
typography:
base:
family: Helvetica Neue
size: 32px
headings:
family: American Typewriter
color:
light: '#11226d'
dark: '#eeeeff'
monospace-inline:
background-color:
dark: '#ffffff20'
monospace-block:
background-color:
dark: '#ffffff20'
matplotlib-renderings.py
#| renderings: [light, dark]
import numpy as np
import matplotlib.pyplot as plt
from quarto import theme_colors_matplotlib;
r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
light_style()
fig, ax = plt.subplots(
subplot_kw={'projection': 'polar'}
)
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
dark_style()
fig, ax = plt.subplots(
subplot_kw={'projection': 'polar'}
)
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
plotnine-renderings.py
#| renderings: [light, dark]
from plotnine import *
import numpy as np
import pandas as pd
r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
df = pd.DataFrame(
{'x': r*np.cos(theta),
'y': r*np.sin(theta)})
plot = (ggplot(df, aes('x', 'y'))
+ geom_path(color="blue")
+ coord_fixed(ratio=1)
+ theme_minimal())
(plot + light_theme).show()
(plot + dark_theme).show()
altair-renderings.py
#| renderings: [light, dark]
r = np.arange(0, 2, 0.01); theta = 2*np.pi*r
df = pd.DataFrame({
'x': r*np.cos(theta),
'y': r*np.sin(theta),
'idx': range(len(r))})
chart = (alt.Chart(df).mark_line(color='blue')
.encode(x='x', y='y', order='idx')
.properties(width=450, height=400))
alt.theme.enable('light_theme')
chart.show()
alt.theme.enable('dark_theme')
chart.show()
plotly-renderings.R
#| renderings: [light, dark]
t <- seq(0, 720, length.out=400)
r <- seq(0, 2, length.out=400)
fig <- plot_ly(width=400, height=400,
r=r, theta=t, type='scatterpolar',
mode='lines', line=list(color='blue')) %>%
layout(
polar=list(bgcolor="transparent"),
paper_bgcolor="transparent")
fig |> light_theme()
fig |> dark_theme()
plotly-renderings.py
#| renderings: [light, dark]
theta = np.linspace(0, 720, 400)
r = np.linspace(0, 2, 400)
transparent = "rgba(0,0,0,0)"
fig = go.Figure(
go.Scatterpolar(
r=r, theta=theta,
mode='lines', line=dict(color='blue')
))
fig.update_layout(width=400, height=400,
margin=dict(l=35, r=25, t=25, b=25),
polar=dict(bgcolor=transparent),
paper_bgcolor=transparent)
fig.update_layout(template='light_brand')
display(fig)
fig.update_layout(template='dark_brand')
display(fig)
bokeh-renderings.py
#| renderings: [light, dark]
from bokeh.plotting import figure, show
import numpy as np
r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
p = figure(
width=300, height=300,
toolbar_location=None, match_aspect=True
)
p.line(
r * np.cos(theta),
r * np.sin(theta),
line_color="blue"
)
light_theme()
show(p)
dark_theme()
show(p)
and dark mode in 
See the talk repo for links!
https://github.com/gordonwoodhull/brand-yml-lightning-talk/blob/main/links.md
and dark mode in
brand.yml
| language | package | repo | docs |
|---|---|---|---|
| R | brand.yml |
repo | docs |
| Python | brand_yml |
repo | docs |
theme helpers demo
| language | package | repo | release | docs |
|---|---|---|---|---|
| R | quarto-r |
repo | 1.5.0 | docs |
| Python | quarto-python |
repo | 0.2.01 | docs |