Add styling/visuals/css_variables.py

examples/styling/visuals/css_variables.py

@@ -0,0 +1,42 @@
+import numpy as np
+
+from bokeh.plotting import figure, show
+from bokeh.palettes import Spectral11
+
+N = 4000
+x = np.random.random(size=N) * 100
+y = np.random.random(size=N) * 100
+radii = np.random.random(size=N) * 1.5
+colors = np.random.choice(Spectral11, size=N)
+
+p = figure(width=400, height=400)
+p.circle(x, y, radius=radii, fill_color=colors, fill_alpha=0.6, line_color=None)
+
+p.stylesheets.append("""
+:host {
+    /* plot background */
+    --bk-background-fill-color: azure;
+
+    /* common axis line dash */
+    --bk-axis-line-dash: dotted;
+
+    /* common axis tick colors */
+    --tick-color: red;
+    --bk-major-tick-line-color: var(--tick-color);
+    --bk-minor-tick-line-color: var(--tick-color);
+}
+""")
+p.xaxis.stylesheets.append("""
+:host {
+    /* x-axis background color */
+    --bk-background-fill-color: yellow;
+}
+""")
+p.yaxis.stylesheets.append("""
+:host {
+    /* y-axis background color */
+    --bk-background-fill-color: pink;
+}
+""")
+
+show(p)