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

layouts/_partials/plugin/timeline.html

@@ -49,7 +49,7 @@
   {{- with $animation }} data-animation{{- end -}}
 >
   {{- range $index, $item := $events -}}
-    {{- $itemStyle := printf "--timeline-index: %v;" (add $index 1) -}}
+    {{- $itemStyle := printf "--fi-timeline-index: %v;" (add $index 1) -}}
     {{- with $item.color -}}
       {{- $itemStyle = add $itemStyle (printf "--timeline-circle-color: %v;" .) -}}
     {{- end -}}