diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
index e4a08277f9..505fc3733b 100644
--- a/res/themes/light-custom/css/_custom.scss
+++ b/res/themes/light-custom/css/_custom.scss
@@ -17,6 +17,7 @@ limitations under the License.
 //
 // --accent-color
 $accent-color: var(--accent-color);
+$accent-bg-color: var(--accent-color-15pct);
 $button-bg-color: var(--accent-color);
 $button-link-fg-color: var(--accent-color);
 $button-primary-bg-color: var(--accent-color);
diff --git a/src/theme.js b/src/theme.js
index 442a89e25f..6bd81cc021 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -148,6 +148,7 @@ function setCustomThemeVars(customTheme) {
             style.setProperty(`--${name}`, hexColor);
             // uses #rrggbbaa to define the color with alpha values at 0% and 50%
             style.setProperty(`--${name}-0pct`, hexColor + "00");
+            style.setProperty(`--${name}-15pct`, hexColor + "26");
             style.setProperty(`--${name}-50pct`, hexColor + "7F");
         }
     }