From cbd86f889fd9ce9c358992141e20e1fccbb4880b Mon Sep 17 00:00:00 2001 From: nhennigan Date: Tue, 24 Feb 2026 15:32:57 -0800 Subject: [PATCH 1/3] fix(css): Add CSS for inline code in dark mode Currently we do not have any CSS for inline code in dark mode. It therefore picks up the default light mode CSS which is not visible in dark mode. I have used .08 as the transparency level rather than 0.03 like the light mode as I think it is very hard to differentiate 0.03 in dark mode. --- canonical_sphinx/theme/static/furo_colors.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/canonical_sphinx/theme/static/furo_colors.css b/canonical_sphinx/theme/static/furo_colors.css index c323eb7..24108a0 100644 --- a/canonical_sphinx/theme/static/furo_colors.css +++ b/canonical_sphinx/theme/static/furo_colors.css @@ -44,6 +44,7 @@ body { --color-background-hover: #666; --color-brand-primary: #fff; --color-brand-content: #69C; + --color-inline-code-background: rgba(255,255,255,.08); --color-sidebar-link-text: #f7f7f7; --color-sidebar-item-background--current: #666; --color-sidebar-item-background--hover: #333; @@ -70,6 +71,7 @@ body { --color-background-hover: #666; --color-brand-primary: #fff; --color-brand-content: #69C; + --color-inline-code-background: rgba(255,255,255,.08); --color-sidebar-link-text: #f7f7f7; --color-sidebar-item-background--current: #666; --color-sidebar-item-background--hover: #333; From c76c03942e44a34e4bffb5200b1710dff0c4c250 Mon Sep 17 00:00:00 2001 From: nhennigan Date: Wed, 25 Feb 2026 11:08:29 -0800 Subject: [PATCH 2/3] fix(css): Set inline code color value to var Set --color-inline-code-background to var(--color-code-background) to lower maintenance debt and provide continuity across our docs --- canonical_sphinx/theme/static/furo_colors.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/canonical_sphinx/theme/static/furo_colors.css b/canonical_sphinx/theme/static/furo_colors.css index 24108a0..fafac3f 100644 --- a/canonical_sphinx/theme/static/furo_colors.css +++ b/canonical_sphinx/theme/static/furo_colors.css @@ -13,7 +13,7 @@ body { --color-brand-content: #06C; --color-api-background: var(--color-code-background); --color-api-background--hover: var(--color-sidebar-item-background--hover); - --color-inline-code-background: rgba(0,0,0,.03); + --color-inline-code-background: var(--color-code-background); --color-sidebar-link-text: #111; --color-sidebar-item-background--current: #ebebeb; --color-sidebar-item-background--hover: #f2f2f2; @@ -44,7 +44,7 @@ body { --color-background-hover: #666; --color-brand-primary: #fff; --color-brand-content: #69C; - --color-inline-code-background: rgba(255,255,255,.08); + --color-inline-code-background: var(--color-code-background); --color-sidebar-link-text: #f7f7f7; --color-sidebar-item-background--current: #666; --color-sidebar-item-background--hover: #333; @@ -71,7 +71,7 @@ body { --color-background-hover: #666; --color-brand-primary: #fff; --color-brand-content: #69C; - --color-inline-code-background: rgba(255,255,255,.08); + --color-inline-code-background: var(--color-code-background); --color-sidebar-link-text: #f7f7f7; --color-sidebar-item-background--current: #666; --color-sidebar-item-background--hover: #333; From a1a8155f2eded1a65b080c513d6bba3be0582bba Mon Sep 17 00:00:00 2001 From: nhennigan Date: Wed, 25 Feb 2026 11:10:06 -0800 Subject: [PATCH 3/3] fix(css): Fix indentation error --- canonical_sphinx/theme/static/furo_colors.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/canonical_sphinx/theme/static/furo_colors.css b/canonical_sphinx/theme/static/furo_colors.css index fafac3f..bc79f5f 100644 --- a/canonical_sphinx/theme/static/furo_colors.css +++ b/canonical_sphinx/theme/static/furo_colors.css @@ -44,7 +44,7 @@ body { --color-background-hover: #666; --color-brand-primary: #fff; --color-brand-content: #69C; - --color-inline-code-background: var(--color-code-background); + --color-inline-code-background: var(--color-code-background); --color-sidebar-link-text: #f7f7f7; --color-sidebar-item-background--current: #666; --color-sidebar-item-background--hover: #333; @@ -71,7 +71,7 @@ body { --color-background-hover: #666; --color-brand-primary: #fff; --color-brand-content: #69C; - --color-inline-code-background: var(--color-code-background); + --color-inline-code-background: var(--color-code-background); --color-sidebar-link-text: #f7f7f7; --color-sidebar-item-background--current: #666; --color-sidebar-item-background--hover: #333;