Fix dark mode problems in bus timer page (673dd5d2) · Commits · sustech-online / sustech-online-ng

docs/.vuepress/components/BusAnnouncement.vue

+18 −14

Original line number	Diff line number	Diff line
		@@ -60,7 +60,6 @@ export default {
		announcement: null,
		error: null,
		appTheme: {}, // 用于控制 antd 主题的对象
		mediaQuery: null, // 用于存储媒体查询对象
		};
		},

		@@ -95,12 +94,9 @@ export default {
		},

		// 更新主题的函数
		updateTheme(event) {
		if (event.matches) {
		this.appTheme = { algorithm: darkAlgorithm };
		} else {
		this.appTheme = {};
		}
		updateTheme() {
		const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
		this.appTheme = isDark ? { algorithm: darkAlgorithm } : {};
		},
		},

		@@ -108,17 +104,25 @@ export default {
		mounted() {
		this.fetchAnnouncement();

		if (window.matchMedia) {
		this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
		this.updateTheme(this.mediaQuery);
		this.mediaQuery.addEventListener('change', this.updateTheme);
		}
		// Initial theme set
		this.updateTheme();

		// Listen for changes to [data-theme] attribute
		this._themeObserver = new MutationObserver(() => {
		this.updateTheme();
		});
		this._themeObserver.observe(document.documentElement, {
		attributes: true,
		attributeFilter: ['data-theme'],
		});
		},

		// 使用 beforeUnmount (Vue 3) 钩子来清理监听器
		beforeUnmount() {
		if (this.mediaQuery) {
		this.mediaQuery.removeEventListener('change', this.updateTheme);
		// Clean up observer
		if (this._themeObserver) {
		this._themeObserver.disconnect();
		this._themeObserver = null;
		}
		},
		};

+9 −1

Original line number	Diff line number	Diff line
		@@ -130,7 +130,7 @@ export default {
		dayType: 'workday',
		dayOptions: [
		{ label: '工作日\nWorkday', value: 'workday' },
		{ label: '节假日\nHoliday （暑假）', value: 'holiday' }
		{ label: '周末及节假日\nWeekend & Holiday', value: 'holiday' }
		],
		lineGroup: 'group1',
		directionIndex: 0,
		@@ -444,6 +444,14 @@ export default {
		margin: 0 auto;
		}

		/* Dark mode overrides for Ant Design Segmented */
		[data-theme="dark"] .ant-segmented,
		[data-theme="dark"] .ant-segmented-item
		{
		background: #222 !important;
		color: #eee !important;
		}

		/* Dark mode detection - multiple methods for compatibility */
		.mobile-container[data-theme="dark"],
		.mobile-container.dark,

+9 −8

Original line number	Diff line number	Diff line
		@@ -85,13 +85,6 @@ export default {
		</script>

		<style scoped>
		.ant-segmented {
		color: unset;
		font-size: unset;
		font-variant: unset;
		font-feature-settings: unset;
		}

		.tab-container {
		margin-top: 6px;
		}
		@@ -99,4 +92,12 @@ export default {
		.bus-location-hint {
		padding-bottom: 4px;
		}

		/* Dark mode overrides for Ant Design Segmented */
		[data-theme="dark"] .ant-segmented,
		[data-theme="dark"] .ant-segmented-item
		{
		background: #222 !important;
		color: #eee !important;
		}
		</style>
		No newline at end of file