Skip to content

Commit 926e776

Browse files
shaobeichenshaobeichen
committed
feat: add gradient developer theme
1 parent 97289da commit 926e776

7 files changed

Lines changed: 1084 additions & 2 deletions

File tree

‎README-zh.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,15 @@
6565
<td><img src="./images/gradient-modern-dark.png" width=600/></td>
6666
<td><img src="./images/gradient-atom-one-dark.png" width=600/></td>
6767
</tr>
68+
<tr>
69+
<td>
70+
<b>Gradient Developer Theme Firefox Dark</b>
71+
<div>基于 <a href="">Developer Theme</a> ，添加了渐变效果。</div>
72+
</td>
73+
</tr>
74+
<tr>
75+
<td><img src="./images/gradient-developer-theme-firefox-dark.png" width=600/></td>
76+
</tr>
6877
</table>
6978

7079
# 灵感

‎README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,15 @@ To be honest, I was very mind at first, but after I ignored the "corrupted" warn
6565
<td><img src="./images/gradient-modern-dark.png" width=600/></td>
6666
<td><img src="./images/gradient-atom-one-dark.png" width=600/></td>
6767
</tr>
68-
68+
<tr>
69+
<td>
70+
<b>Gradient Developer Theme Firefox Dark</b>
71+
<div>I added a gradient effect to in <a href="">Developer Theme</a> .</div>
72+
</td>
73+
</tr>
74+
<tr>
75+
<td><img src="./images/gradient-developer-theme-firefox-dark.png" width=600/></td>
76+
</tr>
6977
</table>
7078

7179
# Inspiration

