diff --git a/packages/docusaurus-init/templates/classic/docusaurus.config.js b/packages/docusaurus-init/templates/classic/docusaurus.config.js
index 6dfe1342b137..053585753851 100644
--- a/packages/docusaurus-init/templates/classic/docusaurus.config.js
+++ b/packages/docusaurus-init/templates/classic/docusaurus.config.js
@@ -1,3 +1,6 @@
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
   title: 'My Site',
@@ -76,6 +79,10 @@ module.exports = {
       ],
       copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
     },
+    prism: {
+      theme: lightCodeTheme,
+      darkTheme: darkCodeTheme,
+    },
   },
   presets: [
     [
diff --git a/packages/docusaurus-init/templates/classic/package.json b/packages/docusaurus-init/templates/classic/package.json
index 684d3cc213f9..737df96e3887 100644
--- a/packages/docusaurus-init/templates/classic/package.json
+++ b/packages/docusaurus-init/templates/classic/package.json
@@ -20,6 +20,7 @@
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
     "file-loader": "^6.2.0",
+    "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "url-loader": "^4.1.1"
diff --git a/packages/docusaurus-init/templates/classic/src/css/custom.css b/packages/docusaurus-init/templates/classic/src/css/custom.css
index 74ba0f27f39d..b3d3c3c891db 100644
--- a/packages/docusaurus-init/templates/classic/src/css/custom.css
+++ b/packages/docusaurus-init/templates/classic/src/css/custom.css
@@ -18,8 +18,12 @@
 }
 
 .docusaurus-highlight-code-line {
-  background-color: rgb(72, 77, 91);
+  background-color: rgba(0, 0, 0, 0.1);
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
+
+html[data-theme='dark'] .docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.3);
+}