feat: Move theme switcher to the settings page.

Author: bgrozev

src/components/SettingsComponent.js

@@ -11,6 +11,7 @@ import {
     Typography
 } from '@mui/material';
 import { useLocalStorageState } from '@toolpad/core/useLocalStorageState';
+import { ThemeSwitcher } from '@toolpad/core/DashboardLayout';
 import React from 'react';
 
 import {
@@ -111,6 +112,17 @@ export default function SettingsComponent({ settings, setSettings }) {
 
     return (
         <Stack direction="column" spacing={1} alignItems="flex-start">
+            <Box sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                padding: 0.5,
+                width: '100%',
+                boxSizing: 'border-box'
+            }} >
+                Light/Dark theme
+                <ThemeSwitcher />
+            </Box>
             {checkboxOptions.map(({ key, label, tooltip }) => (
                 <Box
                     key={key}

src/components/ToolbarActions.js

@@ -11,7 +11,6 @@ import {
     Stack,
     Tooltip
 } from '@mui/material';
-import { ThemeSwitcher } from '@toolpad/core/DashboardLayout';
 import React from 'react';
 
 export default function ToolbarActions({
@@ -28,7 +27,6 @@ export default function ToolbarActions({
         <SelectTargetButton onClick={onSelectTargetClick} />
         <RefreshWindsButton onClick={onRefreshWindsClick} fetching={fetching} />
         <Divider orientation="vertical" flexItem />
-        <ThemeSwitcher />
     </Stack>;
 }