[docs]:App builder 1.6 updates (#9514)

* add app-builder doc updates on Table and themes

* breakdown chart docs in two parts and add custom css for headers

* update chart example images and add more examples

* revamp table component and minor fixes

* fix typos

* fix table formatting for docusarus v3

* fix filepicker table

* create new version

* fix grammar and tables

docs/docs/app-builder/left-sidebar.md

@@ -46,20 +46,16 @@ Check the detailed guide on **[using Inspector](/docs/how-to/use-inspector)**.
 
 Debugger records any errors that occur during the execution of queries. For instance, if a database query fails because the database is unavailable or if a REST API query fails due to an incorrect URL, the errors will be captured and shown in the debugger. Additionally, the debugger provides pertinent information associated with the error alongside the error message.
 
-If you wish to prevent the debugger from closing, you can simply click on the pin icon located in the top-right corner. By doing so, the debugger will stay open until you decide to unpin it.
+If you wish to prevent the debugger from closing, you can simply click on the pin icon located in the top-right corner. By doing so, the debugger will stay open until you decide to unpin it. 
+
+To clear all the errors on the debugger, you can click on the `Clear` button.
 
 Debugger consists of two main sections:
 
 1. **All Log:** In this section, you can view a comprehensive list of all the logs generated during the execution of the application. These logs may include various types of messages, such as success messages, warning, and error messages.
 
 2. **Errors:** This section specifically focuses on displaying the error messages that occurred during the program's execution. These error messages indicate issues or problems that need attention, as they may lead to unexpected behaviors of the application. 
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/newdebugger.gif" alt="App Builder: Left-sidebar"/>
-
-</div>
-
 ## Global Settings
 
 To configure the app's global settings, click on the kebab menu(three vertical dots) on the left of the app name. Global settings include:
@@ -69,12 +65,13 @@ To configure the app's global settings, click on the kebab menu(three vertical d
 - **Hide header for launched apps**: Toggle this on to the hide the tooljet's header when the applications are launched
 - **Maintenance mode**: Toggle this on to put the application in maintenance mode. When in **maintenance mode**, on launching the app, the user will get an error message that **the app is under maintenance**.
 - **Max width of canvas**: Modify the width of the canvas in **px** or **%**. The default width is `1292` px.
-- **Background color of canvas**: Enter the hex color code or choose a color from the picker to change the background color of the canvas. You can also click on the **Fx** to programmatically set the value.
+- **Canvas background**: Enter the hex color code or choose a color from the picker to change the background color of the canvas. You can also click on the **fx** to programmatically set the value.
+- **App mode**: Select between three theme modes - Auto (default, adapts to browser settings), Light (brighter interface for well-lit conditions), and Dark (reduces eye strain in low light). 
 - **Export app**: Click on the [Export app](/docs/dashboard/#export-app) button to export the application as a JSON file. You can import this JSON file in any other workspace to use the application.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/globalsettings.png" alt="App Builder: Left-sidebar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/globalsettings-v2.png" alt="App Builder: Left-sidebar"/>
 
 </div>