Skip to content

NRK Nord by shard

Screenshot of NRK Nord

Details

Authorshard

LicenseNo License

Categorynrk

Created

Updated

Size26 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

OS color scheme responsive dark and light theme for NRK based on the Nord palette.

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         NRK Nord Dark
@version      20240513.13.03
@namespace    https://userstyles.world/user/shard
@description  Dark theme for NRK based on the Nord palette.
@author       shard
@license      No License
==/UserStyle== */

@-moz-document domain("nrk.no") {
:root {
    /* Nord color scheme */
    --nord0: #2e3440;
    --nord1: #3b4252;
    --nord2: #434c5e;
    --nord3: #4c566a;
    --nord4dark: #d1d8e3;
    --nord4: #d8dee9;
    --nord5: #e5e9f0;
    --nord6: #eceff4;
    --nord7: #8fbcbb;
    --nord8: #88c0d0;
    --nord9: #81a1c1;
    --nord10: #5e81ac;
    --nord11: #bf616a;
    --nord12: #d08770;
    --nord13: #ebcb8b;
    --nord14: #a3be8c;
    --nord15: #b48ead;
    --nordBlack: #252932;
    --nordInactive: #9b9ea4;
    --rgbnord0: 46, 52, 64;
    --rgbnord1: 59, 66, 82;
    --rgbnord2: 67, 76, 94;
    --rgbnord3: 76, 86, 106;
    --rgbnord4dark: 209, 216, 227;
    --rgbnord4: 216, 222, 233;
    --rgbnord5: 229, 233, 240;
    --rgbnord6: 236, 239, 244;
    --rgbnord7: 143, 188, 187;
    --rgbnord8: 136, 192, 208;
    --rgbnord9: 129, 161, 193;
    --rgbnord10: 94, 129, 172;
    --rgbnord11: 191, 97, 106;
    --rgbnord12: 208.135.112;
    --rgbnord13: 235, 203, 139;
    --rgbnord14: 163, 190, 140;
    --rgbnord15: 180, 142, 173;
    --rgbnordBlack: 37, 41, 50;
    --rgbnordInactive: 155, 158, 164;

    --dh-box-background: var(--nord2);
    --dh-box-text: var(--nord4);
}

@media (prefers-color-scheme: dark) {
    :root {
        --blackout: var(--nordBlack);
        --background0: var(--nord0);
        --background1: var(--nord1);
        --background2: var(--nord2);
        --background3: var(--nord3);
        --foreground0: var(--nord6);
        --foreground1: var(--nord5);
        --foreground2: var(--nord4);
        --foreground3: var(--nord4dark);
        --textPrimary: var(--nord4);
        --link: var(--nord9);
        
        --rgblackout: var(--rgbnordBlack);
        --rgbackground0: var(--rgbnord0);
        --rgbackground1: var(--rgbnord1);
        --rgbackground2: var(--rgbnord2);
        --rgbackground3: var(--rgbnord3);
        --rgbforeground0: var(--rgbnord6);
        --rgbforeground1: var(--rgbnord5);
        --rgbforeground2: var(--rgbnord4);
        --rgbforeground3: var(--rgbnord4dark);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --blackout: var(--nord0);
        --background0: var(--nord6);
        --background1: var(--nord5);
        --background2: var(--nord4);
        --background3: var(--nord4dark);
        --foreground0: var(--nord0);
        --foreground1: var(--nord1);
        --foreground2: var(--nord2);
        --foreground3: var(--nord3);
        --textPrimary: var(--nord1);
        --link: var(--nord10);
        
        --rgbackground0: var(--rgbnord6);
        --rgbackground1: var(--rgbnord5);
        --rgbackground2: var(--rgbnord4);
        --rgbackground3: var(--rgbnord4dark);
        --rgbforeground0: var(--rgbnord0);
        --rgbforeground1: var(--rgbnord1);
        --rgbforeground2: var(--rgbnord2);
        --rgbforeground3: var(--rgbnord3);
    }
}

html,
body,
.kur-house,
.nrk-color-base,
.article-feature .article-feature__intro {
    background-color: var(--background0);
    color: var(--textPrimary);
}

.nrk-masthead__apps,
.nrk-masthead,
.nrk-masthead.nrk-masthead--dark,
.menu-bar,
.menu__link,
.menu__title a,
#kur-newsfeed__container,
.kur-newsfeed__control,
.kur-newsfeed__button--close,
.kur-house .nrk-bottommenu,
.stream.lean .stream-header,
.menu-bar.negative,
.group.floor.negative,
.nrk-bottommenu {
    background-color: var(--blackout);
    color: var(--nord4) !important;
}
a.kur-newsfeed__attachment-article,
a.kur-newsfeed__button,
.bulletin-attachment.plug,
.dhhb__box--fec3k {
    background-color: var(--nord2);
}
.kur-newsfeed__attachment-type {
    color: var(--nordInactive);
}
.kur-newsfeed__attachment-article:hover .kur-newsfeed__attachment-title,
a.kur-newsfeed__button {
    color: var(--nord4) !important;
}

.nrk-masthead {
    box-shadow: none;
}

.nrk-masthead__search input {
    background-color: var(--background1) !important;
}
.nrk-masthead__search input,
.nrk-masthead__search button,
.nrk-masthead.nrk-masthead--dark .nrk-masthead__search input::placeholder {
    color: var(--textPrimary) !important;
}

.kur-newsfeed {
    border-bottom-color: var(--blackout);
}

.kur-newsfeed__message-header,
.article-header-sidebar,
.article-source,
.article-source em,
.article-dateline,
.author__role,
.article-location,
.article-location em,
.compilation-authors .author__body::after,
.quote-text,
.quote-text p,
.quote-source,
.widget figcaption,
.dhvd-inngang-s__label,
.plug-preamble,
.article-universe-link > span,
.stream-lean-exit,
.clips__clip-metadata,
.clip-thumbnail__metadata,
.caption-cite,
.article-publish-date.publish-date,
.recipe-list,
.dh-breakingmal-wrapper--3ECeB figcaption p,
.dh-breakingmal-wrapper--3ECeB small {
    color: var(--nordInactive);
}

.kur-newsfeed__button,
.article-header,
.title,
.text-body,
.text-body h1,
.text-body h2,
.text-body h3,
.text-body h4,
.article-feature .quote p,
.kur-room--is-inverted .kur-label--breaking .kur-label__tag,
.kur-room--is-inverted .kur-label--live .kur-label__tag,
.kur-room--is-inverted .kur-label--sistestripe .kur-label__tag,
.compilation-title,
.persongalleri-infosveip__person .persongalleri-infosveip__text,
.widget-title,
.widget-title a,
.stream.lean .teaser.reference a,
.compilation-link a,
.compilation-summary-title,
.bulletin-text > .bulletin-time > a:link,
.bulletin-text > .bulletin-title,
.bulletin-text > p,
.bulletin-attachment.plug .title,
.bulletin-attachment.plug .plug-teaser::before,
.bulletin-attachment.plug .plug-svg-arrow,
.dhvd-inngang-s__title,
.tipbox-header,
.tipbox a:link,
.widget.reference,
.article-preamble,
.dh-breakingmal-app,
.dh-breakingmal-role--ajDIZ,
.app,
.skin-text-950 {
    color: var(--textPrimary);
}
.bulletin.emphasis-high *,
.bulletin.emphasis-high p a,
.kur-label:not(.kur-label--animate) .kur-label__tag {
    color: var(--nord4) !important;
}
#dh-nrkno-exp-district-wrapper {
    color: var(--background0);
}

