diff --git a/src/components/AppProvider/AppProvider.tsx b/src/components/AppProvider/AppProvider.tsx
index 76f997f9d9a..05681b827d5 100644
--- a/src/components/AppProvider/AppProvider.tsx
+++ b/src/components/AppProvider/AppProvider.tsx
@@ -99,7 +99,7 @@ export class AppProvider extends Component<AppProviderProps, State> {
     // Inlining the following custom properties to maintain backward
     // compatibility with the legacy ThemeProvider implementation.
     document.body.setAttribute(
-      'color-scheme',
+      'p-color-scheme',
       this.props.colorScheme || DEFAULT_COLOR_SCHEME,
     );
     document.body.style.backgroundColor = 'var(--p-background)';
diff --git a/src/components/CustomProperties/CustomProperties.tsx b/src/components/CustomProperties/CustomProperties.tsx
index b5d1516392a..259948075a5 100644
--- a/src/components/CustomProperties/CustomProperties.tsx
+++ b/src/components/CustomProperties/CustomProperties.tsx
@@ -44,7 +44,7 @@ export function CustomProperties(props: CustomPropertiesProps) {
 
   return (
     <Component
-      color-scheme={colorScheme}
+      p-color-scheme={colorScheme}
       className={className}
       // TODO: Remove this inline style when we update individual components
       // to set their own color and background-color properties.
diff --git a/src/components/CustomProperties/styles.ts b/src/components/CustomProperties/styles.ts
index b9e1633bae5..cb0232a6c05 100644
--- a/src/components/CustomProperties/styles.ts
+++ b/src/components/CustomProperties/styles.ts
@@ -17,9 +17,9 @@ const lightDeclarations = getColorSchemeDeclarations(
 /**
  * Creates CSS Rules for each color-scheme.
  * @example:
- * [color-scheme="light"] {...}
- * [color-scheme="dark"] {...}
- * [color-scheme="dim"] {...}
+ * [p-color-scheme="light"] {...}
+ * [p-color-scheme="dark"] {...}
+ * [p-color-scheme="dim"] {...}
  */
 export function getColorSchemeRules(
   tokens: Tokens,
@@ -29,7 +29,7 @@ export function getColorSchemeRules(
     .map((key) => {
       const colorScheme = key as ColorScheme;
 
-      const selector = `[color-scheme="${colorScheme}"]`;
+      const selector = `[p-color-scheme="${colorScheme}"]`;
       const properties = getColorSchemeDeclarations(
         colorScheme,
         tokens,
diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx
index 87c99a7c2b8..be1aac5a086 100644
--- a/src/components/CustomProperties/tests/CustomProperties.test.tsx
+++ b/src/components/CustomProperties/tests/CustomProperties.test.tsx
@@ -21,7 +21,7 @@ import {
 } from '../styles';
 
 interface ColorSchemeAttribute {
-  'color-scheme': ColorScheme;
+  'p-color-scheme': ColorScheme;
 }
 
 const mockTokenGroup: TokenGroup = {
@@ -94,7 +94,7 @@ describe('<CustomProperties />', () => {
 
       expect(
         (customProperties.find('div')!.props as ColorSchemeAttribute)[
-          'color-scheme'
+          'p-color-scheme'
         ],
       ).toBe(DEFAULT_COLOR_SCHEME);
     });
@@ -106,7 +106,7 @@ describe('<CustomProperties />', () => {
 
       expect(
         (customProperties.find('div')!.props as ColorSchemeAttribute)[
-          'color-scheme'
+          'p-color-scheme'
         ],
       ).toBe('light');
     });
@@ -118,7 +118,7 @@ describe('<CustomProperties />', () => {
 
       expect(
         (customProperties.find('div')!.props as ColorSchemeAttribute)[
-          'color-scheme'
+          'p-color-scheme'
         ],
       ).toBe('dark');
     });
@@ -177,7 +177,7 @@ describe('<CustomProperties />', () => {
       const expectedRules = Object.keys(mockColorSchemes)
         .map(
           (colorScheme) =>
-            `[color-scheme="${colorScheme}"]{${expectedColorSchemeDeclarations(
+            `[p-color-scheme="${colorScheme}"]{${expectedColorSchemeDeclarations(
               colorScheme as ColorScheme,
             )}}`,
         )