Skip to content

Commit e19d0b4

Browse files
CodennnnCodennnn
committed
feat: 优化主题样式
1 parent 4c0457c commit e19d0b4

File tree

9 files changed

+69
-34
lines changed

9 files changed

+69
-34
lines changed

‎src/pages/options.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,10 @@ void (async function init() {
190190
{
191191
const $contentTags = $('[data-content-key="tags"]')
192192

193+
const renderEmptyTagsContent = () => {
194+
$contentTags.append($('#tags-empty').html())
195+
}
196+
193197
const renderTagsContent = async () => {
194198
const storage = await getStorage(false)
195199
const tagData = storage[StorageKey.MemberTag]
@@ -361,9 +365,11 @@ void (async function init() {
361365
$contentTags.append($tagList)
362366

363367
loadIcons()
368+
} else {
369+
renderEmptyTagsContent()
364370
}
365371
} else {
366-
$contentTags.append($('#tags-empty').html())
372+
renderEmptyTagsContent()
367373
}
368374
}
369375

‎src/pages/popup.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,6 @@ const $tabMsg = $('.tabs > li[data-target="tab-message"]')
109109
function loadSettings() {
110110
const storage = getStorageSync()
111111
const api = storage[StorageKey.API]
112-
const options = storage[StorageKey.Options]
113112

114113
const $patInput = $('#pat')
115114

‎src/styles/options.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,8 @@ body {
8888
.backup-tip {
8989
margin-bottom: 20px;
9090
padding: 10px;
91-
background-color: var(--v2p-color-button-background);
91+
font-size: 14px;
92+
background-color: var(--v2p-color-bg-block);
9293
border-radius: 5px;
9394
}
9495

@@ -393,7 +394,7 @@ fieldset {
393394
> img {
394395
width: 30px;
395396
height: 30px;
396-
background-color: var(--v2p-color-main-100);
397+
background-color: var(--v2p-color-bg-block);
397398
border-radius: 5px;
398399
}
399400
}
@@ -414,7 +415,7 @@ fieldset {
414415
align-items: center;
415416
justify-content: center;
416417
padding: 2px 6px;
417-
background-color: var(--v2p-color-main-100);
418+
background-color: var(--v2p-color-bg-block);
418419
border-radius: 4px;
419420

420421
&.tag-item-tag-add {
@@ -476,7 +477,7 @@ fieldset {
476477
gap: 10px;
477478
justify-content: center;
478479
padding: 20px;
479-
background-color: var(--v2p-color-main-100);
480+
background-color: var(--v2p-color-bg-block);
480481
border-radius: 8px;
481482
}
482483

‎src/styles/popup.scss‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -82,12 +82,12 @@ button {
8282
padding: 5px 8px;
8383
color: var(--v2p-color-foreground);
8484
text-decoration: none;
85-
background-color: var(--v2p-color-main-200);
85+
background-color: var(--v2p-color-button-background);
8686
border-radius: 5px;
8787

8888
&:hover {
8989
text-decoration: none;
90-
background-color: var(--v2p-color-main-300);
90+
background-color: var(--v2p-color-button-background-hover);
9191
}
9292

9393
.action-icon {
@@ -104,10 +104,10 @@ button {
104104
width: 100%;
105105
padding: 4px 6px;
106106
font-size: 14px;
107-
background-color: var(--v2p-color-main-100);
107+
background-color: var(--v2p-color-bg-tabs);
108108
border-radius: 5px;
109109

110-
> li[data-target] {
110+
li[data-target] {
111111
cursor: pointer;
112112
user-select: none;
113113
display: flex;
@@ -119,11 +119,11 @@ button {
119119
border-radius: 3px;
120120

121121
&:hover {
122-
background-color: var(--v2p-color-main-200);
122+
background-color: var(--v2p-color-button-background-hover);
123123
}
124124

125125
&.active {
126-
color: var(--v2p-color-main-100);
126+
color: var(--v2p-color-background);
127127
background-color: var(--v2p-color-foreground);
128128
}
129129
}
@@ -180,7 +180,7 @@ button {
180180
text-decoration: none;
181181

182182
&:hover {
183-
background-color: var(--v2p-color-main-100);
183+
background-color: var(--v2p-color-bg-link);
184184
}
185185

186186
.title {
@@ -332,8 +332,8 @@ button {
332332
gap: 0 10px;
333333
align-items: center;
334334
padding: 0 5px 0 0;
335-
background-color: var(--v2p-color-main-100);
336-
border: 1px solid var(--v2p-color-main-300);
335+
background-color: var(--v2p-color-bg-block);
336+
border: 1px solid var(--v2p-color-border);
337337
border-radius: 6px;
338338

339339
&:has(.has-value) {
@@ -421,14 +421,14 @@ hr {
421421
margin-top: 10px;
422422
padding: 5px 8px;
423423
color: var(--v2p-color-foreground);
424-
background-color: var(--v2p-color-main-100);
424+
background-color: var(--v2p-color-bg-block);
425425
border-radius: 5px;
426426

427427
@at-root {
428428
#clear-storage,
429429
#sync-settings {
430430
padding: 0 5px;
431-
background-color: var(--v2p-color-main-200);
431+
background-color: var(--v2p-color-button-background-hover);
432432
border-radius: 3px;
433433
transition:
434434
background-color 0.2s,
@@ -503,7 +503,7 @@ a {
503503

504504
&:hover {
505505
text-decoration: underline;
506-
background-color: var(--v2p-color-main-100);
506+
background-color: var(--v2p-color-bg-link-hover);
507507
}
508508
}
509509
}

‎src/styles/v2ex-effect.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,7 @@ a.v2p-topic-preview-title-link {
412412
border-radius: 4px;
413413

414414
&:hover {
415-
background-color: var(--v2p-color-main-200);
415+
background-color: var(--v2p-color-button-background-hover);
416416
}
417417

418418
&.v2p-tab-active {
@@ -425,7 +425,7 @@ a.v2p-topic-preview-title-link {
425425
}
426426

427427
.v2p-no-pat {
428-
padding: 30px 10px;
428+
padding: 30px 20px;
429429
font-size: 15px;
430430
text-align: center;
431431

@@ -446,7 +446,7 @@ a.v2p-topic-preview-title-link {
446446
align-items: center;
447447
margin: 0 5px;
448448
padding: 2px 10px;
449-
background-color: var(--v2p-color-button-background);
449+
background-color: var(--v2p-color-bg-block);
450450
border-radius: 2px;
451451
}
452452

@@ -457,7 +457,7 @@ a.v2p-topic-preview-title-link {
457457
max-width: 800px;
458458
margin-top: 20px;
459459
padding: 20px;
460-
background-color: var(--v2p-color-button-background);
460+
background-color: var(--v2p-color-bg-block);
461461
border-radius: 10px;
462462
}
463463

‎src/styles/v2ex-theme-dark.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
--v2p-color-bg-reply: var(--v2p-color-main-100);
4747
--v2p-color-bg-tooltip: var(--v2p-color-main-100);
4848
--v2p-color-bg-avatar: var(--v2p-color-main-300);
49+
--v2p-color-bg-block: #373e47;
4950
// ---- 背景 ----
5051

5152
--v2p-color-heart: #ef4444;

‎src/styles/v2ex-theme-dawn.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ body.v2p-theme-dawn,
2222
--v2p-color-accent-400: hsl(var(--v2p-color-foam) / 50%);
2323
--v2p-color-accent-500: hsl(var(--v2p-color-foam) / 65%);
2424
--v2p-color-accent-600: hsl(var(--v2p-color-foam) / 80%);
25+
--v2p-color-orange-50: hsl(var(--v2p-color-gold) / 10%);
26+
--v2p-color-orange-100: hsl(var(--v2p-color-gold) / 20%);
27+
--v2p-color-orange-400: hsl(var(--v2p-color-gold));
2528

2629
// ====
2730
--v2p-color-background: hsl(var(--v2p-color-base));
@@ -52,6 +55,9 @@ body.v2p-theme-dawn,
5255
--v2p-color-bg-tabs: hsl(var(--v2p-color-pine) / 10%);
5356
--v2p-color-bg-tpr: hsl(var(--v2p-color-text) / 10%);
5457
--v2p-color-bg-avatar: hsl(var(--v2p-color-overlay));
58+
--v2p-color-bg-block: hsl(var(--v2p-color-text) / 10%);
59+
--v2p-color-bg-link: hsl(var(--v2p-color-text) / 10%);
60+
--v2p-color-bg-link-hover: hsl(var(--v2p-color-text) / 15%);
5561
// ---- 背景 ----
5662

5763
--v2p-color-tabs: hsl(var(--v2p-color-pine));
@@ -74,6 +80,14 @@ body.v2p-theme-dawn,
7480
0 9px 28px 8px rgb(0 0 0 / 5%);
7581
// ---- 阴影 ----
7682

83+
// V2EX 原有的 CSS 变量：
84+
--link-color: var(--v2p-color-foreground);
85+
--box-background-alt-color: var(--v2p-color-bg-block);
86+
--box-background-hover-color: var(--v2p-color-bg-link-hover);
87+
--button-hover-color: var(--v2p-color-button-background-hover);
88+
--button-border-color: var(--v2p-color-border);
89+
--button-border-hover-color: var(--v2p-color-border-darker);
90+
7791
visibility: visible;
7892

7993
.button {

‎src/styles/v2ex-theme-default.scss‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ body {
274274
padding: 5px 6px;
275275
font-size: 13px;
276276
color: var(--v2p-color-font-secondary);
277-
background-color: var(--v2p-color-button-background);
277+
background-color: var(--v2p-color-bg-block);
278278
border-radius: 4px;
279279

280280
&:hover {
@@ -323,7 +323,7 @@ body {
323323

324324
.dock_area {
325325
margin: 12px 0;
326-
background: var(--v2p-color-main-100);
326+
background: var(--v2p-color-bg-block);
327327
}
328328

329329
.member-activity-bar {
@@ -474,10 +474,10 @@ body {
474474
@include share.link;
475475

476476
color: currentColor;
477-
background-color: var(--v2p-color-main-100);
477+
background-color: var(--v2p-color-bg-link);
478478

479479
&:hover {
480-
background-color: var(--v2p-color-main-200);
480+
background-color: var(--v2p-color-bg-link-hover);
481481
}
482482

483483
&:has(> .embedded_image) {
@@ -625,12 +625,12 @@ body {
625625

626626
// 个人页的链接。
627627
.social_label:is(:link, :visited, :active) {
628-
background-color: var(--v2p-color-main-100);
628+
background-color: var(--v2p-color-button-background);
629629
border-radius: var(--box-border-radius);
630630
box-shadow: none;
631631

632632
&:hover {
633-
background-color: var(--v2p-color-main-200);
633+
background-color: var(--v2p-color-button-background-hover);
634634
}
635635
}
636636

@@ -676,8 +676,8 @@ body {
676676
}
677677

678678
.onoffswitch label .frame::after {
679-
color: var(--v2p-color-main-100);
680-
background-color: var(--v2p-color-main-400);
679+
color: var(--v2p-color-font-secondary);
680+
background-color: var(--v2p-color-bg-search);
681681
}
682682

683683
select {
@@ -692,7 +692,7 @@ body {
692692
.box {
693693
.tag {
694694
&::before {
695-
color: var(--v2p-color-main-500);
695+
color: var(--v2p-color-font-secondary);
696696
}
697697

698698
&:link,
@@ -742,7 +742,7 @@ body {
742742
}
743743

744744
&:not(.v2p-hover-btn):hover {
745-
background-color: var(--v2p-color-main-100);
745+
background-color: var(--v2p-color-button-background-hover);
746746
}
747747
}
748748

@@ -913,7 +913,7 @@ body {
913913
@include count;
914914

915915
color: var(--v2p-color-button-foreground);
916-
background-color: var(--v2p-color-button-background-hover);
916+
background-color: var(--v2p-color-bg-block);
917917
}
918918

919919
.count_orange {
@@ -1280,7 +1280,19 @@ body {
12801280
}
12811281
}
12821282

1283+
// 广告：
12831284
.wwads-cn {
12841285
border: none !important;
12851286
box-shadow: none !important;
12861287
}
1288+
1289+
// 广告：
1290+
.box:has(a[href^='/advertise']) {
1291+
overflow: hidden;
1292+
border: none !important;
1293+
box-shadow: none !important;
1294+
1295+
.sidebar_compliance {
1296+
background-color: var(--v2p-color-bg-block);
1297+
}
1298+
}

‎src/styles/v2ex-theme-var.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,10 @@
7070
--v2p-color-bg-tooltip: var(--v2p-color-bg-content);
7171
--v2p-color-bg-tabs: var(--v2p-color-main-100);
7272
--v2p-color-bg-tpr: var(--v2p-color-main-100);
73-
--v2p-color-bg-block: var(--v2p-color-main-100);
7473
--v2p-color-bg-avatar: var(--v2p-color-main-300);
74+
--v2p-color-bg-block: var(--v2p-color-main-100);
75+
--v2p-color-bg-link: var(--v2p-color-main-100);
76+
--v2p-color-bg-link-hover: var(--v2p-color-main-200);
7577
// ---- 背景 ----
7678

7779
--v2p-color-tabs: var(--v2p-color-foreground);

0 commit comments

Comments
 (0)