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

apps/test/content/posts/mathjax-test.md

@@ -128,7 +128,7 @@ $$
 
 ### Dark Mode Adaptation
 
-Use `.auto-dark-mode` class to automatically adapt to dark mode by inverting the color and hue:
+Use `.auto-dark-mode` class or `auto-dark` shortcode to automatically adapt to dark mode by inverting the color and hue:
 
 For inline formula:
 
@@ -137,9 +137,9 @@ $\bbox[border: solid .4pt magenta, pink]{x^2=4}$
 
 For formula blocks:
 
-{{< style "[data-theme=dark] & { filter: invert(1) hue-rotate(0.5turn); }" >}}
+{{< auto-dark >}}
 $$
 \bbox[border: solid .4pt magenta, pink]{x^2=4}
 $$
 {.auto-dark-mode}
-{{< /style >}}
+{{< /auto-dark >}}