fix(style): Add CSS for inline code in dark mode

[nhennigan]

Description

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.

I was unsure how to get the project to point to the local canonical-sphinx so I mocked it up in my browser below.
Before:

After:

Issue

Addresses: Issue #65

• Have you followed the guidelines for contributing?
• Have you signed the CLA?
• Have you successfully run tox? - This would not run locally but I believe that is a versioning issue on my end

---

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 16.43%. Comparing base (5a4416e) to head (d8903eb).
⚠️ Report is 72 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (5a4416e) and HEAD (d8903eb). Click for more details.

HEAD has 2 uploads less than BASE

Flag	BASE (5a4416e)	HEAD (d8903eb)
	3	1

Additional details and impacted files

@@             Coverage Diff              @@
##              main     #119       +/-   ##
============================================
- Coverage   100.00%   16.43%   -83.57%     
============================================
  Files            1        3        +2     
  Lines           10      146      +136     
  Branches         2       25       +23     
============================================
+ Hits            10       24       +14     
- Misses           0      122      +122     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jahn-junior]

What do you think about using the same alpha as Vanilla here? Vanilla's dark theme uses a much lighter code background color, but it's consistent with our current side nav highlighting. We'd just have to update --color-code-background to match.

Also, for future reference, you can test changes here by pulling the branch into a local copy of a project. In your requirements.txt file, replace canonical-sphinx with:

canonical_sphinx @ git+https://github.com/nhennigan/canonical-sphinx.git@docpr-2398

You can point a project to a local copy of an extension, but it's more hassle than it's worth for something like this.

[medubelko]

What do you think about using the same alpha as Vanilla here? Vanilla's dark theme uses a much lighter code background color, but it's consistent with our current side nav highlighting. We'd just have to update --color-code-background to match.

Dark mode in Ulwazi is a ways off, so we haven't assessed Vanilla's colours inside documentation yet.

I find the Vanilla colour to be an intensely distracting contrast. I believe it will have a negative impact on our docs. It looks like search highlighting:

I think we should use the same colour as we do for the code blocks. We can reuse the var, lowering debt.

[jahn-junior]

@medubelko Ah, I didn't think about search results. That's a great point.

I think we should use the same colour as we do for the code blocks. We can reuse the var, lowering debt.

That was going to be my follow-up suggestion :) It's always bugged me that we only invoke rgba() for one color.

@nhennigan Can you update both the light and dark inline code colors to var(--color-code-background)? Sorry for bikeshedding on your 1-pointer. 🤣

[jahn-junior]

Looked good in my local test. Thanks!

[medubelko]

Molto bello!