docs: recommend using a parent theme with dsp (vaadin#2947)

Co-authored-by: Russell JT Dyer <[email protected]>

articles/tools/dspublisher/custom-theme.adoc

@@ -1,15 +1,17 @@
 ---
 title: Custom Theme
-description: The rendered UI examples within the documentation pages can use a custom theme, which is the same theme you would use for the applications you create using your design system.
+description: Using a custom theme when rendering UI examples within documentation pages, the same theme for applications you create with your design system.
 order: 60
 ---
 
 
 = Custom Theme for Rendered UI Examples
 
-A theme for rendered UI examples is used from a Maven repository, such as Maven Central or a local repository. Once you've <<{articles}/styling/application-theme#,created an application theme>> and <<{articles}/styling/advanced/multi-app-themes#,packaged it as a JAR file>>, you can install it to a repository.
+The rendered UI examples within the documentation pages can use a custom theme, which is the same theme you would use for applications you create with your design system.
 
-Once the theme is installed in a repository, you can use it by adding a dependency for it to the [filename]`pom.xml` in the documentation project's root folder:
+A theme for rendered UI examples is used from a Maven repository, such as Maven Central or a local repository. Once you've <<{articles}/styling/application-theme#,created an application theme>> and <<{articles}/styling/advanced/multi-app-themes#,packaged it as a JAR file>>, you can install it in a repository.
+
+Once the theme is installed in a repository, you can use it by adding a dependency for it to the [filename]`pom.xml` file in the documentation project's root folder:
 
 .[filename]`pom.xml`
 [source,xml]
@@ -24,22 +26,28 @@ Once the theme is installed in a repository, you can use it by adding a dependen
 </dependencies>
 ----
 
-Next, the theme needs to be applied to the component examples. Change the <<{articles}/styling/application-theme/#applying-a-theme, `@Theme` annotation>> in `src/main/java/com/vaadin/demo/DemoExporter.java` as shown in the following:
+Next, the theme needs to be applied to the component examples. Set it as the <<{articles}/styling/advanced/parent-and-sub-themes#, parent theme>> for the default "docs" theme by adding `"parent": "exampletheme"` to the [filename]`theme.json` file, in the `frontend/themes/docs/` directory, as shown in the following:
 
-.[filename]`src/main/java/com/vaadin/demo/DemoExporter.java`
-[source,java]
+.[filename]`frontend/themes/docs/theme.json`
+[source,json]
 ----
-@Theme("exampletheme")
-public abstract class DemoExporter<T extends Component> extends WebComponentExporter<T> {
-  ...
+{
+  "lumoImports": ["typography", "color", "spacing", "badge", "utility"],
+  "parent": "exampletheme"
 }
 ----
 
 The website needs to be rebuilt -- or restarted in development mode -- in order for the change to take effect.
 
-.Theme for UI Examples vs. Website Styling
+.UI Examples Theme vs. Website Styling
 [NOTE]
-This page is about the theme used for rendered UI examples, which is distinct from the documentation website's styles covered in the <<customization#,Site Customization>> documentation.
+This page is about the theme used for rendered UI examples. This is distinct from the documentation website's styles covered in the <<customization#,Site Customization>> documentation.
 
 
 [discussion-id]`28290DCF-3F92-4ECE-B72D-32641359C096`
+
+++++
+<style>
+[class^=PageHeader-module-descriptionContainer] {display: none;}
+</style>
+++++