diff --git a/components/scroll-wrapper/scroll-wrapper.js b/components/scroll-wrapper/scroll-wrapper.js
index 8c19f98677f..eb4dea1f881 100644
--- a/components/scroll-wrapper/scroll-wrapper.js
+++ b/components/scroll-wrapper/scroll-wrapper.js
@@ -12,10 +12,7 @@ let focusStyleSheet;
 function getFocusStyleSheet() {
 	if (!focusStyleSheet) {
 		focusStyleSheet = new CSSStyleSheet();
-		focusStyleSheet.replaceSync(getFocusRingStyles(
-			'.d2l-scroll-wrapper-focus',
-			{ extraStyles: css`box-shadow: 0 0 0 2px #ffffff, 0 2px 12px 0 rgba(0, 0, 0, 0.15);` }
-		));
+		focusStyleSheet.replaceSync(getFocusRingStyles('.d2l-scroll-wrapper-focus'));
 	}
 	return focusStyleSheet;
 }
@@ -97,7 +94,7 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 				overflow-y: var(--d2l-scroll-wrapper-overflow-y, visible);
 			}
 			:host([h-scrollbar]) .d2l-scroll-wrapper-container {
-				border-inline: 1px dashed var(--d2l-color-mica);
+				border-inline: 1px dashed var(--d2l-theme-border-color-standard);
 			}
 			:host([h-scrollbar][hide-actions]) .d2l-scroll-wrapper-container {
 				border-inline: none;
@@ -124,10 +121,10 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 			}
 
 			.d2l-scroll-wrapper-button {
-				background-color: var(--d2l-color-regolith);
-				border: 1px solid var(--d2l-color-mica);
+				background-color: var(--d2l-theme-background-color-interactive-faint-default);
+				border: 1px solid var(--d2l-theme-border-color-standard);
 				border-radius: 50%;
-				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
+				box-shadow: var(--d2l-theme-shadow-floating);
 				cursor: pointer;
 				display: inline-block;
 				height: 18px;
@@ -138,7 +135,7 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 				width: 18px;
 			}
 			.d2l-scroll-wrapper-button:hover {
-				background-color: var(--d2l-color-sylvite);
+				background-color: var(--d2l-theme-background-color-interactive-faint-hover);
 			}
 			:host([scrollbar-right]) .d2l-scroll-wrapper-button-right {
 				display: none;
diff --git a/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/focus-show-actions.png b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/focus-show-actions.png
deleted file mode 100644
index dc9741e312d..00000000000
Binary files a/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/focus-show-actions.png and /dev/null differ
diff --git a/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/focus-split-scrollers.png b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/focus-split-scrollers.png
deleted file mode 100644
index 1fab1685833..00000000000
Binary files a/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/focus-split-scrollers.png and /dev/null differ
diff --git a/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/show-actions-focus.dark.png b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/show-actions-focus.dark.png
new file mode 100644
index 00000000000..bc8c6838de1
Binary files /dev/null and b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/show-actions-focus.dark.png differ
diff --git a/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/show-actions-focus.png b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/show-actions-focus.png
new file mode 100644
index 00000000000..baadfac7a01
Binary files /dev/null and b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/show-actions-focus.png differ
diff --git a/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/show-actions.dark.png b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/show-actions.dark.png
new file mode 100644
index 00000000000..8dc12ac6d17
Binary files /dev/null and b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/show-actions.dark.png differ
diff --git a/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/show-actions.png b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/show-actions.png
new file mode 100644
index 00000000000..38961921014
Binary files /dev/null and b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/show-actions.png differ
diff --git a/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/split-scrollers-focus.png b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/split-scrollers-focus.png
new file mode 100644
index 00000000000..6543dfd0910
Binary files /dev/null and b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/split-scrollers-focus.png differ
diff --git a/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/split-scrollers.png b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/split-scrollers.png
new file mode 100644
index 00000000000..cee4becb027
Binary files /dev/null and b/components/scroll-wrapper/test/golden/scroll-wrapper/chromium/split-scrollers.png differ
diff --git a/components/scroll-wrapper/test/scroll-wrapper.vdiff.js b/components/scroll-wrapper/test/scroll-wrapper.vdiff.js
index b59b4d34b99..1242f531a08 100644
--- a/components/scroll-wrapper/test/scroll-wrapper.vdiff.js
+++ b/components/scroll-wrapper/test/scroll-wrapper.vdiff.js
@@ -45,20 +45,19 @@ describe('scroll-wrapper', () => {
 		});
 	});
 
-	describe('focus', () => {
-		it('show-actions', async() => {
-			const elem = await fixture(wrapScrollWrapper(html`<d2l-test-scroll-wrapper width="400" class="vdiff-include"></d2l-test-scroll-wrapper>`));
-			await focusElem(elem.querySelector('d2l-test-scroll-wrapper'));
+	[
+		{ name: 'show-actions', allColorModes: true },
+		{ name: 'show-actions-focus', allColorModes: true, action: elem => { return focusElem(elem.querySelector('d2l-test-scroll-wrapper')); } },
+		{ name: 'split-scrollers', splitScrollers: true },
+		{ name: 'split-scrollers-focus', splitScrollers: true, action: elem => { return focusElem(elem.querySelector('d2l-test-scroll-wrapper')); } },
+	].forEach(({ action, allColorModes, name, splitScrollers }) => {
 
-			await expect(elem).to.be.golden();
+		it(name, async() => {
+			const elem = await fixture(wrapScrollWrapper(html`<d2l-test-scroll-wrapper width="400" ?split-scrollers="${splitScrollers}" class="vdiff-include"></d2l-test-scroll-wrapper>`));
+			if (action) await action(elem);
+			await expect(elem).to.be.golden({ allColorModes });
 		});
 
-		it('split-scrollers', async() => {
-			const elem = await fixture(wrapScrollWrapper(html`<d2l-test-scroll-wrapper width="400" split-scrollers class="vdiff-include"></d2l-test-scroll-wrapper>`));
-			await focusElem(elem.querySelector('d2l-test-scroll-wrapper'));
-
-			await expect(elem).to.be.golden();
-		});
 	});
 
 	describe('print', () => {