Useful

[Updated 2024]Những đoạn code tùy biến cho VSCode cực đẹp

Posted onAuthorevondev
tùy biến vscode

Từ trước tới giờ mình tùy biến VSCode rất nhiều và cũng có nhiều người hỏi về các đoạn code tùy biến đó, người này hỏi, người kia hỏi cho nên mình viết luôn bài này tổng hợp code những cái tùy biến đấy cho các bạn luôn

Trước khi mà các bạn có thể áp dụng được những đoạn code này vào thì các bạn cần xem video này trên kênh Youtube của mình để có thể hiểu cách làm nhé.

Tùy biến active tab 4 góc

Hình minh họa
:root{
--size: 5px;
}
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active.tab-border-top
  > .tab-border-top-container {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
}
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active.tab-border-top
  > .tab-border-top-container:before,
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active.tab-border-top
  > .tab-border-top-container:after {
  content: "";
  width: var(--size);
  height: var(--size);
  position: absolute;
  border: 2px solid;
  border-image-slice: 1;
}
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active.tab-border-top
  > .tab-border-top-container:before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
  border-image-source: linear-gradient(-45deg, #4dd78a, #20e3b2);
}

.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active.tab-border-top
  > .tab-border-top-container:after {
  right: 0;
  bottom: 0;
  border-top: 0;
  border-left: 0;
  border-image-source: linear-gradient(-45deg, #6a5af9, #d66efd);
}
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active:before,
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active:after {
  content: "";
  width: var(--size);
  height: var(--size);
  position: absolute;
  border: 2px solid;
  border-image-slice: 1;
}
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active:before {
  left: 0;
  bottom: 0;
  border-top: 0;
  border-right: 0;
  border-image-source: linear-gradient(-45deg, #fc6c8f, #ffb86c);
}

.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active:after {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
  border-image-source: linear-gradient(-45deg, #098dff, #2cccff);
}

Lưu ý: Ở đoạn code trên các bạn sẽ thấy đoạn .tab-border-top thì tùy vào theme, ví dụ theme Dracula sẽ có border-top nhưng một số theme khác thì lại có border-bottom nên class của theme khác có thể là .tab-border-bottom. Cho nên các bạn linh động thay class phù hợp là chạy ổn áp nha

Tùy biến active tab line gradient

Sử dụng đoạn code này thì khi active tab sẽ có một đường line ở trên cái tab khi mà nó active trong VSCode và nó sẽ chạy qua chạy lại với nhiều màu sắc cho các bạn.

Lưu ý: Cũng tương tự như ở trên thì tùy thuộc vào theme thì sẽ có .tab-border-top hoặc .tab-border-bottom. Các bạn chỉ cần thay vào là chạy đúng kết quả các bạn muốn thôi nhé.

.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active.tab-border-top
  > .tab-border-top-container {
  background-size: 400% 400%;
  background-image: linear-gradient(
    -45deg,
    #fc6c8f,
    #ff2ced,
    #ffb86c,
    #2cccff,
    #20e3b2,
    #ffcc70,
    #c850c0,
    #4158d0
  );
  animation: gradient 5s ease alternate infinite;
  height: 3px;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Tùy biến font chữ cho các class

Hình minh họa

Nhiều bạn hỏi mình sao làm cho chỗ này nó có font chữ khác thì mình cũng chia sẻ cho các bạn luôn. Đầu tiên các bạn cần tải font Dank Mono và cài đặt cho máy tính của các bạn tại đây

Sau khi tải và cài đặt xong cho máy tính rồi thì áp dụng đoạn code này vào là được

.mtk5,
.mtk26 {
  -webkit-font-smoothing: auto;
  font-family: "Dank mono", monospace;
}
.mtk26 {
  font-style: italic;
}

Hãy lưu ý rằng hai class .mtk5 và .mtk26 là tương ứng cho theme mình đang xài(Evondev Dracula), nếu các bạn xài theme khác thì tự tìm class nhé vì mỗi theme thì class nó khác nhau. Tìm như thế nào thì coi video ở trên cùng. Mình đã chỉ tận răng rồi cho nên mấy vấn đề này mình không có hỗ trợ riêng đâu nhé.

Nếu làm theo vẫn chưa được thì có thể tham khảo thêm đoạn code dưới đây, đoạn này bỏ vào trong file settings.json của các bạn nhé. Trong đó Evondev Dracula Normal Contrast là tên theme của các bạn

"[Evondev Dracula Normal Constrast]": {
  "textMateRules": [
    {
      "scope": [
        "entity.other.attribute-name.js",
        "entity.other.attribute-name.jsx",
        "entity.other.attribute-name.ts",
        "entity.other.attribute-name.tsx",
        "entity.other.attribute-name.html",
        "entity.other.attribute-name.pug"
      ],
      "settings": {
        "foreground": "#20e4b2"
      }
    }
  ]
}

Đoạn tùy chỉnh JSON ở trên mục đích là tách cái thuộc tính(attribute) trong thẻ HTML thành một scope riêng biệt để nó sinh ra một class mới như .mtk26 chẳng hạn rồi dựa vào class đó tùy biến màu khác, in nghiêng… tùy vào mục đích mỗi người.

Tùy biến con trỏ

.cursors-layer .cursor {
  background-image: linear-gradient(
    245deg,
    #fcb564,
    #ff65f2,
    #d66efd
  ) !important;
}

Bo góc Tab

.tabs-container > .tab {
  border-right: 0 !important;
}
.tabs-and-actions-container {
  padding: 4px !important;
}

.tabs-container {
  gap: 8px !important;
}
.tabs-container > .tab.active.tab-border-top > .tab-border-top-container {
  --general-gradient-secondary: #fcb564, #ff65f2, #ff69cf;
  height: 0.5px !important;
  background-image: linear-gradient(
    to right,
    var(--general-gradient-secondary)
  );
  width: 50% !important;
  left: 50% !important;
  transform: translate3d(-50%, 0%, 0) !important;
  top: -1px !important;
}
.tabs-container > .tab {
  border-radius: 100px;
  border-color: rgba(255, 255, 255, 0.12) rgb(25, 26, 33)
    rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12);
  border-style: solid;
  border-width: 1px 0 0 0;
}

Border gradient

.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container {
  padding: 8px;
  gap: 8px;
}
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.sizing-fit {
  background-color: #21222c !important;
  border-radius: 4px;
}
.tab.tab-actions-right.sizing-fit.has-icon.tab-border-top.active .tab-label {
  position: relative;
}
.tab.tab-actions-right.sizing-fit.has-icon.tab-border-top.active:before {
  content: "";
  position: absolute;
  background: #21222c;
  top: 50%;
  left: 50%;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: inherit;
  transform: translate(-50.1%, -50.1%);
  border-radius: inherit;
}
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.sizing-fit.active {
  background-image: linear-gradient(
    45deg,
    #fcb564,
    #ff65f2,
    #d66efd,
    #6a5af9,
    #2cccff,
    #20e3b2
  );
}
/* hide border top */
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active.tab-border-top
  > .tab-border-top-container {
  display: none !important;
}

Neon line rounded animation(New)

:root {
  --tab-gradient: #407cff 318deg, #da8bff 1turn;
  --size: 1.3px;
  --duration: 5s;
  --general-gradient-secondary: #fcb564, #ff65f2, #ff69cf;
 
}
.tab-border-top-container {
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: var(--size);
  width: 100% !important;
  height: calc(100% - 1px) !important;
  background-color: transparent !important;
  border-radius: inherit;
  box-sizing: border-box;
}
.tab-border-top-container:before {
  content: "";
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  animation: spinner var(--duration) cubic-bezier(0.175, 0.885, 0.32, 1.275)
    infinite;
  background: conic-gradient(
      from 0deg at 50% 51.35%,
      rgba(185, 215, 243, 0) 0deg,
      rgba(185, 215, 243, 0) 289.4deg,
      var(--tab-gradient)
    ),
    conic-gradient(
      from 180deg at 50% 51.35%,
      rgba(185, 215, 243, 0) 0deg,
      rgba(185, 215, 243, 0) 287.46deg,
      var(--tab-gradient)
    );
  border-radius: inherit;
}
@keyframes spinner {
  100% {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

.tab {
  overflow: hidden;
}
.tab.active {
  border-radius: 100px !important;
  box-shadow: inset 0 1px 1px 0 rgba(199, 211, 234, 0.12),
    inset 0 24px 48px 0 rgba(199, 211, 234, 0.05),
    0 24px 32px 0 rgba(6, 6, 14, 0.7);
}

Dành cho ai dùng theme Evondev Dracula

Đây là toàn bộ code tùy biến hiện tại của mình, nếu bạn thích thì có thể copy vào hết là y hệt mình, tuy nhiên nếu bạn đang dùng máy có độ phân giải cao thì nó sẽ đẹp hơn nhé, ví dụ như Macbook chẳng hạn 

:root {
  --gradient-dir1: to top right;
  --gradient-dir2: to bottom left;
  --gradient-dir3: to right top;
  --gradient-dir4: to left bottom;
  --gradient-dir5: to top left;
  --size: 5px;
}
.mtk10,
.mtk15 {
  color: transparent;
  background-image: linear-gradient(var(--gradient-dir4), #fc806c, #ff1bd1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mtk5,
.mtk26 {
  color: transparent;
  background-image: linear-gradient(
    var(--gradient-dir1),
    #4dd78a,
    #20e3b2,
    #a2de6a
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-font-smoothing: auto;
  font-family: "Dank mono", monospace;
  font-size: 14px;
}
.mtk26 {
  background-image: linear-gradient(
    var(--gradient-dir5),
    #4dd78a,
    #20e3b2,
    #a2de6a
  );
  font-style: italic;
}
.mtk23,
.mtk16 {
  color: transparent;
  background-image: linear-gradient(var(--gradient-dir1), #d66efd, #6a5af9);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.mtk9,
.mtk17 {
  color: transparent;
  background-image: linear-gradient(
    var(--gradient-dir2),
    #098dff,
    #2cccff,
    #2979ff
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.mtk18 {
  color: transparent;
  background-image: linear-gradient(var(--gradient-dir2), #b0beff, #fed9ff);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-style: normal;
}
.mtk3 {
  color: transparent;
  /* background-image: linear-gradient(
    var(--gradient-dir1),
    #c29ffd,
    #ffb4dc,
    #e39bf7
  ); */
  background-image: linear-gradient(to top, #fce1d0, #ffadd6, #e39bf7);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.mtk7 {
  color: transparent;
  background-image: linear-gradient(var(--gradient-dir2), #fc6c8f, #ffb86c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mtk8,
.mtk14 {
  color: transparent;
  background-image: linear-gradient(to right, #ffb88c, #eac394);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.monaco-workbench
  .activitybar
  > .content
  :not(.monaco-menu)
  > .monaco-action-bar
  .action-item.checked
  .active-item-indicator:before {
  border: 0;
  width: 3px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(45deg, #fc6c8f, #ff2ced);
}

.monaco-workbench
  .activitybar
  > .content
  :not(.monaco-menu)
  > .monaco-action-bar
  .badge
  .badge-content {
  background-image: linear-gradient(45deg, #fc6c8f, #ff2ced);
}
.monaco-editor .cursors-layer .cursor {
  background-image: linear-gradient(to top, #6a5af9, #d66efd, #fc6c8f, #ff2ced);
}

.mtki {
  font-style: normal;
}

.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active.tab-border-top
  > .tab-border-top-container {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
}
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active.tab-border-top
  > .tab-border-top-container:before,
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active.tab-border-top
  > .tab-border-top-container:after {
  content: "";
  width: var(--size);
  height: var(--size);
  position: absolute;
  border: 2px solid;
  border-image-slice: 1;
}
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active.tab-border-top
  > .tab-border-top-container:before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
  border-image-source: linear-gradient(-45deg, #4dd78a, #20e3b2);
}

.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active.tab-border-top
  > .tab-border-top-container:after {
  right: 0;
  bottom: 0;
  border-top: 0;
  border-left: 0;
  border-image-source: linear-gradient(-45deg, #6a5af9, #d66efd);
}
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active:before,
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active:after {
  content: "";
  width: var(--size);
  height: var(--size);
  position: absolute;
  border: 2px solid;
  border-image-slice: 1;
}
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active:before {
  left: 0;
  bottom: 0;
  border-top: 0;
  border-right: 0;
  border-image-source: linear-gradient(-45deg, #fc6c8f, #ffb86c);
}

.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .tabs-container
  > .tab.active:after {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
  border-image-source: linear-gradient(-45deg, #098dff, #2cccff);
}

Tạm kết

Trên đây là toàn bộ source code tùy biến hiện tại của mình. Hi vọng bài viết ngắn gọn súc tích này sẽ có ích cho các bạn. Giúp các bạn có cảm hứng khi coding hơn.

Có thể bạn quan tâm:

Subscribe
Notify of
guest

20 Comments
Inline Feedbacks
View all comments
Minh
Minh

s e link thành côg file r mà nó k có gì thay đổi hết v a

Trả lời
Tân
Tân
Reply to  Minh

Quan trọng là chỗ đường dẫn tuyệt đối bạn dẫn đúng không

Trả lời
Thế
Thế
Reply to  Minh

A ơi e link thành công, cũng thay đổi font thành “Dank Mono” đủ cả tại sao lại không có thay đổi gì a nhỉ?

Trả lời
hacklongDev
hacklongDev
Reply to  Minh

Chắc là bạn chưa bấm cmd/ctrl + shift + p, rồi tra và ấn “enable js and css…”, tải lại rồi ấn tiếp cmd/ctrl + shift + p rồi ấn checksum restore và nhấn rồi ấn tiếp checksum apply rồi tải lại sẽ có kết quả (nếu bạn đã tải extension enable css and js Loader và fix vscode checksum nhé)

Trả lời
hậu
hậu
Reply to  Minh

bn bt lm sao để có font chữ linear như ảnh k

Trả lời
pHÚC
pHÚC
Reply to  Minh

bạn phải sử dụng được reload custom css

Trả lời
Huy
Huy

Sao em copy hết nó áp dụng được hết nhưng con trỏ chuột bị thuộc tính backgroundimage đè và ko thấy con trỏ chuột ở đâu, anh biết cách fix ko ạ

Trả lời
evondev
Author
evondev
Reply to  Huy

Em phải hiểu về CSS thì em mới làm tốt được nè. Em bật vscode f12 lên check class .cursor là rõ thôi em

Trả lời
pHÚC
pHÚC
Reply to  Huy

bẠN THỬ RELOAD custom css lại nếu vẫn bị vậy check lại từng dòng code

Trả lời
N
N

Yeah! Em đã thành công rồi anh ơi!

Trả lời
Thế Trường
Thế Trường
Reply to  N

bạn teamview chỉ mình với được ko bạn ơi

Trả lời
Huy Hoàng
Huy Hoàng

anh ơi anh cập nhật thêm code mới đi anh, chỗ file mà nó có border radius nhìn đẹp quá ạ

Trả lời
evondev
Author
evondev
Reply to  Huy Hoàng

oke em nha

Trả lời
evondev
Author
evondev
Reply to  Huy Hoàng

Đã cập nhật rồi nha

Trả lời
evondev
Author
evondev
Reply to  Huy Hoàng

Anh đã thêm rồi nha

Trả lời
Huy Hoàng
Huy Hoàng
Reply to  evondev

ôi em cảm ơn anh nhiều

Trả lời
Đức
Đức

Trên window làm kiểu gì vậy anh ?

Trả lời
Huy Hoàng
Huy Hoàng
Reply to  Đức

window làm bình thường thôi bạn, như nhau cả

Trả lời
Hung
Hung

Bạn có thể update custom mới nhất của bạn được không, custom mới nhất của bạn thật sự rất đẹp. Cảm ơn bạn

Trả lời
evondev
Author
evondev
Reply to  Hung

Oke mình sẽ cập nhật sớm

Trả lời