chore: respect theme in code snippets (microsoft#842)

Author: pavelfeldman

dotnet/docusaurus.config.js

@@ -55,7 +55,8 @@ module.exports = {
       respectPrefersColorScheme: true,
     },
     prism: {
-      theme: require('prism-react-renderer/themes/dracula'),
+      theme: require('./src/config/prismLight'),
+      darkTheme: require('./src/config/prismDark'),
       additionalLanguages: ['csharp', 'bash', 'batch', 'powershell'],
     },
     navbar: {

java/docusaurus.config.js

@@ -55,8 +55,9 @@ module.exports = {
       respectPrefersColorScheme: true,
     },
     prism: {
-      theme: require('prism-react-renderer/themes/dracula'),
-      additionalLanguages: ['java', 'bash', 'batch', 'powershell', 'csharp'],
+      theme: require('./src/config/prismLight'),
+      darkTheme: require('./src/config/prismDark'),
+      additionalLanguages: ['java', 'bash', 'batch', 'powershell'],
     },
     navbar: {
       title: "Playwright for Java",

nodejs/docusaurus.config.js

@@ -55,8 +55,9 @@ module.exports = {
       respectPrefersColorScheme: true,
     },
     prism: {
-      theme: require('prism-react-renderer/themes/dracula'),
-      additionalLanguages: ['bash', 'batch', 'powershell', 'csharp'],
+      theme: require('./src/config/prismLight'),
+      darkTheme: require('./src/config/prismDark'),
+      additionalLanguages: ['bash', 'batch', 'powershell'],
     },
     navbar: {
       title: "Playwright",

python/docusaurus.config.js

@@ -55,8 +55,9 @@ module.exports = {
       respectPrefersColorScheme: true,
     },
     prism: {
-      theme: require('prism-react-renderer/themes/dracula'),
-      additionalLanguages: ['python', 'bash', 'batch', 'powershell', 'csharp'],
+      theme: require('./src/config/prismLight'),
+      darkTheme: require('./src/config/prismDark'),
+      additionalLanguages: ['python', 'bash', 'batch', 'powershell'],
     },
     navbar: {
       title: "Playwright for Python",

src/config/prismDark.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// https://github.com/facebook/docusaurus/blob/main/website/src/utils/prismDark.mjs
+
+const darkTheme = require('prism-react-renderer/themes/vsDark/index.cjs.js');
+
+module.exports = {
+  plain: {
+    color: '#D4D4D4',
+    backgroundColor: '#212121',
+  },
+  styles: [
+    ...darkTheme.styles,
+    {
+      types: ['title'],
+      style: {
+        color: '#569CD6',
+        fontWeight: 'bold',
+      },
+    },
+    {
+      types: ['property', 'parameter'],
+      style: {
+        color: '#9CDCFE',
+      },
+    },
+    {
+      types: ['script'],
+      style: {
+        color: '#D4D4D4',
+      },
+    },
+    {
+      types: ['boolean', 'arrow', 'atrule', 'tag'],
+      style: {
+        color: '#569CD6',
+      },
+    },
+    {
+      types: ['number', 'color', 'unit'],
+      style: {
+        color: '#B5CEA8',
+      },
+    },
+    {
+      types: ['font-matter'],
+      style: {
+        color: '#CE9178',
+      },
+    },
+    {
+      types: ['keyword', 'rule'],
+      style: {
+        color: '#C586C0',
+      },
+    },
+    {
+      types: ['regex'],
+      style: {
+        color: '#D16969',
+      },
+    },
+    {
+      types: ['maybe-class-name'],
+      style: {
+        color: '#4EC9B0',
+      },
+    },
+    {
+      types: ['constant'],
+      style: {
+        color: '#4FC1FF',
+      },
+    },
+  ],
+};

src/config/prismLight.js

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// https://github.com/facebook/docusaurus/blob/main/website/src/utils/prismLight.mjs
+
+const lightTheme = require('prism-react-renderer/themes/github/index.cjs.js');
+
+module.exports = {
+  ...lightTheme,
+  styles: [
+    ...lightTheme.styles,
+    {
+      types: ['title'],
+      style: {
+        color: '#0550AE',
+        fontWeight: 'bold',
+      },
+    },
+    {
+      types: ['parameter'],
+      style: {
+        color: '#953800',
+      },
+    },
+    {
+      types: ['boolean', 'rule', 'color', 'number', 'constant', 'property'],
+      style: {
+        color: '#005CC5',
+      },
+    },
+    {
+      types: ['atrule', 'tag'],
+      style: {
+        color: '#22863A',
+      },
+    },
+    {
+      types: ['script'],
+      style: {
+        color: '#24292E',
+      },
+    },
+    {
+      types: ['operator', 'unit', 'rule'],
+      style: {
+        color: '#D73A49',
+      },
+    },
+    {
+      types: ['font-matter', 'string', 'attr-value'],
+      style: {
+        color: '#C6105F',
+      },
+    },
+    {
+      types: ['class-name'],
+      style: {
+        color: '#116329',
+      },
+    },
+    {
+      types: ['attr-name'],
+      style: {
+        color: '#0550AE',
+      },
+    },
+    {
+      types: ['keyword'],
+      style: {
+        color: '#CF222E',
+      },
+    },
+    {
+      types: ['function'],
+      style: {
+        color: '#8250DF',
+      },
+    },
+    {
+      types: ['selector'],
+      style: {
+        color: '#6F42C1',
+      },
+    },
+    {
+      types: ['variable'],
+      style: {
+        color: '#E36209',
+      },
+    },
+    {
+      types: ['comment'],
+      style: {
+        color: '#6B6B6B',
+      },
+    },
+  ],
+};