refactor(UI/UX)!: refactor styles for theme support and enhance visual consistency (#722)

* refactor(styles): unify theme properties and update color variables across stylesheets

* Implement theme mode support with light-dark color adjustments across stylesheets

- Added color-scheme support in _root.scss for light and dark modes.
- Replaced theme property mixins with light-dark function in various widget styles including _cell-tooltip.scss, _cookieconsent.scss, _fixed-button.scss, and others.
- Updated alert styles in _alert.scss to use light-dark for border and text colors.
- Refactored code syntax highlighting in _code.scss and _code-syntax/_index.scss to utilize light-dark for background gradients.
- Enhanced search input styles in _search.scss to adapt to theme mode.
- Modified theme switching logic in color-scheme.js and theme.js to support new theme mode structure.
- Adjusted APlayer and Valine styles to accommodate dark mode using new theme variables.

* feat(shortcode): add auto-dark shortcode for dark mode adaptation

* refactor(styles): update theme colors and improve box-shadow properties for better visual consistency

* feat(header): add scroll-state container queries and enhance header shadow effects

* feat(styles): enhance scroll behavior with overscroll-behavior adjustments for better UX

* feat(styles): update code&table styles and colors for improved visual consistency

* feat(styles): update color variables and improve font styling for better visual hierarchy

.github/copilot-instructions.md

@@ -66,7 +66,7 @@ FixIt/
 
    ```scss
    $global-font-family: system-ui, sans-serif;
-   $code-background-color: #f6f8fa;
+   $code-background-color: #f4f6f8;
    $header-height: 3.5rem;
    ```