pick a code theme and setup styles for inline code

astro.config.mjs

@@ -12,7 +12,7 @@ export default defineConfig({
         shikiConfig: {
             themes: {
                 light: 'dracula',
-                dark: 'dracula-soft',
+                dark: 'dark-plus',
             }
         },
     },

bun.lock

@@ -12,6 +12,7 @@
         "@fontsource-variable/baskervville": "^5.2.3",
         "@fontsource-variable/baskervville-sc": "^5.2.3",
         "@fontsource-variable/figtree": "^5.2.10",
+        "@fontsource-variable/fira-code": "^5.2.7",
         "astro": "^5.18.0",
         "sharp": "^0.34.5",
       },
@@ -180,6 +181,8 @@
 
     "@fontsource-variable/figtree": ["@fontsource-variable/figtree@5.2.10", "", {}, "sha512-a5Gumbpy3mdd+Yg31g6Qb7CmjYbrfyutJa3bWfP5q8A4GclIOwX7mI+ZuSHsJnw/mHvW6r9oh1AHJcJTIxK4JA=="],
 
+    "@fontsource-variable/fira-code": ["@fontsource-variable/fira-code@5.2.7", "", {}, "sha512-J2bxN7fz5rd8WpQYyau4o19WqTzxoTqaNj9jhsv4p21GSu1Rf34tbqsxqjyDCR+wDMHM3SajyFqtq+5uvRUQ7w=="],
+
     "@img/colour": ["@img/colour@1.0.0", "", {}, "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw=="],
 
     "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],

package.json

@@ -8,6 +8,7 @@
     "@fontsource-variable/baskervville": "^5.2.3",
     "@fontsource-variable/baskervville-sc": "^5.2.3",
     "@fontsource-variable/figtree": "^5.2.10",
+    "@fontsource-variable/fira-code": "^5.2.7",
     "astro": "^5.18.0",
     "sharp": "^0.34.5"
   },

src/styles/code.css

@@ -1,15 +1,12 @@
-/* fira-code-latin-wght-normal */
+@import '@fontsource-variable/fira-code';
-@font-face {
-  font-family: 'Fira Code Variable';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 300 700;
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/fira-code:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-}
 
-code {
+:not(pre) > code {
     font-family: 'Fira Code Variable';
+    font-size: var(--content-size-sm);
+    padding: 0.05rem 0.2rem 0.1rem;
+    border-radius: 0.2rem;
+    color: var(--inline-code-color);
+    background-color: var(--inline-code-bg);
 }
 
 pre.astro-code {
@@ -18,6 +15,7 @@ pre.astro-code {
     border-radius: 0.3em;
 
     font-size: var(--content-size-sm);
+    --shiki-dark-font-weight: 500;
 }
 
 :root[data-theme="dark"] .astro-code,

src/styles/vars.css

@@ -28,6 +28,8 @@
     --link-color: var(--primary-color);
     --nav-link-color: white;
     --neutral-gray: hsl(0deg 0% 30%);
+    --inline-code-bg: hsl(0deg 0% 93%);
+    --inline-code-color: var(--content-color);
 
     /* dark-mode colors (defined here so that we only have to update them in one place) */
     --dark-bg-color: hsl(220deg 10% 13%);
@@ -41,6 +43,8 @@
     --dark-link-color: hsl(202deg 50% 50%);
     --dark-nav-link-color: var(--dark-heading-color);
     --dark-neutral-gray: hsl(220deg 10% 45%);
+    --dark-inline-code-bg: hsl(220deg 7.5% 21%);
+    --dark-inline-code-color: hsl(18deg 10% 90%);
 
     &[data-theme="dark"] {
         --bg-color: var(--dark-bg-color);
@@ -54,6 +58,8 @@
         --link-color: var(--dark-link-color);
         --nav-link-color: var(--dark-nav-link-color);
         --neutral-gray: var(--dark-neutral-gray);
+        --inline-code-bg: var(--dark-inline-code-bg);
+        --inline-code-color: var(--dark-inline-code-color);
     }
 
     &:not([data-theme="light"]) {
@@ -70,6 +76,8 @@
             --link-color: var(--dark-link-color);
             --nav-link-color: var(--dark-nav-link-color);
             --neutral-gray: var(--dark-neutral-gray);
+            --inline-code-bg: var(--dark-inline-code-bg);
+            --inline-code-color: var(--dark-inline-code-color);
         }
     }
 }