style: Improve markdown editor styling and functionality

- Update dark mode button icon and styling
- Add styling for new collection button
- Apply default iframe styles in preview pane
- Adjust vertical divider height in header buttons
- Improve handling of JSX-like attributes in markdown
- Add support for new collection functionality
- Refine file loading logic in view mode
- Improve dark mode toggle icon and integration
- Update UI for edit/view mode toggle button

static/css/components.css

@@ -364,4 +364,28 @@ body.dark-mode .btn-flat-danger {
 
 body.dark-mode .btn-flat-warning {
     color: #ffda6a;
+}
+
+/* Dark Mode Button Icon Styles */
+#darkModeBtn i {
+    font-size: 16px;
+    color: inherit;
+    /* Inherit color from parent button */
+}
+
+/* Light mode: moon icon */
+body:not(.dark-mode) #darkModeBtn i {
+    color: var(--text-secondary);
+}
+
+/* Dark mode: sun icon */
+body.dark-mode #darkModeBtn i {
+    color: #ffc107;
+    /* Warm sun color */
+}
+
+/* Hover effects */
+#darkModeBtn:hover i {
+    color: inherit;
+    /* Inherit hover color from parent */
 }