1+ // 主题配置定义
2+ const themeConfigs = {
3+ default : {
4+ name : 'Default' ,
5+ theme : {
6+ heading1 : "2F5597" ,
7+ heading2 : "5B9BD5" ,
8+ heading3 : "44546A" ,
9+ heading4 : "44546A" ,
10+ heading5 : "44546A" ,
11+ heading6 : "44546A" ,
12+ link : "0563C1" ,
13+ code : "C7254E" ,
14+ blockquote : "666666" ,
15+ del : "FF0000"
16+ }
17+ } ,
18+ elegant : {
19+ name : 'Elegant' ,
20+ theme : {
21+ heading1 : "1A202C" ,
22+ heading2 : "2D3748" ,
23+ heading3 : "4A5568" ,
24+ heading4 : "4A5568" ,
25+ heading5 : "4A5568" ,
26+ heading6 : "4A5568" ,
27+ link : "2B6CB0" ,
28+ code : "B83280" ,
29+ blockquote : "4A5568" ,
30+ del : "E53E3E"
31+ }
32+ } ,
33+ academic : {
34+ name : 'Academic' ,
35+ theme : {
36+ heading1 : "111827" ,
37+ heading2 : "1F2937" ,
38+ heading3 : "374151" ,
39+ heading4 : "374151" ,
40+ heading5 : "374151" ,
41+ heading6 : "374151" ,
42+ link : "1D4ED8" ,
43+ code : "7C2D12" ,
44+ blockquote : "6B7280" ,
45+ del : "DC2626"
46+ }
47+ } ,
48+ modern : {
49+ name : 'Modern' ,
50+ theme : {
51+ heading1 : "5B21B6" ,
52+ heading2 : "7C3AED" ,
53+ heading3 : "8B5CF6" ,
54+ heading4 : "8B5CF6" ,
55+ heading5 : "8B5CF6" ,
56+ heading6 : "8B5CF6" ,
57+ link : "3B82F6" ,
58+ code : "EC4899" ,
59+ blockquote : "6B7280" ,
60+ del : "EF4444"
61+ }
62+ }
63+ } ;
64+
65+ // 全局主题状态
66+ let currentTheme = 'default' ;
67+
68+ // 主题切换功能
69+ function switchTheme ( themeName ) {
70+ if ( themeConfigs [ themeName ] ) {
71+ currentTheme = themeName ;
72+ localStorage . setItem ( 'markdown-docx-theme' , themeName ) ;
73+
74+ // 更新UI显示
75+ updateThemeDisplay ( themeName ) ;
76+
77+ // 触发自定义事件通知主题已变更
78+ window . dispatchEvent ( new CustomEvent ( 'themeChanged' , {
79+ detail : {
80+ theme : themeName ,
81+ config : themeConfigs [ themeName ]
82+ }
83+ } ) ) ;
84+ }
85+ }
86+
87+ function updateThemeDisplay ( themeName ) {
88+ const config = themeConfigs [ themeName ] ;
89+ const themeButton = document . getElementById ( 'theme-toggle' ) ;
90+ const themeSelect = document . getElementById ( 'doc-theme' ) ;
91+
92+ // 更新按钮文本
93+ if ( themeButton ) {
94+ const span = themeButton . querySelector ( 'span' ) ;
95+ if ( span ) span . textContent = config . name ;
96+ }
97+
98+ // 更新选择框
99+ if ( themeSelect ) {
100+ themeSelect . value = themeName ;
101+ }
102+
103+ // 在预览区域显示主题色彩示例
104+ updatePreviewTheme ( config ) ;
105+ }
106+
107+ function updatePreviewTheme ( config ) {
108+ // 在markdown预览区域应用主题色彩示例
109+ const preview = document . getElementById ( 'markdown-preview' ) ;
110+ if ( preview ) {
111+ preview . style . setProperty ( '--theme-primary' , `#${ config . theme . primary } ) ;
112+ preview . style . setProperty ( '--theme-heading1' , `#${ config . theme . heading1 } ) ;
113+ preview . style . setProperty ( '--theme-heading2' , `#${ config . theme . heading2 } ) ;
114+ preview . style . setProperty ( '--theme-link' , `#${ config . theme . link } ) ;
115+ preview . style . setProperty ( '--theme-code' , `#${ config . theme . code } ) ;
116+ }
117+ }
118+
119+ // 获取当前主题配置
120+ function getCurrentTheme ( ) {
121+ return {
122+ name : currentTheme ,
123+ config : themeConfigs [ currentTheme ]
124+ } ;
125+ }
126+
127+ // 初始化主题功能
128+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
129+ // 从localStorage恢复主题设置
130+ const savedTheme = localStorage . getItem ( 'markdown-docx-theme' ) || 'default' ;
131+ currentTheme = savedTheme ;
132+
133+ // 初始化UI
134+ updateThemeDisplay ( currentTheme ) ;
135+
136+ // 绑定主题切换按钮事件
137+ const themeToggle = document . getElementById ( 'theme-toggle' ) ;
138+ const themeDropdown = document . getElementById ( 'theme-dropdown' ) ;
139+
140+ if ( themeToggle && themeDropdown ) {
141+ themeToggle . addEventListener ( 'click' , function ( e ) {
142+ e . stopPropagation ( ) ;
143+ themeDropdown . classList . toggle ( 'hidden' ) ;
144+ } ) ;
145+
146+ // 绑定主题选项点击事件
147+ themeDropdown . addEventListener ( 'click' , function ( e ) {
148+ const themeOption = e . target . closest ( '.theme-option' ) ;
149+ if ( themeOption ) {
150+ const themeName = themeOption . dataset . theme ;
151+ switchTheme ( themeName ) ;
152+ themeDropdown . classList . add ( 'hidden' ) ;
153+ }
154+ } ) ;
155+ }
156+
157+ // 绑定模态框中的主题选择器
158+ const themeSelect = document . getElementById ( 'doc-theme' ) ;
159+ if ( themeSelect ) {
160+ themeSelect . addEventListener ( 'change' , function ( ) {
161+ switchTheme ( this . value ) ;
162+ } ) ;
163+ }
164+
165+ // 点击其他地方关闭下拉菜单
166+ document . addEventListener ( 'click' , function ( ) {
167+ if ( themeDropdown ) {
168+ themeDropdown . classList . add ( 'hidden' ) ;
169+ }
170+ } ) ;
171+ } ) ;
172+
173+ export const ThemeManager = {
174+ getCurrentTheme,
175+ switchTheme,
176+ themeConfigs
177+ } ;
0 commit comments