there is no way to select pairs or add pairs and night mode switch doesn't work

index.html

@@ -74,14 +74,16 @@
                 <button id="darkModeToggle" class="p-2 bg-gray-200 rounded">🌙</button>
             </div>
         </header>
-
         <div class="p-4">
             <select id="pairSelector" class="w-full p-2 border rounded" multiple="multiple"></select>
-            <button id="addPairsBtn" class="mt-2 p-2 bg-green-500 text-white rounded">Add Selected Pairs</button>
+            <div class="flex space-x-2 mt-2">
+                <button id="addPairsBtn" class="flex-1 p-2 bg-green-500 text-white rounded">Add Selected Pairs</button>
+                <button id="clearPairsBtn" class="flex-1 p-2 bg-red-500 text-white rounded">Clear All</button>
+            </div>
         </div>
 
         <div id="chartGrid" class="chart-grid"></div>
-    </div>
+</div>
 
     <div id="sidebar" class="p-4">
         <button id="closeSidebar" class="float-right">✕</button>
@@ -150,10 +152,10 @@
             pairSelector.select2({
                 placeholder: "Search and select trading pairs",
                 allowClear: true,
-                width: '100%'
+                width: '100%',
+                closeOnSelect: false
             });
-
-            // Initialize color pickers
+// Initialize color pickers
             const candleUpPicker = Pickr.create({
                 el: '#candleUpColor',
                 theme: 'classic',
@@ -197,10 +199,27 @@
 
             // Event listeners
             document.getElementById('addPairsBtn').addEventListener('click', addSelectedPairs);
-            settingsBtn.addEventListener('click', openSidebar);
+            document.getElementById('clearPairsBtn').addEventListener('click', clearAllPairs);
+settingsBtn.addEventListener('click', openSidebar);
             closeSidebar.addEventListener('click', closeSidebar);
-            darkModeToggle.addEventListener('click', toggleDarkMode);
-            document.getElementById('saveSettings').addEventListener('click', saveSettings);
+            darkModeToggle.addEventListener('click', function() {
+                document.body.classList.toggle('dark-mode');
+                const isDarkMode = document.body.classList.contains('dark-mode');
+                
+                // Update button text
+                darkModeToggle.textContent = isDarkMode ? '☀️' : '🌙';
+                
+                // Update all charts
+                Object.keys(charts).forEach(pair => {
+                    updateChartTheme(pair, isDarkMode);
+                });
+                
+                // Save dark mode state
+                const settings = JSON.parse(localStorage.getItem('binanceDashboardSettings') || '{}');
+                settings.darkMode = isDarkMode;
+                localStorage.setItem('binanceDashboardSettings', JSON.stringify(settings));
+            });
+document.getElementById('saveSettings').addEventListener('click', saveSettings);
             timeframeSelector.addEventListener('change', changeTimeframe);
         });
 
@@ -245,8 +264,7 @@
                 })
                 .catch(error => console.error('Error fetching pairs:', error));
         }
-
-        function addSelectedPairs() {
+function addSelectedPairs() {
             const selectedPairs = pairSelector.val();
             if (!selectedPairs) return;
 
@@ -257,9 +275,43 @@
                     createChart(pair);
                 }
             });
+
+            // Save selected pairs
+            const settings = JSON.parse(localStorage.getItem('binanceDashboardSettings') || '{}');
+            settings.selectedPairs = Array.from(subscribedPairs);
+            localStorage.setItem('binanceDashboardSettings', JSON.stringify(settings));
         }
 
-        function subscribeToPair(pair) {
+        function clearAllPairs() {
+            subscribedPairs.forEach(pair => {
+                if (ws && ws.readyState === WebSocket.OPEN) {
+                    const unsubscribe = {
+                        method: "UNSUBSCRIBE",
+                        params: [
+                            `${pair.toLowerCase()}@kline_${timeframeSelector.value}`,
+                            `${pair.toLowerCase()}@markPrice@1s`,
+                            `${pair.toLowerCase()}@bookTicker`
+                        ],
+                        id: Date.now()
+                    };
+                    ws.send(JSON.stringify(unsubscribe));
+                }
+                
+                const chartElement = document.getElementById(`chart-${pair}`);
+                if (chartElement) {
+                    chartElement.remove();
+                }
+            });
+            
+            subscribedPairs.clear();
+            Object.keys(charts).forEach(pair => delete charts[pair]);
+            
+            // Clear saved pairs
+            const settings = JSON.parse(localStorage.getItem('binanceDashboardSettings') || '{}');
+            settings.selectedPairs = [];
+            localStorage.setItem('binanceDashboardSettings', JSON.stringify(settings));
+        }
+function subscribeToPair(pair) {
             if (ws && ws.readyState === WebSocket.OPEN) {
                 const timeframe = timeframeSelector.value;
                 const subscription = {
@@ -452,25 +504,19 @@
             sidebar.style.width = '0';
             document.getElementById('main').style.marginRight = '0';
         }
-
-        function toggleDarkMode() {
-            document.body.classList.toggle('dark-mode');
-            // Update all charts
-            Object.keys(charts).forEach(pair => {
-                charts[pair].chart.applyOptions({
-                    layout: {
-                        backgroundColor: document.body.classList.contains('dark-mode') ? '#2d3748' : '#ffffff',
-                        textColor: document.body.classList.contains('dark-mode') ? '#ffffff' : '#333333'
-                    },
-                    grid: {
-                        vertLines: { color: document.body.classList.contains('dark-mode') ? '#4a5568' : '#eee' },
-                        horzLines: { color: document.body.classList.contains('dark-mode') ? '#4a5568' : '#eee' }
-                    }
-                });
+function updateChartTheme(pair, isDarkMode) {
+            charts[pair].chart.applyOptions({
+                layout: {
+                    backgroundColor: isDarkMode ? '#2d3748' : '#ffffff',
+                    textColor: isDarkMode ? '#ffffff' : '#333333'
+                },
+                grid: {
+                    vertLines: { color: isDarkMode ? '#4a5568' : '#eee' },
+                    horzLines: { color: isDarkMode ? '#4a5568' : '#eee' }
+                }
             });
         }
-
-        function saveSettings() {
+function saveSettings() {
             const settings = {
                 showPrice: document.getElementById('showPrice').checked,
                 showVolume: document.getElementById('showVolume').checked,