diff --git a/packages/create-docusaurus/templates/classic/src/css/custom.css b/packages/create-docusaurus/templates/classic/src/css/custom.css
index 311dc090d9..2bc6a4cfde 100644
--- a/packages/create-docusaurus/templates/classic/src/css/custom.css
+++ b/packages/create-docusaurus/templates/classic/src/css/custom.css
@@ -14,6 +14,7 @@
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -25,15 +26,5 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
-}
-
-.docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.3);
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
diff --git a/packages/create-docusaurus/templates/facebook/src/css/custom.css b/packages/create-docusaurus/templates/facebook/src/css/custom.css
index 29e5252369..c11ab16716 100644
--- a/packages/create-docusaurus/templates/facebook/src/css/custom.css
+++ b/packages/create-docusaurus/templates/facebook/src/css/custom.css
@@ -35,10 +35,3 @@
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
 }
-
-.docusaurus-highlight-code-line {
-  background-color: rgb(72, 77, 91);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx
index 79505f42d7..84b4fd0c40 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx
@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import type {Props} from '@theme/CodeBlock/Line';
 import styles from './styles.module.css';
 
@@ -26,7 +27,11 @@ export default function CodeBlockLine({
   });
 
   if (highlight) {
-    lineProps.className += ' docusaurus-highlight-code-line';
+    lineProps.className = clsx(
+      lineProps.className,
+      styles.highlightedCodeLine,
+      'theme-code-block-highlighted-line',
+    );
   }
 
   const lineTokens = line.map((token, key) => (
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css
index 7597f007c5..64edaaff86 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css
@@ -5,6 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* Intentionally has zero specificity, so that to be able to override
+the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
+:where(:root) {
+  --docusaurus-highlighted-code-line-bg: rgb(72 77 91);
+}
+
+:where([data-theme='dark']) {
+  --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
+}
+
+.highlightedCodeLine {
+  background-color: var(--docusaurus-highlighted-code-line-bg);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
 .codeLine {
   display: table-row;
   counter-increment: line-count;
@@ -25,7 +42,7 @@
   opacity: 0.4;
 }
 
-:global(.docusaurus-highlight-code-line) .codeLineNumber::before {
+.highlightedCodeLine .codeLineNumber::before {
   opacity: 0.8;
 }
 
diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
index 07990cd9b9..bb16c7e47c 100644
--- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
@@ -198,23 +198,22 @@ Supported commenting syntax:
 
 We will do our best to infer which set of comment styles to use based on the language, and default to allowing _all_ comment styles. If there's a comment style that is not currently supported, we are open to adding them! Pull requests welcome.
 
-To accomplish this, Docusaurus adds the `docusaurus-highlight-code-line` class to the highlighted lines. You will need to define your own styling for this CSS, possibly in your `src/css/custom.css` with a custom background color which is dependent on your selected syntax highlighting theme. The color given below works for the default highlighting theme (Palenight), so if you are using another theme, you will have to tweak the color accordingly.
+You can set your own background color for highlighted code line in your `src/css/custom.css` which will better fit to your selected syntax highlighting theme. The color given below works for the default highlighting theme (Palenight), so if you are using another theme, you will have to tweak the color accordingly.
 
 ```css title="/src/css/custom.css"
-.docusaurus-highlight-code-line {
-  background-color: rgb(72, 77, 91);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
+:root {
+  --docusaurus-highlighted-code-line-bg: rgb(72, 77, 91);
 }
 
 /* If you have a different syntax highlighting theme for dark mode. */
-[data-theme='dark'] .docusaurus-highlight-code-line {
+[data-theme='dark'] {
   /* Color which works with dark mode syntax highlighting theme */
-  background-color: rgb(100, 100, 100);
+  --docusaurus-highlighted-code-line-bg: rgb(100, 100, 100);
 }
 ```
 
+If you also need to style the highlighted code line in some other way, you can target on `theme-code-block-highlighted-line` CSS class.
+
 ### Highlighting with metadata string {#highlighting-with-metadata-string}
 
 You can also specify highlighted line ranges within the language meta string (leave a space after the language). To highlight multiple lines, separate the line numbers by commas or use the range syntax to select a chunk of lines. This feature uses the `parse-number-range` library and you can find [more syntax](https://www.npmjs.com/package/parse-numeric-range) on their project details.
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 11b4f2fa04..d4f018b494 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -18,12 +18,14 @@
   --site-color-svg-icon-favorite: #e9669e;
   --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%);
   --site-color-feedback-background: #fff;
+  --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%);
 }
 
 html[data-theme='dark'] {
   --site-color-feedback-background: #f0f8ff;
   --site-color-favorite-background: #1d1e1e;
   --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%);
+  --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 30%);
 }
 
 [data-theme='light'] {
@@ -56,17 +58,6 @@ html[data-theme='dark'] {
   );
 }
 
-.docusaurus-highlight-code-line {
-  background-color: rgb(0 0 0 / 10%);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: rgb(66 66 66 / 30%);
-}
-
 .header-github-link:hover {
   opacity: 0.6;
 }