[Tidy] Update chart template colors and tidy (#963)

Co-authored-by: Antony Milne <[email protected]>
mckinsey · Jan 22, 2025 · 451b758 · 451b758
1 parent 0d298c7
commit 451b758
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 132 deletions.
diff --git a/vizro-core/changelog.d/20250121_170108_huong_li_nguyen_tidy_chart_template.md b/vizro-core/changelog.d/20250121_170108_huong_li_nguyen_tidy_chart_template.md
@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/src/vizro/_themes/_color_values.py b/vizro-core/src/vizro/_themes/_color_values.py
@@ -1,56 +1,25 @@
 """Colors for plotly templates."""
 
 COLORS = {
-    "WHITE_12": "rgba(255,255,255,0.10)",
-    "WHITE_30": "rgba(255,255,255,0.30)",
-    "WHITE_55": "rgba(255,255,255,0.55)",
-    "WHITE_85": "rgba(255,255,255,0.85)",
-    "BLACK_12": "rgba(0,0,0,0.10)",
-    "BLACK_30": "rgba(0,0,0,0.30)",
-    "BLACK_55": "rgba(0,0,0,0.55)",
-    "BLACK_85": "rgba(0,0,0,0.85)",
-    "BLACK_100": "rgba(255,255,255,1)",
-    # NEW COLORS
-    "Surface_01": "#101D29",
-    "GREY_20": "rgb(218,222,226)",
-    "GREY_30": "#C0C6CB",
-    "GREY_60": "#64717A",
-    "GREY_55": "#747F88",
-    "DARK_BG01": "#232632",
-    "DARK_BG02": "#1B1E2A",
+    # GRID COLOR - var(--fill-subtle) / var(--bs-border-color)
+    "WHITE_12": "rgba(255, 255, 255, 0.1)",
+    "BLACK_12": "rgba(20, 23, 33, 0.1) ",
+    # AXIS COLOR - var(--fill-disabled) / var(--bs-tertiary-color)
+    "WHITE_30": "rgba(255, 255, 255, 0.30)",
+    "BLACK_30": "rgba(20, 23, 33, 0.30)",
+    # FONT COLOR SECONDARY - var(--text-secondary) / var(--bs-secondary)
+    "WHITE_55": "rgba(255, 255, 255, 0.6)",
+    "BLACK_55": "rgba(20, 23, 33, 0.6)",
+    # FONT COLOR PRIMARY - var(--text-primary) / var(--bs-primary)
+    "WHITE_85": "rgba(255, 255, 255, 0.88)",
+    "BLACK_85": "rgba(20, 23, 33, 0.88)",
+    # BG COLOR - var(--bs-body-bg), var(--surfaces-bg03) - dark, var(--surfaces-bg01) - light
     "DARK_BG03": "#141721",
     "Light_BG01": "#FFFFFF",
-    "Light_BG02": "f5f6f6",
-    "Light_BG03": "#E6E8EA",
-    "Light50": "#ffffff",
-    "Light50_10%": "rgba(255,255,255,0.10)",
-    "Light50_24%": "rgba(255,255,255,0.24)",
-    "Light50_38%": "rgba(255,255,255,0.38)",
-    "Light50_60%": "rgba(255,255,255,0.60)",
-    "Light50_88%": "rgba(255,255,255,0.88)",
-    "Light100": "#fafafb",
-    "Light200": "#f5f6f6",
-    "Light300": "#f0f1f2",
-    "Light400": "#ebedee",
-    "Light500": "#e6e8ea",
-    "Light600": "#e2e4e6",
-    "Light700": "#dddfe1",
-    "Light800": "#d8dadd",
-    "Light900": "#d3d6d9",
-    "Dark900_10%": "rgba(20,23,33,0.10)",
-    "Dark900_24%": "rgba(20,23,33,0.24)",
-    "Dark900_38%": "rgba(20,23,33,0.38)",
-    "Dark900_60%": "rgba(20,23,33,0.60)",
-    "Dark900_88%": "rgba(20,23,33,0.88)",
-    "Dark100": "#333640",
-    "Dark200": "#2f323c",
-    "Dark300": "#2b2e39",
-    "Dark400": "#272a35",
-    "Dark500": "#232632",
-    "Dark600": "#1f222e",
-    "Dark700": "#1b1e2a",
-    "Dark800": "#181b26",
-    "Dark900": "#141721",
+    # OTHER
+    "GREY_30": "#C0C6CB",
+    "GREY_55": "#747F88",
+    # SEQUENCES
     "DIVERGING_PURPLE_ORANGE": [
         "#0f237c",
         "#2b3794",

diff --git a/vizro-core/src/vizro/_themes/_templates/common_values.py b/vizro-core/src/vizro/_themes/_templates/common_values.py
@@ -2,6 +2,8 @@
 
 from plotly import graph_objects as go
 
+from vizro._themes._color_values import COLORS
+
 
 def create_template_common():
     """Create general themed plotly template.
@@ -42,6 +44,13 @@ def create_template_common():
         margin_b=64,
         margin_pad=0,
         margin_autoexpand=True,
+        # Diverging, sequential and sequentialminus colorscale will only be applied automatically if
+        # `coloraxis_autocolorscale=True`. Otherwise, they have no effect, and the default for continuous color scales
+        # will be the color sequence applied to ["colorscale"]["sequential"].
+        colorway=COLORS["DISCRETE_10"],
+        colorscale_diverging=COLORS["DIVERGING_RED_CYAN"],
+        colorscale_sequential=COLORS["SEQUENTIAL_CYAN"],
+        colorscale_sequentialminus=COLORS["SEQUENTIAL_RED"][::-1],
         coloraxis_autocolorscale=False,  # Set to False as otherwise users cannot customize via `color_continous_scale`
         coloraxis_colorbar_outlinewidth=0,
         coloraxis_colorbar_thickness=20,

diff --git a/vizro-core/src/vizro/_themes/_templates/template_dark.py b/vizro-core/src/vizro/_themes/_templates/template_dark.py
@@ -6,6 +6,13 @@
 from vizro._themes._color_values import COLORS
 from vizro._themes._templates.common_values import create_template_common
 
+# VARIABLES
+FONT_COLOR_PRIMARY = COLORS["WHITE_85"]
+FONT_COLOR_SECONDARY = COLORS["WHITE_55"]
+BG_COLOR = COLORS["DARK_BG03"]
+GRID_COLOR = COLORS["WHITE_12"]
+AXIS_COLOR = COLORS["WHITE_30"]
+
 
 def create_template_dark() -> Template:
     """Create dark themed plotly template.
@@ -17,68 +24,61 @@ def create_template_dark() -> Template:
     template_dark = create_template_common()
 
     # LAYOUT
-    template_dark["layout"]["font"]["color"] = COLORS["WHITE_85"]
-    template_dark["layout"]["title"]["font"]["color"] = COLORS["WHITE_85"]
-    template_dark["layout"]["legend"]["font"]["color"] = COLORS["WHITE_85"]
-    template_dark["layout"]["legend"]["title"]["font"]["color"] = COLORS["WHITE_85"]
-    template_dark["layout"]["paper_bgcolor"] = COLORS["DARK_BG03"]
-    template_dark["layout"]["plot_bgcolor"] = COLORS["DARK_BG03"]
-    template_dark["layout"]["geo"]["bgcolor"] = COLORS["DARK_BG03"]
-    template_dark["layout"]["geo"]["lakecolor"] = COLORS["DARK_BG03"]
-    template_dark["layout"]["geo"]["landcolor"] = COLORS["DARK_BG03"]
-    template_dark["layout"]["polar"]["bgcolor"] = COLORS["DARK_BG03"]
-    template_dark["layout"]["polar"]["angularaxis"]["gridcolor"] = COLORS["WHITE_12"]
-    template_dark["layout"]["polar"]["angularaxis"]["linecolor"] = COLORS["WHITE_30"]
-    template_dark["layout"]["polar"]["radialaxis"]["gridcolor"] = COLORS["WHITE_12"]
-    template_dark["layout"]["polar"]["radialaxis"]["linecolor"] = COLORS["WHITE_30"]
-    template_dark["layout"]["ternary"]["bgcolor"] = COLORS["DARK_BG03"]
-    template_dark["layout"]["ternary"]["aaxis"]["gridcolor"] = COLORS["WHITE_12"]
-    template_dark["layout"]["ternary"]["aaxis"]["linecolor"] = COLORS["WHITE_30"]
-    template_dark["layout"]["ternary"]["baxis"]["gridcolor"] = COLORS["WHITE_12"]
-    template_dark["layout"]["ternary"]["baxis"]["linecolor"] = COLORS["WHITE_30"]
-    template_dark["layout"]["ternary"]["caxis"]["gridcolor"] = COLORS["WHITE_12"]
-    template_dark["layout"]["ternary"]["caxis"]["linecolor"] = COLORS["WHITE_30"]
+    template_dark["layout"]["font"]["color"] = FONT_COLOR_PRIMARY
+    template_dark["layout"]["title"]["font"]["color"] = FONT_COLOR_PRIMARY
+    template_dark["layout"]["legend"]["font"]["color"] = FONT_COLOR_PRIMARY
+    template_dark["layout"]["legend"]["title"]["font"]["color"] = FONT_COLOR_PRIMARY
+    template_dark["layout"]["paper_bgcolor"] = BG_COLOR
+    template_dark["layout"]["plot_bgcolor"] = BG_COLOR
+    template_dark["layout"]["geo"]["bgcolor"] = BG_COLOR
+    template_dark["layout"]["geo"]["lakecolor"] = BG_COLOR
+    template_dark["layout"]["geo"]["landcolor"] = BG_COLOR
+    template_dark["layout"]["polar"]["bgcolor"] = BG_COLOR
+    template_dark["layout"]["polar"]["angularaxis"]["gridcolor"] = GRID_COLOR
+    template_dark["layout"]["polar"]["angularaxis"]["linecolor"] = AXIS_COLOR
+    template_dark["layout"]["polar"]["radialaxis"]["gridcolor"] = GRID_COLOR
+    template_dark["layout"]["polar"]["radialaxis"]["linecolor"] = AXIS_COLOR
+    template_dark["layout"]["ternary"]["bgcolor"] = BG_COLOR
+    template_dark["layout"]["ternary"]["aaxis"]["gridcolor"] = GRID_COLOR
+    template_dark["layout"]["ternary"]["aaxis"]["linecolor"] = AXIS_COLOR
+    template_dark["layout"]["ternary"]["baxis"]["gridcolor"] = GRID_COLOR
+    template_dark["layout"]["ternary"]["baxis"]["linecolor"] = AXIS_COLOR
+    template_dark["layout"]["ternary"]["caxis"]["gridcolor"] = GRID_COLOR
+    template_dark["layout"]["ternary"]["caxis"]["linecolor"] = AXIS_COLOR
     if "map" in template_dark["layout"]:
         # "map" only available in plotly>=5.24.0, will replace "mapbox" soon. Until then, we need to set both.
         # We need the if statement here in case the user is using an older version of plotly.
         template_dark["layout"]["map"]["style"] = "carto-darkmatter"
     template_dark["layout"]["mapbox"]["style"] = "carto-darkmatter"
-    template_dark["layout"]["coloraxis"]["colorbar"]["tickcolor"] = COLORS["WHITE_30"]
-    template_dark["layout"]["coloraxis"]["colorbar"]["tickfont"]["color"] = COLORS["WHITE_55"]
-    template_dark["layout"]["coloraxis"]["colorbar"]["title"]["font"]["color"] = COLORS["WHITE_55"]
-    # Diverging, sequential and sequentialminus colorscale will only be applied automatically if
-    # `coloraxis_autocolorscale=True`. Otherwise, they have no effect, and the default for continuous color scales
-    # will be the color sequence applied to ["colorscale"]["sequential"].
-    template_dark["layout"]["colorscale"]["diverging"] = COLORS["DIVERGING_RED_CYAN"]
-    template_dark["layout"]["colorscale"]["sequential"] = COLORS["SEQUENTIAL_CYAN"]
-    template_dark["layout"]["colorscale"]["sequentialminus"] = COLORS["SEQUENTIAL_RED"][::-1]
-    template_dark["layout"]["colorway"] = COLORS["DISCRETE_10"]
+    template_dark["layout"]["coloraxis"]["colorbar"]["tickcolor"] = AXIS_COLOR
+    template_dark["layout"]["coloraxis"]["colorbar"]["tickfont"]["color"] = FONT_COLOR_SECONDARY
+    template_dark["layout"]["coloraxis"]["colorbar"]["title"]["font"]["color"] = FONT_COLOR_SECONDARY
 
     # X AXIS
-    template_dark["layout"]["xaxis"]["title"]["font"]["color"] = COLORS["WHITE_85"]
-    template_dark["layout"]["xaxis"]["tickcolor"] = COLORS["WHITE_30"]
-    template_dark["layout"]["xaxis"]["tickfont"]["color"] = COLORS["WHITE_55"]
-    template_dark["layout"]["xaxis"]["linecolor"] = COLORS["WHITE_30"]
-    template_dark["layout"]["xaxis"]["gridcolor"] = COLORS["WHITE_12"]
+    template_dark["layout"]["xaxis"]["title"]["font"]["color"] = FONT_COLOR_PRIMARY
+    template_dark["layout"]["xaxis"]["tickcolor"] = AXIS_COLOR
+    template_dark["layout"]["xaxis"]["tickfont"]["color"] = FONT_COLOR_SECONDARY
+    template_dark["layout"]["xaxis"]["linecolor"] = AXIS_COLOR
+    template_dark["layout"]["xaxis"]["gridcolor"] = GRID_COLOR
 
     # Y AXIS
-    template_dark["layout"]["yaxis"]["title"]["font"]["color"] = COLORS["WHITE_85"]
-    template_dark["layout"]["yaxis"]["tickcolor"] = COLORS["WHITE_30"]
-    template_dark["layout"]["yaxis"]["tickfont"]["color"] = COLORS["WHITE_55"]
-    template_dark["layout"]["yaxis"]["linecolor"] = COLORS["WHITE_30"]
-    template_dark["layout"]["yaxis"]["gridcolor"] = COLORS["WHITE_12"]
+    template_dark["layout"]["yaxis"]["title"]["font"]["color"] = FONT_COLOR_PRIMARY
+    template_dark["layout"]["yaxis"]["tickcolor"] = AXIS_COLOR
+    template_dark["layout"]["yaxis"]["tickfont"]["color"] = FONT_COLOR_SECONDARY
+    template_dark["layout"]["yaxis"]["linecolor"] = AXIS_COLOR
+    template_dark["layout"]["yaxis"]["gridcolor"] = GRID_COLOR
 
     # ANNOTATIONS
     template_dark["layout"]["annotationdefaults"] = {
-        "font": {"color": COLORS["WHITE_85"], "size": 14},
+        "font": {"color": FONT_COLOR_PRIMARY, "size": 14},
         "showarrow": False,
     }
 
     # CHART TYPES
     template_dark.data.bar = [
         go.Bar(
             # This hides the border lines in a bar chart created from unaggregated data.
-            marker={"line": {"color": template_dark["layout"]["paper_bgcolor"]}},
+            marker={"line": {"color": template_dark.layout.paper_bgcolor}},
         )
     ]
 

diff --git a/vizro-core/src/vizro/_themes/_templates/template_light.py b/vizro-core/src/vizro/_themes/_templates/template_light.py
@@ -6,6 +6,13 @@
 from vizro._themes._color_values import COLORS
 from vizro._themes._templates.common_values import create_template_common
 
+# VARIABLES
+FONT_COLOR_PRIMARY = COLORS["BLACK_85"]
+FONT_COLOR_SECONDARY = COLORS["BLACK_55"]
+BG_COLOR = COLORS["Light_BG01"]
+GRID_COLOR = COLORS["BLACK_12"]
+AXIS_COLOR = COLORS["BLACK_30"]
+
 
 def create_template_light() -> Template:
     """Create light themed plotly template.
@@ -18,65 +25,61 @@ def create_template_light() -> Template:
     template_light = create_template_common()
 
     # LAYOUT
-    template_light["layout"]["font"]["color"] = COLORS["BLACK_85"]
-    template_light["layout"]["title"]["font"]["color"] = COLORS["BLACK_85"]
-    template_light["layout"]["legend"]["font"]["color"] = COLORS["BLACK_85"]
-    template_light["layout"]["legend"]["title"]["font"]["color"] = COLORS["BLACK_85"]
-    template_light["layout"]["paper_bgcolor"] = COLORS["Light_BG01"]
-    template_light["layout"]["plot_bgcolor"] = COLORS["Light_BG01"]
-    template_light["layout"]["geo"]["bgcolor"] = COLORS["Light_BG01"]
-    template_light["layout"]["geo"]["lakecolor"] = COLORS["Light_BG01"]
-    template_light["layout"]["geo"]["landcolor"] = COLORS["Light_BG01"]
-    template_light["layout"]["polar"]["bgcolor"] = COLORS["Light_BG01"]
-    template_light["layout"]["polar"]["angularaxis"]["gridcolor"] = COLORS["BLACK_12"]
-    template_light["layout"]["polar"]["angularaxis"]["linecolor"] = COLORS["BLACK_30"]
-    template_light["layout"]["polar"]["radialaxis"]["gridcolor"] = COLORS["BLACK_12"]
-    template_light["layout"]["polar"]["radialaxis"]["linecolor"] = COLORS["BLACK_30"]
-    template_light["layout"]["ternary"]["bgcolor"] = COLORS["Light_BG01"]
-    template_light["layout"]["ternary"]["aaxis"]["gridcolor"] = COLORS["BLACK_12"]
-    template_light["layout"]["ternary"]["aaxis"]["linecolor"] = COLORS["BLACK_30"]
-    template_light["layout"]["ternary"]["baxis"]["gridcolor"] = COLORS["BLACK_12"]
-    template_light["layout"]["ternary"]["baxis"]["linecolor"] = COLORS["BLACK_30"]
-    template_light["layout"]["ternary"]["caxis"]["gridcolor"] = COLORS["BLACK_12"]
-    template_light["layout"]["ternary"]["caxis"]["linecolor"] = COLORS["BLACK_30"]
+    template_light["layout"]["font"]["color"] = FONT_COLOR_PRIMARY
+    template_light["layout"]["title"]["font"]["color"] = FONT_COLOR_PRIMARY
+    template_light["layout"]["legend"]["font"]["color"] = FONT_COLOR_PRIMARY
+    template_light["layout"]["legend"]["title"]["font"]["color"] = FONT_COLOR_PRIMARY
+    template_light["layout"]["paper_bgcolor"] = BG_COLOR
+    template_light["layout"]["plot_bgcolor"] = BG_COLOR
+    template_light["layout"]["geo"]["bgcolor"] = BG_COLOR
+    template_light["layout"]["geo"]["lakecolor"] = BG_COLOR
+    template_light["layout"]["geo"]["landcolor"] = BG_COLOR
+    template_light["layout"]["polar"]["bgcolor"] = BG_COLOR
+    template_light["layout"]["polar"]["angularaxis"]["gridcolor"] = GRID_COLOR
+    template_light["layout"]["polar"]["angularaxis"]["linecolor"] = AXIS_COLOR
+    template_light["layout"]["polar"]["radialaxis"]["gridcolor"] = GRID_COLOR
+    template_light["layout"]["polar"]["radialaxis"]["linecolor"] = AXIS_COLOR
+    template_light["layout"]["ternary"]["bgcolor"] = BG_COLOR
+    template_light["layout"]["ternary"]["aaxis"]["gridcolor"] = GRID_COLOR
+    template_light["layout"]["ternary"]["aaxis"]["linecolor"] = AXIS_COLOR
+    template_light["layout"]["ternary"]["baxis"]["gridcolor"] = GRID_COLOR
+    template_light["layout"]["ternary"]["baxis"]["linecolor"] = AXIS_COLOR
+    template_light["layout"]["ternary"]["caxis"]["gridcolor"] = GRID_COLOR
+    template_light["layout"]["ternary"]["caxis"]["linecolor"] = AXIS_COLOR
     if "map" in template_light["layout"]:
         # "map" only available in plotly>=5.24.0, will replace "mapbox" soon. Until then, we need to set both.
         # We need the if statement here in case the user is using an older version of plotly.
         template_light["layout"]["map"]["style"] = "carto-positron"
     template_light["layout"]["mapbox"]["style"] = "carto-positron"
-    template_light["layout"]["coloraxis"]["colorbar"]["tickcolor"] = COLORS["BLACK_30"]
-    template_light["layout"]["coloraxis"]["colorbar"]["tickfont"]["color"] = COLORS["BLACK_55"]
-    template_light["layout"]["coloraxis"]["colorbar"]["title"]["font"]["color"] = COLORS["BLACK_55"]
-    template_light["layout"]["colorscale"]["diverging"] = COLORS["DIVERGING_RED_CYAN"]
-    template_light["layout"]["colorscale"]["sequential"] = COLORS["SEQUENTIAL_CYAN"]
-    template_light["layout"]["colorscale"]["sequentialminus"] = COLORS["SEQUENTIAL_RED"][::-1]
-    template_light["layout"]["colorway"] = COLORS["DISCRETE_10"]
+    template_light["layout"]["coloraxis"]["colorbar"]["tickcolor"] = AXIS_COLOR
+    template_light["layout"]["coloraxis"]["colorbar"]["tickfont"]["color"] = FONT_COLOR_SECONDARY
+    template_light["layout"]["coloraxis"]["colorbar"]["title"]["font"]["color"] = FONT_COLOR_SECONDARY
 
     # X AXIS
-    template_light["layout"]["xaxis"]["title"]["font"]["color"] = COLORS["BLACK_85"]
-    template_light["layout"]["xaxis"]["tickcolor"] = COLORS["BLACK_30"]
-    template_light["layout"]["xaxis"]["tickfont"]["color"] = COLORS["BLACK_55"]
-    template_light["layout"]["xaxis"]["linecolor"] = COLORS["BLACK_30"]
-    template_light["layout"]["xaxis"]["gridcolor"] = COLORS["BLACK_12"]
+    template_light["layout"]["xaxis"]["title"]["font"]["color"] = FONT_COLOR_PRIMARY
+    template_light["layout"]["xaxis"]["tickcolor"] = AXIS_COLOR
+    template_light["layout"]["xaxis"]["tickfont"]["color"] = FONT_COLOR_SECONDARY
+    template_light["layout"]["xaxis"]["linecolor"] = AXIS_COLOR
+    template_light["layout"]["xaxis"]["gridcolor"] = GRID_COLOR
 
     # Y AXIS
-    template_light["layout"]["yaxis"]["title"]["font"]["color"] = COLORS["BLACK_85"]
-    template_light["layout"]["yaxis"]["tickcolor"] = COLORS["BLACK_30"]
-    template_light["layout"]["yaxis"]["tickfont"]["color"] = COLORS["BLACK_55"]
-    template_light["layout"]["yaxis"]["linecolor"] = COLORS["BLACK_30"]
-    template_light["layout"]["yaxis"]["gridcolor"] = COLORS["BLACK_12"]
+    template_light["layout"]["yaxis"]["title"]["font"]["color"] = FONT_COLOR_PRIMARY
+    template_light["layout"]["yaxis"]["tickcolor"] = AXIS_COLOR
+    template_light["layout"]["yaxis"]["tickfont"]["color"] = FONT_COLOR_SECONDARY
+    template_light["layout"]["yaxis"]["linecolor"] = AXIS_COLOR
+    template_light["layout"]["yaxis"]["gridcolor"] = GRID_COLOR
 
     # ANNOTATIONS
     template_light["layout"]["annotationdefaults"] = {
-        "font": {"color": COLORS["BLACK_85"], "size": 14},
+        "font": {"color": FONT_COLOR_PRIMARY, "size": 14},
         "showarrow": False,
     }
 
     # CHART TYPES
     template_light.data.bar = [
         go.Bar(
             # This hides the border lines in a bar chart created from unaggregated data.
-            marker={"line": {"color": template_light["layout"]["paper_bgcolor"]}},
+            marker={"line": {"color": template_light.layout.paper_bgcolor}},
         )
     ]
 

diff --git a/vizro-core/src/vizro/static/css/vizro-bootstrap.min.css b/vizro-core/src/vizro/static/css/vizro-bootstrap.min.css