Dark mode for NEJM (New England Journal of Medicine) studies, research articles, etc.
NEJM (New England Journal of Medicine) Dark Mode by alythobani
Details
Authoralythobani
LicenseGPLv3
Categorynejm.org
Created
Updated
Size7.9 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Mainly implemented for homepage, search page, and articles/studies, so other pages on the site may not fully be in dark mode.
Source code
/* ==UserStyle==
@name NEJM (New England Journal of Medicine) Dark Mode
@version 20241213.20.58
@namespace ?
==/UserStyle== */
@-moz-document domain("nejm.org") {
body {
background: #1a1a1a;
color: #bbb;
}
p {
color: #bbb;
}
li {
border-color: #222 !important;
}
div {
border-color: #333 !important;
}
.ng-header {
background: #111;
border-color: #111;
img {
filter: invert(90%) hue-rotate(180deg) !important;
}
.ng-header_navBar-content {
background: #111;
/* color: #bbb; */
.ng-simple-menu_mainLink {
color: #aaa;
&:hover {
color: #ccc;
}
}
.ng-simple-menu_dropblock-cont {
background: #111;
color: #bbb;
.ng-simple-menu_list-link {
color: #aaa;
&:hover {
color: #ccc;
}
}
}
}
.ng-header_quickSearch {
background: #111;
color: #bbb;
.ng-large-text-input {
border-color: #333;
color: #bbb;
}
}
.ng-header_loginBar-separator {
color: #666;
}
}
div {
color: #bbb;
}
.contributors .heading,
h1,
h2,
h3,
h4,
h5,
h6 {
color: #ccc !important;
}
p strong {
color: #ccc;
}
/* Links */
.ng-header_loginBar-createAcc-link,
.ng-header_loginBar-signIn-link,
.ng-header_searchBtn,
a {
color: #bbb;
&:hover {
color: #ddd;
}
}
input[type] {
background: #1a1a1a;
border-color: #333;
color: #bbb;
}
/* Buttons */
.ng-btn_primary,
.ng-btn_default {
color: #bbb;
background-color: inherit;
border: 2px solid #f30;
box-sizing: border-box;
&:hover {
border: 2px solid #f30;
background: inherit;
color: #f30;
}
}
.ng-btn_secondary {
color: #bbb;
border: 2px solid #0b4f82;
background-color: inherit;
&:hover {
border: 2px solid #0b4f82;
}
}
/* Left expandable sidebar */
[aria-controls=article_sections_menu][aria-expanded] {
background: #111;
&[aria-expanded=true] {
color: #888;
}
&:hover {
color: #ccc;
}
}
[data-core-nav=article] {
background: #111;
ul {
li a {
color: #888;
&:hover {
color: #ccc;
}
}
.bordered {
border-color: #333;
}
}
text-align: right;
}
/* Right sidebar */
[data-core-aside=right-rail] {
border-color: #333;
.ng-subsection-title,
.ng-related-articles_item {
border-color: #333;
}
}
.nejm_jobs .nejm-widget {
background: #111;
img {
filter: invert(90%) hue-rotate(180deg) !important;
}
.nejm-widget_date,
.nejm-widget_title {
background-color: #ff3300bf;
margin-bottom: .875rem;
box-sizing: border-box;
}
.nejm-widget_item {
border-color: #333;
div:first-child {
color: #aaa;
}
div:nth-child(2) {
color: #bbb;
}
}
}
/* Share buttons above article title */
.share {
a {
color: #aaa !important;
&:hover {
color: #ccc !important;
}
}
}
.meta-panel__share .a2a a:focus,
.meta-panel__share .a2a a:focus-visible,
.meta-panel__share .a2a a:hover {
a {
color: red !important;
}
}
/* Authors */
header[data-extent=frontmatter] .core-self-citation,
.contributors {
div,
span {
color: #888;
}
a,
[data-action] {
color: #aaa;
span {
color: #aaa;
}
&:hover {
color: #ccc;
span {
color: #ccc;
}
}
}
[data-action] {
background: #111;
}
}
/* Info panel above article */
.info-panel {
border-color: #333;
button,
a {
color: #888;
&:hover {
color: #aaa;
}
}
}
.tooltip-inner {
background: #111;
color: #bbb;
}
/* Floating toolbar in article */
[data-core-nav=collateral] {
background: #111;
border-color: #222;
color: #bbb;
li + li {
border-color: #222;
}
a {
color: #888;
&:before {
background: #222;
}
&:hover {
color: #ccc;
}
}
}
/* Figures */
figure img {
filter: invert(95%) hue-rotate(180deg) !important;
}
.core-container figure .collapsible-wrapper > figcaption,
.core-container figure > figcaption {
color: #bbb;
}
[data-presentation=diminished-in-flow] {
border-bottom: 1px solid #e5e5e5;
border-top: 2px solid #000;
border-color: #333;
margin: 1.5rem 0 1rem;
padding-bottom: .5rem;
padding-top: .5rem;
}
/* Article previews */
.issue-item_title-link {
color: #aaa;
}
.issue-item_meta-item:after {
border-color: #333;
}
.issue-item_abstractText {
color: #aaa;
}
.issue-item_authors + .issue-item_authors-after:before {
color: #666;
}
/* More link at bottom */
.ng-subsection-title_link {
color: #aaa;
&:hover {
color: #bbb;
}
}
.os-ms-multimedia,
.ng-image-challenge_content {
background: #111;
.ng-page_section-separator {
background: #333;
}
}
/* Footer */
.ng-footer {
background: #111;
border-color: #111;
.ng-footer_column-link,
.ng-footer_journals-link {
color: #888;
&:hover {
color: #ccc;
}
}
.ng-footer_column-nested,
.ng-footer_column {
border-color: #222 !important;
}
.ng-footer_column-link-icon {
background: #1a1a1a;
padding: 0;
}
.ng-footer_journals:before,
.ng-footer_bottom:before,
.ng-footer_journals-item {
border-color: #333;
}
}
/* Search */
.os-search-results {
.os-search-results_top {
background: #111;
.os-search-results_save-btn {
color: #bbb;
&:hover {
color: #f30;
}
}
.dropdown .btn {
color: #999;
&:after {
color: #999;
}
&:hover,
&[aria-expanded=true] {
color: #f30;
&:after {
color: #f30;
}
}
}
.dropdown-item:hover {
background: #1a1a1a;
color: #ccc;
}
}
/* Expanded filters box */
.os-search-results_filter {
background: #111;
.custom-input_text-default-value {
color: #999;
&:hover {
color: #bbb;
}
}
.custom-input_list_items {
li {
border-color: transparent !important;
}
li:hover {
background: #1a1a1a;
color: #bbb;
}
}
}
.os-search-results_tabs {
label {
color: #666;
&:hover {
color: #ccc;
&:before {
height: .25rem;
}
}
}
input:checked + label {
background-color: #2a2a2a;
color: #ccc;
}
}
}
.dropdown-menu {
background: #111;
a {
color: #888;
&:hover {
color: #bbb;
background: #111;
}
}
}
.ng-results-label {
color: #999;
span {
color: #bbb;
}
}
.checkbox--primary {
color: #888;
&:hover {
color: #bbb;
}
}
/* Search autocomplete */
.ui-autocomplete {
background: #1a1a1a;
color: #084e9b;
.ui-menu-item div {
color: #999;
&:hover {
color: #bbb;
}
}
.ui-state-active {
background: #222;
}
}
}