.kur-newsfeed__message-lead a,
.text-body a[href],
a.author__name,
.author__twitter,
.stream.lean .stream-title,
.article-universe-link,
.nrk-bottommenu .grid .nrk-bottommenu-info .nrk-bottommenu-info-tips-button,
.recipe-button > span,
.dh-breakingmal-app a,
.kicker {
    color: var(--nord10) !important;
}

.card,
.card .subtitle,
div[class^="dhfs__card"] {
    background-color: var(--background0) !important;
    color: var(--textPrimary) !important;
}
.card li {
    background-color: var(--background2) !important;
    color: var(--textPrimary) !important;
    border-radius: 7px;
}
.card li .change {
    color: var(--nord10);
}

.dh-lydtekst-item--cc9a0 {
    background-color: var(--nord9);
}
.dh-lydtekst-item--active--c3c57 {
    background-color: var(--nord10);
}

.kur-newsfeed__message-lead a:hover,
.text-body a[href]:hover,
a.author__name:hover,
.article-universe-link:hover,
.nrk-bottommenu .grid .nrk-bottommenu-info .nrk-bottommenu-info-tips-button:hover,
a[href].link__container {
    border-color: var(--nord10);
}

.kur-house__main .kur-floor--top:nth-child(3) {
    margin-top: 20px !important;
}

