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
Size28 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.6
@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;
}
.inline-comments .inline-comment-form, .inline-comments .inline-comment-form-container {
max-width: unset;
}
@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;
}
}
}
@media (min-width: 1800px) {
.container-xl {
max-width: 1600px;
}
}
.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-syntax,
[data-color-mode="dark"][data-dark-theme*="dark"] {
--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;
}
.mixin-dark-hc,
[data-color-mode="dark"][data-dark-theme="dark_high_contrast"] {
--bgColor-default: rgb(12, 12, 12) !important;
--bgColor-muted: rgb(43, 43, 43) !important;
--button-default-bgColor-rest: #414243 !important;
--color-notifications-row-bg: hsl(30, 67%, 13%);
--control-transparent-bgColor-selected: #585960;
.jWnGGx, .brJRqk {
background-color: color-mix(in oklab, var(--bgColor-default), var(--bgColor-muted));
}
}
.mixin-dark,
[data-color-mode="dark"][data-dark-theme="dark_dimmed"],
[data-color-mode="dark"][data-dark-theme="dark_dimmed"] > #gitako-root
[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;
--borderColor-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: mix(rgb(67, 130, 195), #222, 25%) !important;
--color-calendar-graph-day-L2-bg: mix(rgb(67, 130, 195), #222, 50%) !important;
--color-calendar-graph-day-L3-bg: mix(rgb(67, 130, 195), #222, 75%) !important;
--color-calendar-graph-day-L4-bg: mix(rgb(67, 130, 195), #222, 100%) !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;
--overlay-bgColor: #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: #ddd !important;
--fgColor-default: #ddd !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 !importa...