Merge branch '334007-use-code-theme-in-code-block-component' into 'master'

Use selected syntax highlighting theme in code block component

See merge request gitlab-org/gitlab!68788

app/assets/javascripts/vue_shared/components/code_block.vue

@@ -24,8 +24,13 @@ export default {
       return isScrollable ? scrollableStyles : null;
     },
   },
+  userColorScheme: window.gon.user_color_scheme,
 };
 </script>
 <template>
-  <pre class="code-block rounded" :style="styleObject"><code class="d-block">{{ code }}</code></pre>
+  <pre
+    class="code-block rounded code"
+    :class="$options.userColorScheme"
+    :style="styleObject"
+  ><code class="d-block">{{ code }}</code></pre>
 </template>

app/assets/stylesheets/framework/blocks.scss

@@ -337,8 +337,6 @@
 }
 
 .code-block {
-  background: $black;
-  color: $gray-darkest;
   white-space: pre;
   overflow-x: auto;
   font-size: 12px;

spec/frontend/vue_shared/components/__snapshots__/code_block_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Code Block with default props renders correctly 1`] = `
 <pre
-  class="code-block rounded"
+  class="code-block rounded code"
 >
   <code
     class="d-block"
@@ -14,7 +14,7 @@ exports[`Code Block with default props renders correctly 1`] = `
 
 exports[`Code Block with maxHeight set to "200px" renders correctly 1`] = `
 <pre
-  class="code-block rounded"
+  class="code-block rounded code"
   style="max-height: 200px; overflow-y: auto;"
 >
   <code