.kur-newsfeed__message,
.stream-content,
.surrogate > .teaser-reference > .bulletin {
    border-left-color: var(--background2);
}

.stream.lean .teaser.reference > a:hover {
    background-color: var(--background3);
}

.kur-room,
.kur-floor--apartment,
.dh-langlesing-app--1G-Qm,
.dh-langlesing-text--2fDc2,
.fact,
.fact__expand svg,
.dh-forklaringsscroll-card,
.bulletin.emphasis-high .bulletin-attachment.plug,
.compilation-summary,
.compilation-aside,
.compilation-aside-teasers.stream.lean,
.quiz-option,
.quiz .quiz-option span,
.dh-visual-story-xl-3-7-0-textSection .dh-visual-story-xl-3-7-0-textSection__card,
.dh-visual-story-xl-3-7-0-headerSection .dh-visual-story-xl-3-7-0-headerSection__card,
.dh-visual-story-xl-3-7-0-quoteSection .dh-visual-story-xl-3-7-0-quoteSection__card,
.dhfs-card--b16c8,
.note-container .note-content,
.dh-langlesing-v0-app-V9stk,
.tipbox,
.hei-boksen-box--23lhC,
.hei-boksen-v1-box-fec3k,
.plug-feature .plug-teaser, .plug-feature:not(.reference.plug) .plug-teaser,
.ludo--inverted,
.nrk-button--tv,
.min-side,
nrkno-ditt-distrikt div:first-child {
    background-color: var(--background2);
    color: var(--textPrimary);
}

nrkno-ditt-distrikt .ndd-bg-white {
    background-color: var(--background3);
}

nrkno-ditt-distrikt .ndd-bg-gradient-to-b {
    background: linear-gradient(to bottom,transparent var(--tw-gradient-from-position),var(--background3)) !important;
}

nrkno-ditt-distrikt a {
    color: var(--textPrimary) !important;
}

a[data-action-type="change-district"] {
    background-color: var(--nord10);
}

figure.audio .media-player-container,
.nrkno-player-poster__heading .heading-text {
    color: var(--nord4) !important;
}

.note-container .note-button {
    color: var(--textPrimary);
    border-color: var(--foreground2);
}
.note-container .note-button[aria-expanded="true"] {
    background-color: var(--background3);
    color: var(--link);
}
#dh-nrkno-exp-district-wrapper ._2kIP4,
.wrapper.svelte-1xqf712,
.district-select.svelte-1xqf712 {
    background-color: var(--nord9);
}

.dh-tidslinje-timeline,
.skin-background-50 {
    background-color: var(--background2);
}
.dh-tidslinje-timeline-wrap .dh-tidslinje-timeline-bullet__title {
    color: var(--textPrimary);
}
.dh-tidslinje-fade {
    background: linear-gradient(rgba(255, 255, 255, 0), rgb(var(--rgbnord2)));
}
.dh-tidslinje-expander__btn {
    background-color: var(--background2);
}

.elglobo.lp_relatedglobal .kur-room__title.kur-room__title--3 span {
    padding-left: 20px;
}

.compilation-aside,
.compilation-aside-teasers.stream.lean .teaser.reference:last-child {
    border-color: var(--background3);
}

.flow-content > .col > .widget.reference {
    border-bottom: 1px solid var(--background3);
}

.quiz-option:hover {
...

Reviews

No reviews yet.