diff --git a/.changeset/sharp-humans-itch.md b/.changeset/sharp-humans-itch.md
new file mode 100644
index 0000000000..4b07c3a5f0
--- /dev/null
+++ b/.changeset/sharp-humans-itch.md
@@ -0,0 +1,8 @@
+---
+"@digdir/designsystemet-react": major
+"@digdir/designsystemet-theme": major
+"@digdir/designsystemet-css": major
+"@digdir/designsystemet": minor
+---
+
+**BREAKING CHANGE**: The attribute / prop `data-ds-color-mode` has been renamed to `data-color-scheme`
diff --git a/.vscode/settings.json b/.vscode/settings.json
index b71e719a32..06d7fab162 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -14,7 +14,7 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "cssvar.files": [
-    "packages/theme/brand/digdir/color-mode/light.css",
+    "packages/theme/brand/digdir/color-scheme/light.css",
     "packages/theme/brand/digdir/typography/primary.css",
     "packages/theme/brand/digdir/semantic.css"
   ],
diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx
index 790a7d5da2..c63de3aff0 100644
--- a/apps/_components/src/CodeSnippet/CodeSnippet.tsx
+++ b/apps/_components/src/CodeSnippet/CodeSnippet.tsx
@@ -75,7 +75,7 @@ const CodeSnippet = ({
   return (
     <div
       className={cl(classes.codeSnippet, className)}
-      data-ds-color-mode='dark'
+      data-color-scheme='dark'
       {...rest}
     >
       {snippet && (
diff --git a/apps/_components/src/Footer/Footer.tsx b/apps/_components/src/Footer/Footer.tsx
index d3068152bb..9939f8e78e 100644
--- a/apps/_components/src/Footer/Footer.tsx
+++ b/apps/_components/src/Footer/Footer.tsx
@@ -49,7 +49,7 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
     <footer
       ref={ref}
       className={cl(classes.footer, className)}
-      data-ds-color-mode='dark'
+      data-color-scheme='dark'
       {...rest}
     >
       <div className={classes.top}>
diff --git a/apps/_components/src/Header/Header.module.css b/apps/_components/src/Header/Header.module.css
index 22f4fc7911..efa649d6e6 100644
--- a/apps/_components/src/Header/Header.module.css
+++ b/apps/_components/src/Header/Header.module.css
@@ -6,8 +6,8 @@
   z-index: 5;
   background-color: var(--ds-color-neutral-background-default);
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-background-subtle);
   }
 }
diff --git a/apps/_components/src/Header/Header.tsx b/apps/_components/src/Header/Header.tsx
index f1c2c1ba5d..c3a1a07cd7 100644
--- a/apps/_components/src/Header/Header.tsx
+++ b/apps/_components/src/Header/Header.tsx
@@ -74,7 +74,7 @@ const Header = ({
 
   const handleThemeChange = (newTheme: 'dark' | 'light') => {
     setTheme(newTheme);
-    document.documentElement.setAttribute('data-ds-color-mode', newTheme);
+    document.documentElement.setAttribute('data-color-scheme', newTheme);
   };
 
   useEffect(() => {
diff --git a/apps/storefront/app/bloggen/(frontpage)/layout.module.css b/apps/storefront/app/bloggen/(frontpage)/layout.module.css
index 61169be5c0..0d59007d84 100644
--- a/apps/storefront/app/bloggen/(frontpage)/layout.module.css
+++ b/apps/storefront/app/bloggen/(frontpage)/layout.module.css
@@ -6,8 +6,8 @@
   padding-top: var(--ds-spacing-18) !important;
   padding-bottom: var(--page-spacing-bottom) !important;
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-background-default);
   }
 }
diff --git a/apps/storefront/app/bloggen/(frontpage)/page.mdx b/apps/storefront/app/bloggen/(frontpage)/page.mdx
index 6b6f26b91f..dcbd34e171 100644
--- a/apps/storefront/app/bloggen/(frontpage)/page.mdx
+++ b/apps/storefront/app/bloggen/(frontpage)/page.mdx
@@ -77,8 +77,8 @@ export const metadata = {
     body {
       background-color: var(--ds-color-neutral-background-subtle);
 
-        [data-ds-color-mode='dark'] &,
-        [data-ds-color-mode='auto'] & {
+        [data-color-scheme='dark'] &,
+        [data-color-scheme='auto'] & {
           background-color: var(--ds-color-neutral-backround-default);
         }
     }
diff --git a/apps/storefront/app/bloggen/2024/v1rc1/page.mdx b/apps/storefront/app/bloggen/2024/v1rc1/page.mdx
index e8d4a4ad4e..00db28fd12 100644
--- a/apps/storefront/app/bloggen/2024/v1rc1/page.mdx
+++ b/apps/storefront/app/bloggen/2024/v1rc1/page.mdx
@@ -94,11 +94,11 @@ Denne installerer alle tre pakken, og inneholder tokens, CSS og React komponente
 
 #### Fargemodus
 
-Ønsker du å teste `dark`, `light` eller `contrast` modus kan du legge på data-atributtet `data-ds-color-mode="MODE"`.
+Ønsker du å teste `dark`, `light` eller `contrast` modus kan du legge på data-atributtet `data-color-scheme="MODE"`.
 Denne kan legges hvor som helst, og endrer alle barn til modusen du har valgt.
 
 <CodeSnippet language='ts'>
-  {`<Accordion data-ds-color-mode='dark'>...</Accordion>`}
+  {`<Accordion data-color-scheme='dark'>...</Accordion>`}
 </CodeSnippet>
 
 #### Design-tokens templat
diff --git a/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css b/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css
index 2e139e16a6..4c024aaf53 100644
--- a/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css
+++ b/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css
@@ -17,8 +17,8 @@
 }
 
 .card {
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     --dsc-card-background: var(--ds-color-neutral-surface-default);
   }
 }
diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
index 07cf0b1618..9ca96326d3 100644
--- a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
+++ b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
@@ -89,8 +89,8 @@ function PostLayout({
       <style>
         {`
           header {
-            [data-ds-color-mode='dark'] &,
-            [data-ds-color-mode='auto'] & {
+            [data-color-scheme='dark'] &,
+            [data-color-scheme='auto'] & {
               background-color: var(--ds-color-neutral-background-default) !important;
             }
           }
diff --git a/apps/storefront/app/komponenter/page.tsx b/apps/storefront/app/komponenter/page.tsx
index 51f875742f..b6f4ae0299 100644
--- a/apps/storefront/app/komponenter/page.tsx
+++ b/apps/storefront/app/komponenter/page.tsx
@@ -27,8 +27,8 @@ export default function page() {
     body {
       background-color: var(--ds-color-neutral-background-subtle);
 
-        [data-ds-color-mode='dark'] &,
-        [data-ds-color-mode='auto'] & {
+        [data-color-scheme='dark'] &,
+        [data-color-scheme='auto'] & {
           background-color: var(--ds-color-neutral-background-default);
         }
     }
diff --git a/apps/storefront/app/layout.tsx b/apps/storefront/app/layout.tsx
index beb7f1c0e0..967424b94a 100644
--- a/apps/storefront/app/layout.tsx
+++ b/apps/storefront/app/layout.tsx
@@ -99,7 +99,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang='en' data-ds-color-mode='auto'>
+    <html lang='en' data-color-scheme='auto'>
       <body>
         <div className='root'>
           <SkipLink href='#main'>Hopp til hovedinnhold</SkipLink>
diff --git a/apps/storefront/components/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css
index 19b86704fb..3a41cd7879 100644
--- a/apps/storefront/components/Banner/Banner.module.css
+++ b/apps/storefront/components/Banner/Banner.module.css
@@ -12,8 +12,8 @@
   background-color: var(--ds-color-neutral-background-default);
   gap: var(--ds-spacing-4);
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-background-subtle);
   }
 }
diff --git a/apps/storefront/components/ComponentCard/ComponentCard.module.css b/apps/storefront/components/ComponentCard/ComponentCard.module.css
index 96d1a5cc60..32c73a2b26 100644
--- a/apps/storefront/components/ComponentCard/ComponentCard.module.css
+++ b/apps/storefront/components/ComponentCard/ComponentCard.module.css
@@ -9,8 +9,8 @@
   text-decoration: none;
   transition: 0.2s transform ease-in-out, 0.2s box-shadow ease-in-out;
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-surface-default);
   }
 }
diff --git a/apps/storefront/components/NavigationCard/NavigationCard.module.css b/apps/storefront/components/NavigationCard/NavigationCard.module.css
index b1ac814260..dbacc822ee 100644
--- a/apps/storefront/components/NavigationCard/NavigationCard.module.css
+++ b/apps/storefront/components/NavigationCard/NavigationCard.module.css
@@ -59,8 +59,8 @@
   background-color: var(--ds-color-neutral-background-default);
   box-shadow: none;
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-surface-default);
   }
 }
@@ -68,8 +68,8 @@
 .white {
   background-color: var(--ds-color-neutral-background-default);
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-surface-default);
   }
 }
diff --git a/apps/storefront/components/TeaserCard/TeaserCard.module.css b/apps/storefront/components/TeaserCard/TeaserCard.module.css
index d75525ccbc..bace422f8b 100644
--- a/apps/storefront/components/TeaserCard/TeaserCard.module.css
+++ b/apps/storefront/components/TeaserCard/TeaserCard.module.css
@@ -11,8 +11,8 @@
   z-index: 2;
   height: 100%;
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-surface-default);
   }
 }
diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
index 347e009ab6..3d15d4e491 100644
--- a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
+++ b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
@@ -80,8 +80,8 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
       <style>
         {`
           header {
-            [data-ds-color-mode='dark'] &,
-            [data-ds-color-mode='auto'] & {
+            [data-color-scheme='dark'] &,
+            [data-color-scheme='auto'] & {
               background-color: var(--ds-color-neutral-background-default) !important;
             }
           }
diff --git a/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css b/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css
index 55a0cdea51..8cb6bb133e 100644
--- a/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css
+++ b/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css
@@ -20,8 +20,8 @@
 .outerPage {
   background-color: var(--ds-color-neutral-background-subtle);
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-background-default);
   }
 }
diff --git a/apps/storefront/layouts/NavPageLayout/NavPageLayout.module.css b/apps/storefront/layouts/NavPageLayout/NavPageLayout.module.css
index 9a6056ad02..bfedb12156 100644
--- a/apps/storefront/layouts/NavPageLayout/NavPageLayout.module.css
+++ b/apps/storefront/layouts/NavPageLayout/NavPageLayout.module.css
@@ -2,8 +2,8 @@
   padding-bottom: var(--ds-spacing-12);
   padding-top: var(--ds-spacing-12);
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-background-default);
   }
 }
diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx
index eca851977a..dba71a2f03 100644
--- a/apps/storybook/.storybook/preview.tsx
+++ b/apps/storybook/.storybook/preview.tsx
@@ -41,14 +41,14 @@ const getPath = (href: string | undefined): string => {
 
 const components = {
   p: (props: Props) => (
-    <Paragraph {...props} className='sb-unstyled' data-ds-color-mode='light' />
+    <Paragraph {...props} className='sb-unstyled' data-color-scheme='light' />
   ),
   ol: (props: Props) => (
     <List.Ordered
       {...props}
       style={{ maxWidth: '70ch' }}
       className='sb-unstyled'
-      data-ds-color-mode='light'
+      data-color-scheme='light'
     />
   ),
   ul: (props: Props) => (
@@ -56,7 +56,7 @@ const components = {
       {...props}
       style={{ maxWidth: '70ch' }}
       className='sb-unstyled'
-      data-ds-color-mode='light'
+      data-color-scheme='light'
     />
   ),
   li: (props: Props) => (
@@ -64,7 +64,7 @@ const components = {
       {...props}
       className='sb-unstyled'
       style={{ maxWidth: '70ch' }}
-      data-ds-color-mode='light'
+      data-color-scheme='light'
     />
   ),
   a: (props: LinkProps) => {
@@ -76,7 +76,7 @@ const components = {
         {...props}
         href={href}
         className='sb-unstyled'
-        data-ds-color-mode='light'
+        data-color-scheme='light'
       />
     );
   },
@@ -86,27 +86,27 @@ const components = {
       zebra
       className='sb-unstyled'
       style={{ width: '100%' }}
-      data-ds-color-mode='light'
+      data-color-scheme='light'
     />
   ),
   thead: (props: Props) => (
-    <Table.Head {...props} className='sb-unstyled' data-ds-color-mode='light' />
+    <Table.Head {...props} className='sb-unstyled' data-color-scheme='light' />
   ),
   tbody: (props: Props) => (
-    <Table.Body {...props} className='sb-unstyled' data-ds-color-mode='light' />
+    <Table.Body {...props} className='sb-unstyled' data-color-scheme='light' />
   ),
   tr: (props: Props) => (
-    <Table.Row {...props} className='sb-unstyled' data-ds-color-mode='light' />
+    <Table.Row {...props} className='sb-unstyled' data-color-scheme='light' />
   ),
   th: (props: Props) => (
     <Table.HeaderCell
       {...props}
       className='sb-unstyled'
-      data-ds-color-mode='light'
+      data-color-scheme='light'
     />
   ),
   td: (props: Props) => (
-    <Table.Cell {...props} className='sb-unstyled' data-ds-color-mode='light' />
+    <Table.Cell {...props} className='sb-unstyled' data-color-scheme='light' />
   ),
 };
 
@@ -177,7 +177,7 @@ const preview: Preview = {
       Auto: 'auto',
     },
     defaultTheme: 'Light',
-    attributeName: 'data-ds-color-mode',
+    attributeName: 'data-color-scheme',
     parentSelector:
       '.sbdocs-preview .docs-story div:first-of-type, .sb-show-main:has(#storybook-docs[hidden="true"])',
   }),
diff --git a/apps/storybook/docs-components/DoAndDont/DoAndDont.tsx b/apps/storybook/docs-components/DoAndDont/DoAndDont.tsx
index 4a474d78c1..28289ecc05 100644
--- a/apps/storybook/docs-components/DoAndDont/DoAndDont.tsx
+++ b/apps/storybook/docs-components/DoAndDont/DoAndDont.tsx
@@ -12,7 +12,7 @@ const Wrapper = ({ variant, description, image, alt }: WrapperProps) => {
   return (
     <figure
       className={cl(styles.wrapper, styles[variant])}
-      data-ds-color-mode='light'
+      data-color-scheme='light'
     >
       <div className={styles.header}>
         <div className={styles.icon}>{icon}</div>
diff --git a/apps/theme/components/Previews/Previews.module.css b/apps/theme/components/Previews/Previews.module.css
index 2a38f0d755..118fa79873 100644
--- a/apps/theme/components/Previews/Previews.module.css
+++ b/apps/theme/components/Previews/Previews.module.css
@@ -80,8 +80,8 @@
   box-shadow: var(--ds-shadow-md);
 }
 
-.preview[data-ds-color-mode='dark'],
-.preview[data-ds-color-mode='contrast'] {
+.preview[data-color-scheme='dark'],
+.preview[data-color-scheme='contrast'] {
   --background: var(--neutral-1);
   --foreground: var(--neutral-2);
 }
diff --git a/apps/theme/components/Previews/Previews.tsx b/apps/theme/components/Previews/Previews.tsx
index 27e9f354a5..c76bd43e47 100644
--- a/apps/theme/components/Previews/Previews.tsx
+++ b/apps/theme/components/Previews/Previews.tsx
@@ -123,7 +123,7 @@ export const Previews = ({ themeMode, onThemeModeChange }: PreviewsProps) => {
           classes[themeMode as keyof typeof classes],
         )}
         id='preview'
-        data-ds-color-mode={themeMode}
+        data-color-scheme={themeMode}
       >
         {previewMode === 'components' && <Components />}
         {previewMode === 'dashboard' && <Dashboard />}
diff --git a/packages/cli/src/tokens/build.ts b/packages/cli/src/tokens/build.ts
index d33a6d42d6..9c0241ca55 100644
--- a/packages/cli/src/tokens/build.ts
+++ b/packages/cli/src/tokens/build.ts
@@ -35,7 +35,7 @@ const sd = new StyleDictionary();
  */
 const buildConfigs = {
   typography: { getConfig: configs.typographyVariables, dimensions: ['typography'] },
-  'color-mode': { getConfig: configs.colorModeVariables, dimensions: ['mode'] },
+  'color-scheme': { getConfig: configs.colorSchemeVariables, dimensions: ['mode'] },
   'main-color': { getConfig: configs.mainColorVariables, dimensions: ['main-color'] },
   'support-color': { getConfig: configs.supportColorVariables, dimensions: ['support-color'] },
   semantic: { getConfig: configs.semanticVariables, dimensions: ['semantic'] },
diff --git a/packages/cli/src/tokens/build/configs.ts b/packages/cli/src/tokens/build/configs.ts
index da4c97f139..1c434f0f69 100644
--- a/packages/cli/src/tokens/build/configs.ts
+++ b/packages/cli/src/tokens/build/configs.ts
@@ -72,9 +72,9 @@ export type GetStyleDictionaryConfig = (
   },
 ) => StyleDictionaryConfig | { config: StyleDictionaryConfig; permutationOverrides?: Partial<ThemePermutation> }[];
 
-const colorModeVariables: GetStyleDictionaryConfig = ({ mode = 'light', theme }, { outPath }) => {
-  const selector = `${mode === 'light' ? ':root, ' : ''}[data-ds-color-mode="${mode}"]`;
-  const layer = `ds.theme.color-mode.${mode}`;
+const colorSchemeVariables: GetStyleDictionaryConfig = ({ mode = 'light', theme }, { outPath }) => {
+  const selector = `${mode === 'light' ? ':root, ' : ''}[data-color-scheme="${mode}"]`;
+  const layer = `ds.theme.color-scheme.${mode}`;
 
   return {
     usesDtcg,
@@ -93,7 +93,7 @@ const colorModeVariables: GetStyleDictionaryConfig = ({ mode = 'light', theme },
         transforms: dsTransformers,
         files: [
           {
-            destination: `color-mode/${mode}.css`,
+            destination: `color-scheme/${mode}.css`,
             format: formats.colormode.name,
             filter: (token) => !token.isSource && typeEquals('color', token),
           },
@@ -315,7 +315,7 @@ const typographyVariables: GetStyleDictionaryConfig = ({ theme, typography }, {
 };
 
 export const configs = {
-  colorModeVariables,
+  colorSchemeVariables,
   mainColorVariables: colorCategoryVariables('main'),
   supportColorVariables: colorCategoryVariables('support'),
   typographyVariables,
diff --git a/packages/cli/src/tokens/build/formats/css.ts b/packages/cli/src/tokens/build/formats/css.ts
index edcc3a4dc1..33e2dba27d 100644
--- a/packages/cli/src/tokens/build/formats/css.ts
+++ b/packages/cli/src/tokens/build/formats/css.ts
@@ -8,7 +8,7 @@ import { getValue, isColorCategoryToken, isGlobalColorToken, isSemanticToken } f
 
 const prefersColorScheme = (mode: string, content: string) => `
 @media (prefers-color-scheme: ${mode}) {
-  [data-ds-color-mode="auto"] ${content}
+  [data-color-scheme="auto"] ${content}
 }
 `;
 
diff --git a/packages/cli/src/tokens/build/utils/entryfile.ts b/packages/cli/src/tokens/build/utils/entryfile.ts
index e230d7602d..13238b71d5 100644
--- a/packages/cli/src/tokens/build/utils/entryfile.ts
+++ b/packages/cli/src/tokens/build/utils/entryfile.ts
@@ -9,11 +9,11 @@ import * as R from 'ramda';
  */
 // biome-ignore format: keep array as one line per item
 const sortOrder = [
-  'color-mode/light',
+  'color-scheme/light',
   'typography/secondary',
   'semantic',
-  'color-mode/dark',
-  'color-mode/contrast',
+  'color-scheme/dark',
+  'color-scheme/contrast',
   'typography/primary',
   'color/',
   'builtin-colors',
diff --git a/packages/css/base/base.css b/packages/css/base/base.css
index bd61bb5da7..c2789b381e 100644
--- a/packages/css/base/base.css
+++ b/packages/css/base/base.css
@@ -13,7 +13,7 @@
 }
 
 :root,
-[data-ds-color-mode] {
+[data-color-scheme] {
   --dsc-focus-border-width: 3px; /* Default focus border width */
   --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
   --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width);
@@ -29,7 +29,7 @@
 
 /* Set default background and color on <body> (not :root) to align with best practice */
 body,
-[data-ds-color-mode] {
+[data-color-scheme] {
   color: var(--ds-color-neutral-text-default);
   background-color: var(--ds-color-neutral-background-default);
 }
diff --git a/packages/react/stories/Typography.mdx b/packages/react/stories/Typography.mdx
index 3c97e573ca..bc1bc0d4be 100644
--- a/packages/react/stories/Typography.mdx
+++ b/packages/react/stories/Typography.mdx
@@ -70,6 +70,6 @@ Brukes når det trengs tekst over flere linjer. Mesteparten av teksten på et ne
 
 <Canvas of={typographyStories.EksempelTekst} />
 
-Vi endrer `color` og `background-color` for deg når du setter `data-ds-color-mode`.
+Vi endrer `color` og `background-color` for deg når du setter `data-color-scheme`.
 
 <Canvas of={typographyStories.EksempelTekstDark} />
diff --git a/packages/react/stories/Typography.stories.tsx b/packages/react/stories/Typography.stories.tsx
index 5cd80f98e6..57242113d9 100644
--- a/packages/react/stories/Typography.stories.tsx
+++ b/packages/react/stories/Typography.stories.tsx
@@ -87,7 +87,7 @@ export const EksempelTekst: StoryFn = () => (
 );
 
 export const EksempelTekstDark: StoryFn = () => (
-  <div data-ds-color-mode='dark'>
+  <div data-color-scheme='dark'>
     <Heading
       level={1}
       data-size='xl'
diff --git a/packages/react/stories/bruk.mdx b/packages/react/stories/bruk.mdx
index dc966fb8f4..9774f12e11 100644
--- a/packages/react/stories/bruk.mdx
+++ b/packages/react/stories/bruk.mdx
@@ -125,7 +125,7 @@ Dette gjør du ved å først legge reseten din i en layer, og så sortere denne
 Vi tilbyr flere data attributter som kan brukes for å endre tema på komponentene.
 
 <br />
-#### `data-ds-color-mode`
+#### `data-color-scheme`
 
 Brukes til å endre fargemodus på komponentene. Mulige verdier er `light`, `dark` og `auto`.
 Dersom `auto` er valgt, vil fargemodusen endres basert på brukerens preferanser ved hjelp av
diff --git a/packages/react/stories/showcase.stories.tsx b/packages/react/stories/showcase.stories.tsx
index a928c01ad7..49d9081380 100644
--- a/packages/react/stories/showcase.stories.tsx
+++ b/packages/react/stories/showcase.stories.tsx
@@ -79,7 +79,7 @@ export const Showcase: StoryFn = () => {
         <Fieldset>
           <Fieldset.Legend>
             Fargemodus
-            <code data-size='xs'>(data-ds-color-mode)</code>
+            <code data-size='xs'>(data-color-scheme)</code>
           </Fieldset.Legend>
           <ToggleGroup value={colorMode} onChange={setColorMode}>
             {colorModes.map((colorMode) => (
@@ -106,7 +106,7 @@ export const Showcase: StoryFn = () => {
       <div
         className={classes.components}
         data-size={size}
-        data-ds-color-mode={colorMode}
+        data-color-scheme={colorMode}
         data-ds-typography={typographyMode}
       >
         <div className={cl(classes.card, classes.checkbox)}>
diff --git a/packages/theme/brand/altinn.css b/packages/theme/brand/altinn.css
index b45fb17fa2..2fc496ed92 100644
--- a/packages/theme/brand/altinn.css
+++ b/packages/theme/brand/altinn.css
@@ -6,8 +6,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.light {
-:root, [data-ds-color-mode="light"] {
+@layer ds.theme.color-scheme.light {
+:root, [data-color-scheme="light"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
@@ -240,7 +240,7 @@
 }
  
 @media (prefers-color-scheme: light) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
@@ -675,8 +675,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.dark {
-[data-ds-color-mode="dark"] {
+@layer ds.theme.color-scheme.dark {
+[data-color-scheme="dark"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
@@ -909,7 +909,7 @@
 }
  
 @media (prefers-color-scheme: dark) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
diff --git a/packages/theme/brand/altinn/color-mode/dark.css b/packages/theme/brand/altinn/color-scheme/dark.css
similarity index 99%
rename from packages/theme/brand/altinn/color-mode/dark.css
rename to packages/theme/brand/altinn/color-scheme/dark.css
index 292ad18d88..ab8e2ff806 100644
--- a/packages/theme/brand/altinn/color-mode/dark.css
+++ b/packages/theme/brand/altinn/color-scheme/dark.css
@@ -2,8 +2,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.dark {
-[data-ds-color-mode="dark"] {
+@layer ds.theme.color-scheme.dark {
+[data-color-scheme="dark"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
@@ -236,7 +236,7 @@
 }
  
 @media (prefers-color-scheme: dark) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
diff --git a/packages/theme/brand/altinn/color-mode/light.css b/packages/theme/brand/altinn/color-scheme/light.css
similarity index 99%
rename from packages/theme/brand/altinn/color-mode/light.css
rename to packages/theme/brand/altinn/color-scheme/light.css
index 73e614939c..4ff6dd1059 100644
--- a/packages/theme/brand/altinn/color-mode/light.css
+++ b/packages/theme/brand/altinn/color-scheme/light.css
@@ -2,8 +2,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.light {
-:root, [data-ds-color-mode="light"] {
+@layer ds.theme.color-scheme.light {
+:root, [data-color-scheme="light"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
@@ -236,7 +236,7 @@
 }
  
 @media (prefers-color-scheme: light) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
diff --git a/packages/theme/brand/digdir.css b/packages/theme/brand/digdir.css
index 20a45b765f..611daac77e 100644
--- a/packages/theme/brand/digdir.css
+++ b/packages/theme/brand/digdir.css
@@ -6,8 +6,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.light {
-:root, [data-ds-color-mode="light"] {
+@layer ds.theme.color-scheme.light {
+:root, [data-color-scheme="light"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
@@ -240,7 +240,7 @@
 }
  
 @media (prefers-color-scheme: light) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
@@ -675,8 +675,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.dark {
-[data-ds-color-mode="dark"] {
+@layer ds.theme.color-scheme.dark {
+[data-color-scheme="dark"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
@@ -909,7 +909,7 @@
 }
  
 @media (prefers-color-scheme: dark) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
diff --git a/packages/theme/brand/digdir/color-mode/dark.css b/packages/theme/brand/digdir/color-scheme/dark.css
similarity index 99%
rename from packages/theme/brand/digdir/color-mode/dark.css
rename to packages/theme/brand/digdir/color-scheme/dark.css
index b8fe5f07b3..57ae4e2cf4 100644
--- a/packages/theme/brand/digdir/color-mode/dark.css
+++ b/packages/theme/brand/digdir/color-scheme/dark.css
@@ -2,8 +2,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.dark {
-[data-ds-color-mode="dark"] {
+@layer ds.theme.color-scheme.dark {
+[data-color-scheme="dark"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
@@ -236,7 +236,7 @@
 }
  
 @media (prefers-color-scheme: dark) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
diff --git a/packages/theme/brand/digdir/color-mode/light.css b/packages/theme/brand/digdir/color-scheme/light.css
similarity index 99%
rename from packages/theme/brand/digdir/color-mode/light.css
rename to packages/theme/brand/digdir/color-scheme/light.css
index 430cf0a043..07466d1a57 100644
--- a/packages/theme/brand/digdir/color-mode/light.css
+++ b/packages/theme/brand/digdir/color-scheme/light.css
@@ -2,8 +2,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.light {
-:root, [data-ds-color-mode="light"] {
+@layer ds.theme.color-scheme.light {
+:root, [data-color-scheme="light"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
@@ -236,7 +236,7 @@
 }
  
 @media (prefers-color-scheme: light) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
diff --git a/packages/theme/brand/portal.css b/packages/theme/brand/portal.css
index ca36a2c896..9bcfc96f8d 100644
--- a/packages/theme/brand/portal.css
+++ b/packages/theme/brand/portal.css
@@ -6,8 +6,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.light {
-:root, [data-ds-color-mode="light"] {
+@layer ds.theme.color-scheme.light {
+:root, [data-color-scheme="light"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
@@ -240,7 +240,7 @@
 }
  
 @media (prefers-color-scheme: light) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
@@ -675,8 +675,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.dark {
-[data-ds-color-mode="dark"] {
+@layer ds.theme.color-scheme.dark {
+[data-color-scheme="dark"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
@@ -909,7 +909,7 @@
 }
  
 @media (prefers-color-scheme: dark) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
diff --git a/packages/theme/brand/portal/color-mode/dark.css b/packages/theme/brand/portal/color-scheme/dark.css
similarity index 99%
rename from packages/theme/brand/portal/color-mode/dark.css
rename to packages/theme/brand/portal/color-scheme/dark.css
index 7e46d98413..e3adcfc4cd 100644
--- a/packages/theme/brand/portal/color-mode/dark.css
+++ b/packages/theme/brand/portal/color-scheme/dark.css
@@ -2,8 +2,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.dark {
-[data-ds-color-mode="dark"] {
+@layer ds.theme.color-scheme.dark {
+[data-color-scheme="dark"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
@@ -236,7 +236,7 @@
 }
  
 @media (prefers-color-scheme: dark) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
diff --git a/packages/theme/brand/portal/color-mode/light.css b/packages/theme/brand/portal/color-scheme/light.css
similarity index 99%
rename from packages/theme/brand/portal/color-mode/light.css
rename to packages/theme/brand/portal/color-scheme/light.css
index debeae3a7f..f89e3d21ed 100644
--- a/packages/theme/brand/portal/color-mode/light.css
+++ b/packages/theme/brand/portal/color-scheme/light.css
@@ -2,8 +2,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.light {
-:root, [data-ds-color-mode="light"] {
+@layer ds.theme.color-scheme.light {
+:root, [data-color-scheme="light"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
@@ -236,7 +236,7 @@
 }
  
 @media (prefers-color-scheme: light) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
diff --git a/packages/theme/brand/uutilsynet.css b/packages/theme/brand/uutilsynet.css
index 6186cc949b..1b85b32f60 100644
--- a/packages/theme/brand/uutilsynet.css
+++ b/packages/theme/brand/uutilsynet.css
@@ -6,8 +6,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.light {
-:root, [data-ds-color-mode="light"] {
+@layer ds.theme.color-scheme.light {
+:root, [data-color-scheme="light"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
@@ -240,7 +240,7 @@
 }
  
 @media (prefers-color-scheme: light) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
@@ -675,8 +675,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.dark {
-[data-ds-color-mode="dark"] {
+@layer ds.theme.color-scheme.dark {
+[data-color-scheme="dark"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
@@ -909,7 +909,7 @@
 }
  
 @media (prefers-color-scheme: dark) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
diff --git a/packages/theme/brand/uutilsynet/color-mode/dark.css b/packages/theme/brand/uutilsynet/color-scheme/dark.css
similarity index 99%
rename from packages/theme/brand/uutilsynet/color-mode/dark.css
rename to packages/theme/brand/uutilsynet/color-scheme/dark.css
index 489c1fc0d6..0e563edbc6 100644
--- a/packages/theme/brand/uutilsynet/color-mode/dark.css
+++ b/packages/theme/brand/uutilsynet/color-scheme/dark.css
@@ -2,8 +2,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.dark {
-[data-ds-color-mode="dark"] {
+@layer ds.theme.color-scheme.dark {
+[data-color-scheme="dark"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
@@ -236,7 +236,7 @@
 }
  
 @media (prefers-color-scheme: dark) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #031d30;
   --ds-global-blue-2: #032540;
   --ds-global-blue-3: #043256;
diff --git a/packages/theme/brand/uutilsynet/color-mode/light.css b/packages/theme/brand/uutilsynet/color-scheme/light.css
similarity index 99%
rename from packages/theme/brand/uutilsynet/color-mode/light.css
rename to packages/theme/brand/uutilsynet/color-scheme/light.css
index 8c29619547..ca5c5ee218 100644
--- a/packages/theme/brand/uutilsynet/color-mode/light.css
+++ b/packages/theme/brand/uutilsynet/color-scheme/light.css
@@ -2,8 +2,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.light {
-:root, [data-ds-color-mode="light"] {
+@layer ds.theme.color-scheme.light {
+:root, [data-color-scheme="light"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
@@ -236,7 +236,7 @@
 }
  
 @media (prefers-color-scheme: light) {
-  [data-ds-color-mode="auto"] {
+  [data-color-scheme="auto"] {
   --ds-global-blue-1: #fefeff;
   --ds-global-blue-2: #edf5fa;
   --ds-global-blue-3: #d3e5f4;
diff --git a/plugins/figma/src/ui/app.tsx b/plugins/figma/src/ui/app.tsx
index 676ca02464..38d5e876bd 100644
--- a/plugins/figma/src/ui/app.tsx
+++ b/plugins/figma/src/ui/app.tsx
@@ -15,7 +15,7 @@ function App() {
   const dsMode = useDsMode();
 
   return (
-    <div className='page' data-ds-color-mode={dsMode} data-size='sm'>
+    <div className='page' data-color-scheme={dsMode} data-size='sm'>
       <div className='content'>
         <Routes>
           <Route path='/' element={<Navigate to='/themes' replace />} />
diff --git a/plugins/figma/src/ui/theme.css b/plugins/figma/src/ui/theme.css
index be69cff5a3..40907f7479 100644
--- a/plugins/figma/src/ui/theme.css
+++ b/plugins/figma/src/ui/theme.css
@@ -6,9 +6,9 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.light {
+@layer ds.theme.color-scheme.light {
   :root,
-  [data-ds-color-mode='light'] {
+  [data-color-scheme='light'] {
     --ds-color-accent-1: #fefeff;
     --ds-color-accent-2: #eef4fa;
     --ds-color-accent-3: #d4e5f3;
@@ -316,7 +316,7 @@
   }
 
   @media (prefers-color-scheme: light) {
-    [data-ds-color-mode='auto'] {
+    [data-color-scheme='auto'] {
       --ds-color-accent-1: #fefeff;
       --ds-color-accent-2: #eef4fa;
       --ds-color-accent-3: #d4e5f3;
@@ -852,8 +852,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.dark {
-  [data-ds-color-mode='dark'] {
+@layer ds.theme.color-scheme.dark {
+  [data-color-scheme='dark'] {
     --ds-color-accent-1: #001c36;
     --ds-color-accent-2: #002445;
     --ds-color-accent-3: #00315c;
@@ -1161,7 +1161,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    [data-ds-color-mode='auto'] {
+    [data-color-scheme='auto'] {
       --ds-color-accent-1: #001c36;
       --ds-color-accent-2: #002445;
       --ds-color-accent-3: #00315c;
@@ -1474,8 +1474,8 @@
  * These files are generated from design tokens defind using Token Studio
  */
 
-@layer ds.theme.color-mode.contrast {
-  [data-ds-color-mode='contrast'] {
+@layer ds.theme.color-scheme.contrast {
+  [data-color-scheme='contrast'] {
     --ds-color-accent-1: #000409;
     --ds-color-accent-2: #001427;
     --ds-color-accent-3: #002445;