From 9c30a5dbf4100664fad64c61725096447c93b8c3 Mon Sep 17 00:00:00 2001
From: Masha_Rudenko <mlutova@xbsoftware.com>
Date: Tue, 13 Feb 2024 16:35:57 +0300
Subject: [PATCH] [update] improve themes guides

---
 docs/themes/base_themes_configuration.md |  2 -
 docs/themes/custom_theme.md              |  7 +++
 docs/themes/setting_theme.md             | 73 ----------------------
 docs/themes/themes.md                    | 78 +++++++++++++++++++++++-
 sidebars.js                              |  3 +-
 5 files changed, 83 insertions(+), 80 deletions(-)
 delete mode 100644 docs/themes/setting_theme.md

diff --git a/docs/themes/base_themes_configuration.md b/docs/themes/base_themes_configuration.md
index b0eca7d1..028467b2 100644
--- a/docs/themes/base_themes_configuration.md
+++ b/docs/themes/base_themes_configuration.md
@@ -95,8 +95,6 @@ If you want to override some color values for a separate [Spreadsheet theme](spr
 
 <script>
     const spreadsheet = new dhx.Spreadsheet("spreadsheet",{});
-
-    spreadsheet.parse(dataset);
     
     dhx.setTheme("light");
 </script>
diff --git a/docs/themes/custom_theme.md b/docs/themes/custom_theme.md
index 8f693d47..a704d815 100644
--- a/docs/themes/custom_theme.md
+++ b/docs/themes/custom_theme.md
@@ -83,8 +83,15 @@ To make a custom theme of your own, you need to override the values of the inter
         --dhx-spreadsheet-range-color-6: #d8ffa6;
         --dhx-spreadsheet-range-color-7: #e4e4e4;
         --dhx-spreadsheet-range-color-8: #ecb6ff;
+        /* end DHTMLX Spreadsheet service variables */
     }
 </style>
