Makes github's dark theme(s) less blue and more grey.
Colors originate from DarkThemeHub's GithubDarkTheme(), but this leans on overriding the css variables instead of a large-scale override.
Github Dark Tweaks by forivall
Details
Authorforivall
LicenseMIT
Categorygithub
Created
Updated
Size26 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Github Tweaks
@namespace github.com/openstyles/stylus
@version 1.3.3
@description Make github’s dark theme(s) less blue and more grey. Also compact some elements.
@author Emily M Klassen (github.com/forivall)
@preprocessor less
==/UserStyle== */
@-moz-document regexp("^https?:\/\/(((?!desktop).*\.)?(githubusercontent|githubstatus|github)\.(?!io|myshopify|blog|community)).*"), regexp("^https?:\\/\\/medium.com/media/[0-9a-f]*$") {
body {
line-height: 1.2;
}
[data-rgh-whitespace="tab"]{
background-image: url("data:image/svg+xml,<svg preserveAspectRatio=\"xMinYMid meet\" viewBox=\"0 0 12 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.7 11L6.5 8.5L7.5 7.5L12 11V12.5L7.5 16L6.5 15L9.7 12.5H2V11H\" fill=\"rgba(128,128,128,.5)\"/></svg>");
background-image: url("data:image/svg+xml,<svg preserveAspectRatio=\"xMinYMid meet\" viewBox=\"0 0 12 18\" xmlns=\"http://www.w3.org/2000/svg\"><path transform=\"translate(0,-3)\" d=\"M9.7 11L6.5 8.5L7.5 7.5L12 11V12.5L7.5 16L6.5 15L9.7 12.5H2V11H\" fill=\"rgba(128,128,128,.5)\"/></svg>");
background-size: calc(var(--tab-size, 4) * 1ch) 1em;
}
[data-rgh-whitespace="space"] {
background-image: url("data:image/svg+xml,<svg preserveAspectRatio=\"xMinYMid meet\" viewBox=\"0 0 12 16\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"8\" r=\"1.5\" fill=\"rgba(128,128,128,.5)\"/></svg>");
background-size: 1ch 1em;
.rgh-observing-whitespace &:not(:first-child),
.rgh-observing-whitespace * &{
background-image: none;
}
}
.commit-branches > *, .branches-tag-list > * {
display: inline-block;
}
.markdown-body {
font-weight: 340;
}
@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 1dppx) {
.f1 {
/* letter-spacing: -0.05em; */
code, .f1-light {
letter-spacing: 0;
}
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.h1, .h2, .h3, .h4, .h5, .h6 {
letter-spacing: 0.3pt;
code {
letter-spacing: 0;
}
}
}
.mixin-smoothing {
@media only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.input-monospace,
.blob-num,
.blob-code-inner,
.gist .blob-num,
.gist .blob-code-inner {
font-smooth: always;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.markdown-body .highlight pre,
.markdown-body pre,
.markdown-body pre code,
.markdown-body pre tt {
font-smooth: always;
-moz-osx-font-smoothing: grayscale;
}
}
}
.mixin-light,
[data-color-mode="light"][data-dark-theme*="light"]{
--color-bg-body: var(--bgColor-default, var(--color-canvas-default));
/* --color-diff-blob-addition-fg: #c5c8c6; */
/* --color-diff-blob-deletion-fg: #c5c8c6; */
--color-prettylights-syntax-background: #ffffff;
--color-prettylights-syntax-plain: #4d4d4c;
--color-prettylights-syntax-comment: #8e908c;
--color-prettylights-syntax-constant: #4d4d4c;
--color-prettylights-syntax-symbol: #3e999f;
--color-prettylights-syntax-entity: #4271ae;
--color-prettylights-syntax-storage-modifier-import: #b08a00;
--color-prettylights-syntax-entity-tag: #df5b66;
--color-prettylights-syntax-keyword: #8959A8;
--color-prettylights-syntax-string: #718c00;
--color-prettylights-syntax-number: #de935f;
--color-prettylights-syntax-string-regexp-literal: #3e999f;
--color-prettylights-syntax-string-regexp: #de935f;
--color-prettylights-syntax-variable: #b08a00;
--color-prettylights-syntax-markup-list: #4271ae;
--color-prettylights-syntax-markup-heading: #df5b66;
--color-prettylights-syntax-markup-italic: #c5c8c6;
--color-prettylights-syntax-markup-bold: #c5c8c6;
}
.mixin-dark,
[data-color-mode="dark"][data-dark-theme*="dark"],
[data-color-mode="dark"][data-dark-theme*="dark"] > #gitako-root {
.mixin-smoothing();
--color-bg-body: #1e1e1e;
:root {
scrollbar-color: rgba(175, 175, 175, 0.5) #1d1d1d !important;
scrollbar-width: thin !important;
}
html[data-color-mode="auto"][data-dark-theme*="dark"],
html[data-color-mode="auto"][data-dark-theme*="dark"] body,
html[data-color-mode="dark"][data-dark-theme*="dark"],
html[data-color-mode="dark"][data-dark-theme*="dark"] body {
background-color: var(--color-bg-body);
}
.discussion-timeline-actions,
.gh-header,
.search-results-page {
background: transparent;
}
/* --color-accent-muted: #371166; */
--color-accent-muted: rgba(255, 252, 84, .25);
/* --color-accent-muted: var(--color-severe-muted); */
--color-accent-subtle: rgba(78, 73, 71, .35);
--color-attention-hover: rgba(174, 124, 20, 0.25);
--color-attention-hover: #46391f;
--color-bg-canvas-inset: #272727 !important;
--color-bg-canvas: transparent !important;
--color-bg-primary: #25272a !important;
--color-bg-secondary: #25272a !important;
--color-bg-tertiary: transparent !important;
--color-border-default: #343434 !important;
--color-border-default: #4c4c4c !important;
--color-border-muted: rgba(187, 187, 187, .2) !important;
--color-btn-bg: #333;
--color-btn-selected-bg: #273045;
--color-btn-selected-hover-bg: #182030;
--color-btn-counter-bg: #444;
--color-btn-hover-bg: #393939;
--color-calendar-graph-day-bg: #222 !important;
--color-calendar-graph-day-L1-bg: rgba(67, 130, 195, 0.25) !important;
--color-calendar-graph-day-L2-bg: rgba(67, 130, 195, 0.5) !important;
--color-calendar-graph-day-L3-bg: rgba(67, 130, 195, 0.75) !important;
--color-calendar-graph-day-L4-bg: rgba(67, 130, 195, 1) !important;
--color-canvas-hover: #303030 !important;
--color-primer-canvas-backdrop: rgba(39, 39, 39, .8);
/* --color-canvas-default: #2a2825 !important; */
--bgColor-default: #232323 !important;
--color-canvas-default: #232323 !important;
--bgColor-inset: #222 !important;
--color-canvas-inset: #222 !important;
--color-canvas-overlay: #25272a;
--color-canvas-subtle: #292929 !important;
--bgColor-muted: #292929;
--color-current-user-tip-border: #4299fc !important;
--color-diff-blob-addition-line-bg-hover: rgba(70, 149, 74, 0.25);
--color-diff-blob-deletion-line-bg-hover: rgba(229, 83, 75, 0.25);
--color-fg-default: white !important;
--color-fg-muted: #bbb !important;
--color-fg-subtle: #5A5A5A !important
--AppHeader-bg: #25272a;
--color-header-bg: #25272a;
--color-header-search-bg: transparent;
--color-header-search-border: #343434;
/* --color-header-text: #444 !important; */
--color-menu-bg-active: #3e3e3e !important;
--color-notifications-button-hover-bg: transparent !important;
--color-notifications-row-bg: rgba(39, 48, 69, .75);
--color-notifications-row-read-bg: rgba(37, 39, 42, .75) !important;
--color-page-header-bg: var(--color-header-bg);
--color-project-card-bg: #2f2f2e !important;
--color-project-sidebar-bg: #25272a !important;
--color-sidenav-selected-bg: #3e3e3e !important;
--color-state-hover-primary-bg: #3d4348 !important;
--color-state-hover-secondary-bg: #3d4348 !important;
--color-state-selected-primary-bg: #3e3e3e !important;
--color-text-link: #4299fc !important;
--color-text-primary: rgb(230, 230, 230) !important;
--color-text-secondary: #b5b5b5 !important;
--color-text-tertiary: #b5b5b5 !important;
--color-timeline-badge-bg: #555555 !important;
--color-workflow-card-bg: #2f2f2e !important;
--color-checks-bg: #1e1e1e;
--color-checks-step-header-open-bg: #25272a;
--color-checks-step-header-open-bg: var(--color-accent-subtle);
--color-diff-blob-addition-fg: #c5c8c6;
--color-diff-blob-deletion-fg: #c5c8c6;
--color-prettylights-syntax-background: #1d1f21;
--color-prettylights-syntax-plain: #c5c8c6;
--color-prettylights-syntax-comment: #969896;
--color-prettylights-syntax-constant: #c5c8c6;
--color-prettylights-syntax-symbol: #8abeb7;
--color-prettylights-syntax-entity: #81a2be;
--color-prettylights-syntax-storage-modifier-import: #f0c674;
--color-prettylights-syntax-entity-tag: #d75a64;
--color-prettylights-syntax-entity-tag: #cc6666;
--color-prettylights-syntax-keyword: #b294bb;
--color-prettylights-syntax-string: #b5bd68;
--color-prettylights-syntax-number: #de935f;
--color-prettylights-syntax-string-regexp-literal: #8abeb7;
--color-prettylights-syntax-string-regexp: #de935f;
--color-prettylights-syntax-variable: #f0c674;
--color-prettylights-syntax-markup-list: #81a2be;
--color-prettylights-syntax-markup-heading: #d75a64;
--color-prettylights-syntax-markup-italic: #c5c8c6;
--color-prettylights-syntax-markup-bold: #c5c8c6;
--gitako-bg-subtle: #25272a !important;
--gitako-canvas-default: #25272a !important;
--gitako-canvas-subtle: rgba(77, 77, 77, .15) !important;
--gitako-accent-subtle: rgba(78, 73, 71, .35) !important;
.flash {
/* box-shadow: inset 0 2px 4px var(--color-page-header-bg); */
box-shadow: 0 2px 4px -2px var(--color-bg-body);
}
.color-bg-primary {
background-color: var(--color-canvas-default);
}
.TimelineItem-break {
background-color: var(--color-bg-body);
}
.tabnav-tab.selected,
.tabnav-tab[aria-selected="true"],
.tabnav-tab[aria-current]:not([aria-current="false"]),
.TabNav-item.selected[title="Kanban"],
#memex-root .selected[class^=TabNav__TabNavLink-sc] {
box-shadow: inset 0 -6px 4px -4px var(--color-bg-body);
}
table:not(.diff-table) .blob-num + .blob-code {
box-shadow: inset 1...