‎dist/index.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
-webkit-text-fill-color: transparent;
7272
-webkit-background-clip: text;
7373
} */
74+
/* 处理 #45 */
7475
}
7576
.shaobeichen-gradient-theme-themes-gradient-bearded-theme-arc-json .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .badge .badge-content {
7677
background-image: linear-gradient(45deg, #eacd61, #ea618e);
@@ -353,3 +354,91 @@
353354
color: #f5f572;
354355
}
355356
</style>
357+
358+
<style data-gradient-theme-id>
359+
.shaobeichen-gradient-theme-themes-gradient-developer-theme-firefox-dark-json { /**
360+
* Copyright (c) 2024 shaobeichen <shaobeichen@outlook.com>
361+
* All rights reserved.
362+
*/
363+
/* git 待提交数量徽章样式 */
364+
/* 选中标签栏上边框 */
365+
/* html标签属性 */
366+
/* html标签 */
367+
}
368+
.shaobeichen-gradient-theme-themes-gradient-developer-theme-firefox-dark-json .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .badge .badge-content {
369+
background-image: linear-gradient(45deg, #3cd23a, #ffe300);
370+
border-width: 0 !important;
371+
color: rgb(70, 70, 70) !important;
372+
font-weight: 700;
373+
}
374+
@keyframes tabBorderTopMoveGradient {
375+
from {
376+
background-position: 0%;
377+
}
378+
to {
379+
background-position: 100%;
380+
}
381+
}
382+
.shaobeichen-gradient-theme-themes-gradient-developer-theme-firefox-dark-json .tab.tab-actions-right.sizing-fit.has-icon.tab-border-bottom.tab-border-top.active {
383+
--tab-border-top-color: transparent !important;
384+
position: relative;
385+
}
386+
.shaobeichen-gradient-theme-themes-gradient-developer-theme-firefox-dark-json .tab.tab-actions-right.sizing-fit.has-icon.tab-border-bottom.tab-border-top.active:after {
387+
content: "";
388+
position: absolute;
389+
top: 0;
390+
left: 0;
391+
width: 100%;
392+
height: 2px;
393+
z-index: 1;
394+
background-image: linear-gradient(to right, #eacd61, #ea618e, #3cec85, #61afea);
395+
animation: tabBorderTopMoveGradient 3s infinite alternate;
396+
background-size: 200%;
397+
}
398+
.shaobeichen-gradient-theme-themes-gradient-developer-theme-firefox-dark-json :not(.cursor).mtk9 {
399+
color: #569cd6;
400+
background-image: linear-gradient(45deg, #0975ce, #90ccff);
401+
-webkit-text-fill-color: transparent;
402+
-webkit-background-clip: text;
403+
font-weight: 700;
404+
}
405+
.shaobeichen-gradient-theme-themes-gradient-developer-theme-firefox-dark-json :not(.cursor).mtk7 {
406+
color: #9cdcfe;
407+
background-image: linear-gradient(150deg, #15dbe2, #efefef);
408+
-webkit-text-fill-color: transparent;
409+
-webkit-background-clip: text;
410+
font-weight: 700;
411+
font-style: italic;
412+
}
413+
.shaobeichen-gradient-theme-themes-gradient-developer-theme-firefox-dark-json :not(.cursor).mtk12 {
414+
color: #fd619c;
415+
background-image: linear-gradient(45deg, #ff4b8f, #fd619c, #ffd6e5);
416+
-webkit-text-fill-color: transparent;
417+
-webkit-background-clip: text;
418+
font-weight: 700;
419+
}
420+
.shaobeichen-gradient-theme-themes-gradient-developer-theme-firefox-dark-json :not(.cursor).mtk4 {
421+
color: #2de28b;
422+
background-image: linear-gradient(150deg, #2de28b, #2de28b, #efefef);
423+
-webkit-text-fill-color: transparent;
424+
-webkit-background-clip: text;
425+
}
426+
.shaobeichen-gradient-theme-themes-gradient-developer-theme-firefox-dark-json :not(.cursor).mtk15 {
427+
color: #f5ff43;
428+
background-image: linear-gradient(150deg, #f5ff43, #efefef);
429+
-webkit-text-fill-color: transparent;
430+
-webkit-background-clip: text;
431+
}
432+
.shaobeichen-gradient-theme-themes-gradient-developer-theme-firefox-dark-json :not(.cursor).mtk5 {
433+
color: #6b89ff;
434+
background-image: linear-gradient(45deg, #6b89ff, #a47efa);
435+
-webkit-text-fill-color: transparent;
436+
-webkit-background-clip: text;
437+
}
438+
.shaobeichen-gradient-theme-themes-gradient-developer-theme-firefox-dark-json :not(.cursor).mtk8 {
439+
color: #c678dd;
440+
background-image: linear-gradient(145deg, #f561f1, #ff96fc, #ffcffe);
441+
-webkit-text-fill-color: transparent;
442+
-webkit-background-clip: text;
443+
}
444+
</style>

‎images/gradient-developer-theme-firefox-dark.png‎

446 KB
Loading

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,11 @@
5858
"label": "Gradient Modern Dark",
5959
"uiTheme": "vs-dark",
6060
"path": "./themes/gradient-modern-dark/dark-modern.json"
61+
},
62+
{
63+
"label": "Gradient Developer Theme Firefox Dark",
64+
"uiTheme": "vs-dark",
65+
"path": "./themes/gradient-developer-theme-firefox-dark.json"
6166
}
6267
],
6368
"commands": [
@@ -112,4 +117,4 @@
112117
"vsce": {
113118
"dependencies": false
114119
}
115-
}
120+
}

‎src/gradient-developer-theme-firefox-dark/index.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/**
2+
* Copyright (c) 2024 shaobeichen <shaobeichen@outlook.com>
3+
* All rights reserved.
4+
*/
5+
6+
/* git 待提交数量徽章样式 */
7+
.activitybar > .content :not(.monaco-menu) > .monaco-action-bar .badge .badge-content {
8+
background-image: linear-gradient(45deg, #3cd23a, #ffe300);
9+
border-width: 0 !important;
10+
color: rgb(70 70 70) !important;
11+
font-weight: 700;
12+
}
13+
14+
/* 选中标签栏上边框 */
15+
@keyframes tabBorderTopMoveGradient {
16+
from {
17+
background-position: 0%;
18+
}
19+
to {
20+
background-position: 100%;
21+
}
22+
}
23+
.tab.tab-actions-right.sizing-fit.has-icon.tab-border-bottom.tab-border-top.active {
24+
--tab-border-top-color: transparent !important;
25+
position: relative;
26+
}
27+
.tab.tab-actions-right.sizing-fit.has-icon.tab-border-bottom.tab-border-top.active:after {
28+
content: '';
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
width: 100%;
33+
height: 2px;
34+
z-index: 1;
35+
background-image: linear-gradient(to right, #eacd61, #ea618e, #3cec85, #61afea);
36+
animation: tabBorderTopMoveGradient 3s infinite alternate;
37+
background-size: 200%;
38+
}
39+
40+
/* html标签属性 */
41+
:not(.cursor).mtk9 {
42+
color: #569cd6;
43+
background-image: linear-gradient(45deg, #0975ce, #90ccff);
44+
-webkit-text-fill-color: transparent;
45+
-webkit-background-clip: text;
46+
font-weight: 700;
47+
}
48+
49+
/* html标签 */
50+
:not(.cursor).mtk7 {
51+
color: #9cdcfe;
52+
background-image: linear-gradient(150deg, #15dbe2, #efefef);
53+
-webkit-text-fill-color: transparent;
54+
-webkit-background-clip: text;
55+
font-weight: 700;
56+
font-style: italic;
57+
}
58+
59+
:not(.cursor).mtk12 {
60+
color: #fd619c;
61+
background-image: linear-gradient(45deg, #ff4b8f, #fd619c, #ffd6e5);
62+
-webkit-text-fill-color: transparent;
63+
-webkit-background-clip: text;
64+
font-weight: 700;
65+
}
66+
67+
:not(.cursor).mtk4 {
68+
color: #2de28b;
69+
background-image: linear-gradient(150deg, #2de28b, #2de28b, #efefef);
70+
-webkit-text-fill-color: transparent;
71+
-webkit-background-clip: text;
72+
}
73+
74+
:not(.cursor).mtk15 {
75+
color: #f5ff43;
76+
background-image: linear-gradient(150deg, #f5ff43, #efefef);
77+
-webkit-text-fill-color: transparent;
78+
-webkit-background-clip: text;
79+
}
80+
81+
:not(.cursor).mtk5 {
82+
color: #6b89ff;
83+
background-image: linear-gradient(45deg, #6b89ff, #a47efa);
84+
-webkit-text-fill-color: transparent;
85+
-webkit-background-clip: text;
86+
}
87+
88+
:not(.cursor).mtk8 {
89+
color: #c678dd;
90+
background-image: linear-gradient(145deg, #f561f1, #ff96fc, #ffcffe);
91+
-webkit-text-fill-color: transparent;
92+
-webkit-background-clip: text;
93+
}

0 commit comments

Comments
 (0)