docs: update to remove -mode from css classes

danielroe · danielroe · commit 7cce31d98b58 · 2025-11-11T16:13:01.000Z
diff --git a/docs/content/1.getting-started/1.index.md b/docs/content/1.getting-started/1.index.md
@@ -9,7 +9,7 @@ Dark and light mode with auto detection made easy with Nuxt 🌗
 
 ## Features
 
-- Add `.${color}-mode` class to `<html>` for easy CSS theming
+- Add a configurable `.${color}` class to `<html>` for easy CSS theming
 - Force a page to a specific color mode (perfect for incremental development)
 - Works with client-side and universal rendering
 - Works out of the box with [@nuxtjs/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
@@ -27,4 +27,4 @@ export default defineNuxtConfig({
 })
 ```
 
-You are ready to start theming your CSS with `.dark-mode` and `.light-mode` classes ✨
+You are ready to start using color mode in your app with `.dark` and `.light` classes ✨
diff --git a/docs/content/2.usage/1.basic.md b/docs/content/2.usage/1.basic.md
@@ -38,13 +38,17 @@ body {
   background-color: #fff;
   color: rgba(0,0,0,0.8);
 }
-.dark-mode body {
+.dark body {
   background-color: #091a28;
   color: #ebf4f1;
 }
-.sepia-mode body {
+.sepia body {
   background-color: #f1e7d0;
   color: #433422;
 }
 </style>
 ```
+
+::callout
+You can configure the `colorMode.classSuffix` option in your `nuxt.config.ts` to modify these class names. See the [configuration](/usage/configuration) section for more details.
+::
diff --git a/docs/content/index.md b/docs/content/index.md
@@ -17,7 +17,7 @@ orientation: horizontal
 Dark and light mode with [auto detection]{.text-primary}
 
 #description
-Plug-and-play color mode module for Nuxt with auto detection made easy. Add `.dark-mode` and `.light-mode` classes to your CSS for easy theming.
+Plug-and-play color mode module for Nuxt with auto detection made easy. Easily theme your app with `.dark` and `.light` classes.
 
 #links
   :::u-button
@@ -59,7 +59,7 @@ Get the most of your app with :br [powerful features]{.text-primary}
   Easy CSS Theming
   
   #description
-  Add `.dark-mode` and `.light-mode` classes to your CSS for effortless theming.
+  Add `.dark` and `.light` classes to your CSS for effortless theming.
   :::
 
   :::u-page-card
