diff --git a/components/meter/meter-linear.js b/components/meter/meter-linear.js
index 0539ba6cb16..fd8a667dc80 100644
--- a/components/meter/meter-linear.js
+++ b/components/meter/meter-linear.js
@@ -48,7 +48,7 @@ class MeterLinear extends MeterMixin(LitElement) {
 			}
 
 			.d2l-meter-linear-full-bar {
-				background-color: var(--d2l-color-gypsum);
+				background-color: var(--d2l-theme-background-color-interactive-secondary-default);
 				position: relative;
 			}
 
@@ -57,7 +57,7 @@ class MeterLinear extends MeterMixin(LitElement) {
 			}
 
 			.d2l-meter-linear-inner-bar {
-				background-color: var(--d2l-color-celestine);
+				background-color: var(--d2l-theme-brand-color-primary-default);
 				inset-inline-start: 0;
 				max-width: 100%;
 				position: absolute;
@@ -68,7 +68,7 @@ class MeterLinear extends MeterMixin(LitElement) {
 			}
 
 			.d2l-meter-linear-text {
-				color: var(--d2l-color-ferrite);
+				color: var(--d2l-theme-text-color-static-standard);
 				display: flex;
 				flex-direction: row;
 				gap: 0.45rem;
diff --git a/components/meter/meter-styles.js b/components/meter/meter-styles.js
index 190ee1219b6..71c57de4038 100644
--- a/components/meter/meter-styles.js
+++ b/components/meter/meter-styles.js
@@ -13,20 +13,20 @@ export const meterStyles = css`
 		stroke-linecap: round;
 	}
 	.d2l-meter-full-bar {
-		stroke: var(--d2l-color-gypsum);
+		stroke: var(--d2l-theme-border-color-subtle);
 	}
 	:host([foreground-light]) .d2l-meter-full-bar {
 		stroke: rgba(255, 255, 255, 0.5);
 	}
 	.d2l-meter-progress-bar {
-		stroke: var(--d2l-color-celestine);
+		stroke: var(--d2l-theme-brand-color-primary-default);
 	}
 	:host([foreground-light]) .d2l-meter-progress-bar {
 		stroke: white;
 	}
 	.d2l-meter-text {
-		color: var(--d2l-color-ferrite);
-		fill: var(--d2l-color-ferrite);
+		color: var(--d2l-theme-text-color-static-standard);
+		fill: var(--d2l-theme-text-color-static-standard);
 		line-height: 0.8rem;
 		text-align: center;
 	}
diff --git a/components/meter/test/meter-linear.vdiff.js b/components/meter/test/meter-linear.vdiff.js
index c2a36b383f1..84fa1fd79cd 100644
--- a/components/meter/test/meter-linear.vdiff.js
+++ b/components/meter/test/meter-linear.vdiff.js
@@ -51,7 +51,7 @@ describe('meter-linear', () => {
 	});
 
 	[
-		{ name: 'normal-text', template: html`<d2l-meter-linear id="normal-text" value="4" max="10" text="You're doing great!"></d2l-meter-linear>` },
+		{ name: 'normal-text', template: html`<d2l-meter-linear id="normal-text" value="4" max="10" text="You're doing great!"></d2l-meter-linear>`, allColorModes: true },
 		{ name: 'normal-max-zero-value-zero', template: html`<d2l-meter-linear value="0" max="0" text="Visited: {x/y}" percent></d2l-meter-linear>` },
 		{ name: 'normal-round-to-zero', template: html`<d2l-meter-linear value="0.004" max="10" text="Visited: {x/y}" percent></d2l-meter-linear>` },
 		{ name: 'normal-over-100', template: html`<d2l-meter-linear value="15" max="10" text="Visited: {x/y}" percent></d2l-meter-linear>` },
@@ -61,10 +61,10 @@ describe('meter-linear', () => {
 		{ name: 'normal-text-fraction-text-hidden', template: html`<d2l-meter-linear value="4" max="10" text="Visited: {x/y}" percent text-hidden></d2l-meter-linear>` },
 		{ name: 'text-inline-text-percent-text-hidden', template: html`<d2l-meter-linear value="4" max="10" text-inline text="Visited" percent text-hidden></d2l-meter-linear>` },
 		{ name: 'no-text-text-hidden', template: html`<d2l-meter-linear value="4" max="10" text-hidden></d2l-meter-linear>` },
-	].forEach(({ name, template, dark }) => {
+	].forEach(({ name, template, dark, allColorModes }) => {
 		it(name, async() => {
 			const elem = await fixture(createTemplateWrapper(template, dark));
-			await expect(elem.querySelector('d2l-meter-linear')).to.be.golden();
+			await expect(elem.querySelector('d2l-meter-linear')).to.be.golden({ allColorModes });
 		});
 	});
 });
diff --git a/components/meter/test/meter-radial.vdiff.js b/components/meter/test/meter-radial.vdiff.js
index 30fa2bf6568..b31d05d278a 100644
--- a/components/meter/test/meter-radial.vdiff.js
+++ b/components/meter/test/meter-radial.vdiff.js
@@ -5,13 +5,13 @@ import { expect, fixture, html } from '@brightspace-ui/testing';
 describe('meter-radial', () => {
 	[true, false].forEach(rtl => {
 		[
-			{ name: 'progress', template: html`<d2l-meter-radial value="16" max="47"></d2l-meter-radial>` },
+			{ name: 'progress', template: html`<d2l-meter-radial value="16" max="47"></d2l-meter-radial>`, allColorModes: true },
 			{ name: 'percent', template: html`<d2l-meter-radial value="16" max="47" percent></d2l-meter-radial>` },
-			{ name: 'text', template: html`<d2l-meter-radial value="10" max="10" percent text="Completed"></d2l-meter-radial>` },
-		].forEach(({ name, template }) => {
+			{ name: 'text', template: html`<d2l-meter-radial value="10" max="10" percent text="Completed"></d2l-meter-radial>`, allColorModes: true },
+		].forEach(({ name, template, allColorModes }) => {
 			it(`${name}${ rtl ? '-rtl' : ''}`, async() => {
 				const elem = await fixture(template, { rtl });
-				await expect(elem).to.be.golden();
+				await expect(elem).to.be.golden({ allColorModes: allColorModes && !rtl });
 			});
 		});
 	});