Dracula Theme for linkedin
Dracula Theme for Linkedin by RetrozDev
Details
AuthorRetrozDev
LicenseNo License
Categoryhttps://www.linkedin.com/
Created
Updated
Size7.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Linkedin Dark Breeze
@version 20220122
@namespace userstyles.world/user/kajika
@description Dark theme for LinkedIn
@author kajika
@license CC BY-SA - Creative Commons Attribution-ShareAlike
==/UserStyle== */
@-moz-document domain("linkedin.com") {
:root {
--main-bg-color: #282a36;
--main-fg-color: #bbb;
--light-bg-color: #44475a;
--light-fg-color: #ccc;
--lighter-bg-color: #282a36;
--lighter-fg-color: #bd93f9;
--highlight-bg-color: #282a36;
--highlight-fg-color: #f8f8f2;
--dim-fg-color: #999;
--disable-bg: #394f49;
--disable-fg: #8c9999;
--border-color: #888;
--primary-color: #bd93f9;
--tint-color: #282a36;
--tint-dim: #282a36;
--color-border: var(--border-color);
--color-label: var(--main-fg-color);
--color-label-hover: var(--lighter-fg-color);
--color-background: var(--light-bg-color);
--color-background-canvas: var(--main-bg-color);
--color-background-container: var(--light-bg-color);
--color-background-container-tint: var(--tint-color);
--color-background-disabled: var(--disable-bg);
--color-background-brand-accent-4: var(--tint-dim);
--color-background-brand-accent-5: var(--lighter-bg-color);
--voyager-color-background-comment: var(--lighter-bg-color);
--voyager-color-background-container-tint-2: var(--tint-color);
--voyager-color-background-input-search: var(--lighter-bg-color);
--voyager-color-action-selected: var(--highlight-bg-color);
--color-text: var(--main-fg-color);
--color-text-disabled: var(--disable-fg);
--color-text-low-emphasis: var(--lighter-fg-color);
--color-text-low-emphasis-shift: var(--light-fg-color);
--color-text-meta: var(--disable-fg);
--color-action: var(--primary-color);
--color-icon: var(--main-fg-color);
--color-icon-nav: var(--main-fg-color);
--color-icon-nav-active: var(--highlight-fg-color);
--color-icon-nav-selected: var(--lighter-fg-color);
--color-icon-nav-selected-active: var(--highlight-fg-color);
--messenger-color-background-input-message: var(--highlight-bg-color);
--voyager-color-background-brand-accent-5-tint: var(--lighter-bg-color);
/*--artdeco-reset-base-background-transparent: var(--light-bg-color);*/
}
body {
background: var(--main-bg-color);
color: var(--main-fg-color);
}
hr {
border-color: var(--border-color);
}
.artdeco-loader__bars {
color: var(--main-fg-color);
}
.global-nav__branding-logo li-icon {
color: var(--primary-color);
}
.msg-s-event-listitem__attachment-type--pdf {
background: var(--main-bg-color);
}
.msg-s-event-listitem__attachment-type--pdf .attachment-filename,
.msg-s-event-listitem__attachment-type--pdf .attachment-filesize {
color: var(--main-fg-color);
}
.iph-widget__search-container,
.mercado-styling input.iph-widget__search-textbox {
background: var(--light-bg-color);
}
.iph-widget__main-content-article {
background: var(--light-bg-color);
}
.iph-widget__contextual-help-header {
color: var(--main-fg-color);
}
.msg-reactions__pill--viewer-reacted {
background-color: var(--tint-dim);
}
.msg-reactions__pill--viewer-reacted:hover {
background-color: var(--tint-color);
}
.msg-reactions__entry-point .artdeco-button__icon,
.msg-reactions__pill {
background-color: var(--tint-dim);
border-color: var(--tint-color);
}
.msg-reactions__entry-point:hover .artdeco-button__icon {
background-color: var(--tint-color);
border-color: var(--tint-color);
}
}
@-moz-document url-prefix("https://www.linkedin.com/psettings") {
label {
color: var(--main-fg-color);
}
#layout-header.minimal-nav #header-banner {
background: var(--light-bg-color) !important;
}
#layout-header.minimal-nav .minimal-util-nav-link {
color: var(--lighter-fg-color) !important;
}
.discovery-menu-categories-col .category-container .categories {
background: var(--light-bg-color);
}
.discovery-menu-categories-col .category-container .categories a.category,
.discovery-menu-categories-col .category-container .categories .expanded-category,
.discovery-menu-categories-col .category-container .categories a.subcategory-nav {
color: var(--main-fg-color);
}
.discovery-menu-categories-col .category-container .categories a.subcategory-nav.active {
background: var(--lighter-bg-color);
}
.discovery-menu-categories-col .category-container .categories a.category:hover {
background: var(--lighter-bg-color);
}
.discovery-menu-categories-col .category-container .categories a.subcategory-nav:focus {
color: var(--highlight-fg-color);
}
.list--levee {
background: var(--light-bg-color);
}
.list .subcategory h2,
.list > li .heading,
.data-log-entry-header .data-log-entry-expander {
color: var(--lighter-fg-color);
}
.list p,
.list legend,
.list > li .sub-heading,
.list .expander .indicator,
.list .expander .state,
.data-log-entry-header .data-log-entry-expander .date {
color: var(--main-fg-color);
}
.pagination .pagination-control-link {
color: var(--main-fg-color) !important;
}
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset
}
select {
color: var(--main-fg-color);
border-color: var(--border-color);
}
select:hover {
border-color: var(--light-fg-color);
}
}
@-moz-document url-prefix("https://www.linkedin.com/login"),
url-prefix("https://www.linkedin.com/uas/login") {
#app__container {
background: var(--main-bg-color);
}
#app__container .footer__base__wrapper p.copyright,
.footer__base .footer__base__nav-list a,
.language-selector__button {
color: var(--main-fg-color);
}
li-icon[type="linkedin-logo"] svg {
filter: hue-rotate(180deg) invert(0.8);
}
.language-selector .language-selector__dropdown {
background: var(--main-bg-color);
box-shadow: 0 0 0 1px var(--border-color);
}
.card-layout {
background: var(--light-bg-color);
}
.header__content .header__content__heading,
.header__content .header__content__subheading {
color: var(--main-fg-color);
}
.form__input--floating {
background: var(--light-bg-color);
}
.form__input--floating > input {
color: var(--main-fg-color);
}
.form__input--floating > label,
.form__input--floating > input:focus + label,
.form__input--floating > input:autofill + label,
.form__input--floating > input:valid + label,
.form__input--floating > input:active + label {
color: var(--dim-fg-color);
}
}