diff --git a/src/components/Nav/styles.module.scss b/src/components/Nav/styles.module.scss
index 3d201ed7d8..33c7cf5c79 100644
--- a/src/components/Nav/styles.module.scss
+++ b/src/components/Nav/styles.module.scss
@@ -287,3 +287,7 @@
   margin-top: 10px;
 }
 
+/* Force 'function' keyword to have better contrast */
+code span[style*="#D73A49"] {
+  color: #000 !important;
+}
diff --git a/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx b/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx
index 604a787311..c0300a4efb 100644
--- a/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx
+++ b/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx
@@ -191,7 +191,11 @@ function draw() {
 
 By default, `p5.Framebuffer`s are not drawn to the screen. The main canvas is the only thing shown at the end of `draw()`. To make the contents of a `p5.Framebuffer` visible, it has to be stamped upon the main canvas. This is typically done with a call to `image(yourFramebuffer, x, y, width, height)`. Similar to the main canvas, a `p5.Framebuffer` only gets cleared when you ask it to be cleared, so you can stamp it on the main canvas as many times as you want, like in the example below.
 
-<AnnotatedCode lang="javascript" columns={true} code={({ begin, end }) =>
+<AnnotatedCode
+  lang="javascript"
+  columns={true}
+  theme="light-plus"
+  code={({ begin, end }) =>
 `${begin('header')}
 
 ${end('header')}