More accessibility fixes, align with vs code on code block theming

Author: janechu

sites/website/docusaurus.config.js

@@ -1,3 +1,5 @@
+import {themes as prismThemes} from 'prism-react-renderer';
+
 module.exports = {
     title: "FAST",
     tagline: "The adaptive interface system for modern web experiences",
@@ -13,17 +15,20 @@ module.exports = {
         mermaid: true,
     },
     themes: [
-        require.resolve("@docusaurus/theme-live-codeblock"),
+        "@docusaurus/theme-live-codeblock",
         "@docusaurus/theme-mermaid",
     ],
     staticDirectories: ["static"],
     themeConfig: {
+        prism: {
+            theme: prismThemes.vsDark,
+        },
         announcementBar: {
             id: 'version',
             content:
               '<code>@microsoft/fast-element</code> v2 is out! 🎉️',
-            backgroundColor: 'var(--ifm-color-primary-darkest)',
-            textColor: 'var(--fill-color)',
+            backgroundColor: 'var(--ifm-color-success-darkest)',
+            textColor: 'var(--ifm-color-white)',
         },
         colorMode: {
             defaultMode: "dark",
@@ -147,14 +152,7 @@ module.exports = {
                     sidebarPath: "./sidebars.js",
                     // Refer to https://github.com/microsoft/fast/issues/5865 effects of using true
                     showLastUpdateTime: false,
-                    // remarkPlugins: [require("mdx-mermaid")],
-                    // The "includeCurrentVersion" plugin includes the ./docs folder of the docs - setting to false as current docs are in progress
-                    // TODO: remove when ready to display both the current and legacy versions (line 155)
-                    includeCurrentVersion: false,
-                    // The "lastVersion" plugin sets which version the /docs route refers to
-                    // TODO: update lastVersion to "current" when ready for /docs route to be set to the current version (line 158)
                     lastVersion: "current",
-                    // TODO: Uncomment to begin displaying the doc versions labels (lines 160-167)
                     versions: {
                         current: {
                             label: "2.x",

sites/website/src/css/custom.css

@@ -70,13 +70,6 @@ html[data-theme='dark'] .DocSearch-Hit[aria-selected="true"] a mark {
   color: var(--ifm-color-primary) !important;
 }
 
-.docusaurus-highlight-code-line {
-  background-color: #212121;
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
 .example-dialog::part(control) {
   --dialog-width: 400px;
   --dialog-height: auto;
@@ -307,6 +300,11 @@ li {
   margin: 8px 20px;
 }
 
+[role="banner"] code {
+  background-color: rgba(0, 0, 0, 0.1);
+  border: 0.1rem solid rgba(255, 255, 255, 0.1)
+}
+
 @media screen and (min-width: 900px) {
   .frontpage {
     --type-ramp-base-font-size: 14px;