BestHub
search
Sign in
Tag

theme switching

1 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 29, 2024 · Frontend Development

Optimizing ECharts Integration in Vue and React with Lazy Loading, Theme Switching, and DOM Observation

This article presents a comprehensive solution for integrating ECharts into Vue and React projects, addressing bundle size, API complexity, and lack of CSS‑variable support by introducing custom imports, a draw helper, MutationObserver‑based resizing, theme‑aware color replacement, lazy loading, and usage examples for both frameworks.

EChartsLazy LoadingMutationObserver
0 likes · 18 min read
Optimizing ECharts Integration in Vue and React with Lazy Loading, Theme Switching, and DOM Observation
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 18, 2024 · Frontend Development

Implementing One‑Click Theme Switching and Custom Color Themes for ECharts in Vue3 with TypeScript

This article demonstrates how to integrate ECharts into a Vue3 + TypeScript project, create a reusable useEcharts hook for rendering charts, implement one‑click theme switching, and generate custom chart themes from user‑selected colors using the tvision‑color library and Pinia store management.

Custom ColorsEChartsFrontend Development
0 likes · 10 min read
Implementing One‑Click Theme Switching and Custom Color Themes for ECharts in Vue3 with TypeScript
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 24, 2024 · Frontend Development

Using TailwindCSS (Tss) in a Vue 3 Resume Project: Concepts, Implementation, and Optimization

This article walks through the author's journey of rebuilding an online resume with Vue 3 and TailwindCSS, explaining core Tailwind concepts, practical code examples, theme switching, and build‑time optimizations to achieve a maintainable, responsive, and lightweight frontend solution.

Build OptimizationCSS UtilityFrontend
0 likes · 36 min read
Using TailwindCSS (Tss) in a Vue 3 Resume Project: Concepts, Implementation, and Optimization
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 20, 2024 · Frontend Development

Theme Color Switching Solutions for Frontend Projects: Hard Coding, SASS Variables, CSS Variables, Filters, and Grayscale

This article compares five practical methods for changing theme colors in frontend applications—hard‑coded global replacements, SASS variable configuration, combined CSS‑variable and data‑theme approach, CSS filter hue‑rotate, and grayscale filter—detailing implementation steps, code snippets, advantages, and drawbacks to help teams choose the most suitable solution.

CSS variablesFrontendSASS
0 likes · 12 min read
Theme Color Switching Solutions for Frontend Projects: Hard Coding, SASS Variables, CSS Variables, Filters, and Grayscale
政采云技术
政采云技术
Feb 8, 2022 · Frontend Development

Implementing One‑Click Theme Switching with SCSS in a Vue Project

This article explains how to build a one‑click skin‑changing system for a Vue application by defining SCSS variables, creating theme maps, configuring webpack and vue.config.js to inject global styles, and using both CSS custom properties and advanced SCSS features such as loops, maps, and mixins to dynamically switch colors, fonts, and sizes.

CSS variablesFrontend DevelopmentVue
0 likes · 13 min read
Implementing One‑Click Theme Switching with SCSS in a Vue Project
Xueersi 1-on-1 Technology Team
Xueersi 1-on-1 Technology Team
Oct 14, 2021 · Frontend Development

Mastering Theme Switching: 8 Proven Methods to Implement Dark/Light Modes in Web Apps

This article explores eight practical techniques for implementing theme switching in web applications—including class toggling, stylesheet swapping, CSS variables, alternate rel links, Less modifyVars, Ant Design/Vant custom themes, Element‑UI dynamic theming, and JSS—detailing code snippets, advantages, and limitations of each approach.

CSS variablesFrontendJSS
0 likes · 11 min read
Mastering Theme Switching: 8 Proven Methods to Implement Dark/Light Modes in Web Apps
Yuewen Frontend Team
Yuewen Frontend Team
Aug 14, 2020 · Frontend Development

How to Implement Efficient Dark Mode in Mobile Apps Using CSS Custom Variables

Implementing dark mode in the Qidian Reading app, this guide explains using CSS custom variables and a custom SCSS loader to achieve low‑maintenance theme switching across native and embedded web pages, handling low‑end devices, code examples, and best‑practice considerations.

CSS custom variablesMobile AppSCSS loader
0 likes · 9 min read
How to Implement Efficient Dark Mode in Mobile Apps Using CSS Custom Variables