+
+<script>
+    const spreadsheet = new dhx.Spreadsheet("spreadsheet",{});
+    
+    dhx.setTheme("custom-theme-dark");
+</script>
 ~~~
 
 **Related sample:** [Spreadsheet. Custom themes (skins)](https://snippet.dhtmlx.com/59nt1rcb?mode=wide)
\ No newline at end of file
diff --git a/docs/themes/setting_theme.md b/docs/themes/setting_theme.md
deleted file mode 100644
index 83a817a9..00000000
--- a/docs/themes/setting_theme.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-sidebar_label: Setting themes
-title: Setting Themes
-description: You can learn how to set a theme in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
----
-
-# Setting themes
-
-To set the necessary theme, be it a built-in Spreadsheet theme or a custom one, use one of the ways described below:
-
-### Changing the "data" attribute 
-
-You can choose from the following variants:
-
-- change the **"data-dhx-theme"** attribute for the *chosen container*:
-
-~~~html title="index.html"
-<!-- component container -->
-<div data-dhx-theme="dark" style="height: 100%" id="chart"></div>
-~~~
-
-- change the **"data-dhx-theme"** attribute for the *root* element:
-
-~~~js title="index.js"
-// your code here
-
-document.documentElement.setAttribute("data-dhx-theme", "dark");
-~~~
-
-### Applying the "dhx.setTheme()" method
-
-The **dhx.setTheme()** method takes the following parameters:
-
-- `theme: string` - (required) the name of the theme. It can be:
-    - the name of the Spreadsheet theme: *"light" | "contrast-light" | "dark" | "contrast-dark"*
-    - the name of a [custom theme](themes/custom_theme.md)
-    - *"light"* - by default
-- `container: string | HTMLElement` - (optional) the container to which the theme must be applied. It can be:
-    - an HTMLElement
-    - a string value with the ID of the container or the ID of a Layout cell
-    - *document.documentElement* - by default
-
-Below you'll find the examples of the **dhx.setTheme()** method usage:
-
-~~~html title="Example 1"
-<div id="container"></div>
-<div>Other content</div>
-
-<script>
-    new dhx.Spreadsheet("container");
-
-    dhx.setTheme("dark", "container"); // apply the "dark" theme to the container with the "container" ID
-    //or
-    dhx.setTheme("dark"); // apply the "dark" theme to the body 
-</script>
-~~~
-
-~~~html title="Example 2"
-<div id="container-1"></div>
-<div>Other content</div>
-
-<script>
-    new dhx.Spreadsheet("container-1");
-    
-    const container = document.getElementById("container-1");
-    dhx.setTheme("dark", container); //apply the "dark" theme to the container specified via an HTMLElement
-</script>
-~~~
-
-**Related samples:**
-
-- [Spreadsheet. Light, Dark, Light High Contrast, and Dark High Contrast themes (skins)](https://snippet.dhtmlx.com/t6rspqai?tag=spreadsheet)
-- [Spreadsheet. Custom themes (skins)](https://snippet.dhtmlx.com/59nt1rcb?tag=spreadsheet)
diff --git a/docs/themes/themes.md b/docs/themes/themes.md
index 2a0866bf..fa80c24d 100644
--- a/docs/themes/themes.md
+++ b/docs/themes/themes.md
@@ -100,14 +100,14 @@ The default **"light"** theme is configured on the base of the CSS variables whi
     --dhx-z-index-overlay-total: 10000000;
     /* end z-index */
 
-    /* only service color schema */
+    /* only service color scheme */
     --dhx-l-contrast-offset: 0%; /* lightness contrast theme offset */
     --dhx-l-h-offset: 10%; /* lightness hover offset */
     --dhx-s-d-offset: 30%; /* saturation disable offset */
     --dhx-l-d: 70%; /* lightness disable value */
     --dhx-a-l-h: .15; /* alpha light hover value */
     --dhx-a-l-a: .3; /* alpha light active value */
-    /* only service */
+    /* end only service color scheme */
 
     /* color scheme */
     --dhx-h-primary: 200;
@@ -412,4 +412,76 @@ The list of variables specific for the Spreadsheet component includes the follow
     --dhx-spreadsheet-range-color-8: #ecb6ff;
 
 }
-~~~
\ No newline at end of file
+~~~
+
+## Setting themes
+
+To set the necessary theme, be it a built-in Spreadsheet theme or a [custom](themes/custom_theme.md) one, use one of the ways described below:
+
+### Using the ***data-dhx-theme*** attribute 
+
+You can choose from the following variants:
+
+- set the ***data-dhx-theme*** attribute for the *chosen container*:
+
+~~~html title="index.html"
+<!-- component container -->
+<div data-dhx-theme="dark" style="height: 100%" id="spreadsheet"></div>
+~~~
+
+- set the ***data-dhx-theme*** attribute for an *HTML element*, e.g. for *documentElement*:
+
+~~~js title="index.js"
+document.documentElement.setAttribute("data-dhx-theme", "dark");
+~~~
+
+### Using the ***dhx.setTheme()*** method
+
+The ***dhx.setTheme()*** method takes the following parameters:
+
+- ***theme: string*** - (required) the name of the theme. It can be:
+    - the name of the Spreadsheet theme: *"light" | "contrast-light" | "dark" | "contrast-dark"*
+    - the name of a [custom theme](themes/custom_theme.md)
+    - *"light"* - by default
+- ***container: string | HTMLElement*** - (optional) the container to which the theme must be applied. It can be:
+    - an HTMLElement
+    - a string value with the ID of the container or the ID of a Layout cell
+    - *document.documentElement* - by default
+
+Below you'll find the examples of the ***dhx.setTheme()*** method usage:
+
+- setting a theme either to the body or to the container 
+
+~~~html 
+<div id="container"></div>
+<div>Other content</div>
+
+<script>
+    new dhx.Spreadsheet("container");
+
+    dhx.setTheme("dark"); //applies the "dark" theme to the body 
+    //or
+    //applies the "dark" theme to the container with the "container" id
+    dhx.setTheme("dark", "container"); 
+</script>
+~~~
+
+- setting a theme to the container specified via an HTMLElement
+
+~~~html 
+<div id="container-1"></div>
+<div>Other content</div>
+
+<script>
+    new dhx.Spreadsheet("container-1");
+    
+    const container = document.getElementById("container-1");
+    //applies the "dark" theme to the container specified via an HTMLElement
+    dhx.setTheme("dark", container); 
+</script>
+~~~
+
+**Related samples:**
+
+- [Spreadsheet. Light, Dark, Light High Contrast, and Dark High Contrast themes (skins)](https://snippet.dhtmlx.com/t6rspqai?tag=spreadsheet)
+- [Spreadsheet. Custom themes (skins)](https://snippet.dhtmlx.com/59nt1rcb?tag=spreadsheet)
diff --git a/sidebars.js b/sidebars.js
index e12638d8..67c6bcb4 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -264,8 +264,7 @@ module.exports = {
               items: [
                 "themes/themes",
                 "themes/base_themes_configuration",
-                "themes/custom_theme",
-                "themes/setting_theme"
+                "themes/custom_theme"
             ]},
             {
               type: "category",