Dark mode for this forum

[Annie+UK]

Fix for inverted video player

v1.4

/* ==UserStyle==
@name           Sky Help Foums - Dark Mode
@author         Annie UK
@description    `Dark Mode for Sky Help Forums`
@version        20220808.1.4
==/UserStyle== */
:root {
    --black: black;
    --blue: lightblue;
    --blue2: dodgerblue;
    --corn: cornflowerblue;
    --pink: deeppink;
    --pink2: hotpink;
    --green: darkgreen;
    --orange: darkorange;
    --gold: goldenrod;
    --grey: grey;
    --light: #eee;
    --dark: #333;
    --white: white;
}

/* Dark mode ====================================================================== */
/* Invert ALL colours */
:root,
html,
.mce-colorbutton-grid {
    filter: invert(1) hue-rotate(180deg) !important;
}

.lia-quilt-column-common-header .BreadCrumb {
    background-image: none !important;
    background-color: #222;
}

/* Inverts ALL colours for items that look wierd */
.c-hero,
.hero-image,
.lia-unicode-emoji,
.lia-notifications-messages-aggregate,
.lia-tinymce-html,
.lia-user-rank-icon,
.UserName,
.vjs-poster,
.vjs-tech,
.lia-emoticons-emoji,
.lia-unicode-emoji,
.lia-link-navigation.lia-page-link.lia-user-name-link,
.prgBarComPnts,
.prgBarLinkCon,
.lia-video-brightcove-player-container svg,
img,
iframe,
video-js,
.video-player,
#arjb_divider,
div[aria-label="Breadcrumb"] {
    filter: brightness(90%) invert(1) hue-rotate(180deg) !important;
}

a {
    text-underline-position: under !important;
}

.page-link {
    color: var(--grey) !important;
    filter: brightness(80%) !important;
}

.lia-message-unread > .page-link {
    color: var(--orange) !important;
    filter: brightness(80%) !important;
}

.lia-notifications-messages-aggregate {
    border-color: var(--grey) !important;
}

.lia-user-avatar-message {
    background-color: var(--black) !important;
    border: 0 !important;
}

#skycommunity {
    background-color: var(--light) !important;
    padding: 0 !important;
    margin-right: .5em !important;
}

span[itemprop="name"] {
    color: var(--blue) !important;
}

span[aria-current="page"] {
    color: var(--dark) !important;
}

.lia-breadcrumb-node.crumb::before {
    color: var(--corn) !important;
}

h2,
.lia-thread-subject,
.BoardList {
    color: var(--green) !important;
}

.lia-users-current-user-profile-card,
.prgBar {
    background: #ddd !important;
}

.lia-quilt-user-slide-out-menu .lia-users-current-user-profile-card .lia-users-profile-card-login,
.lia-quilt-user-slide-out-menu .lia-users-current-user-profile-card .lia-users-profile-card-rank {
    color: var(--dark) !important;
}

.lia-new-message-count {
    font-size:115% !important;
    color: var(--gold) !important;
}

.lia-message-read,
.lia-message-unread {
    color: var(--blue) !important;
}

.image-console-link::before,
.video-console-link::before {
    color: var(--blue) !important;
}

.lia-quilt-column-alley .lia-quilt-column-alley-single {
    background-color: #eee !important;
}

#grid > .lia-list-wide > tbody > .lia-row-odd,
#grid > .lia-list-wide > tbody > .lia-row-even {
    border: 1px solid #aaa;
}

h2.board-title > a {
    color: var(--corn) !important;
}

[Annie+UK]

Below is version 1.5

/* ==UserStyle==
@name           Sky Help Foums - Dark Mode
@author         Annie UK
@description    `Dark Mode for Sky Help Forums`
@version        20230517.1.5
==/UserStyle== */
:root {
    --black: black;
    --blue: lightblue;
    --blue2: dodgerblue;
    --corn: cornflowerblue;
    --pink: deeppink;
    --pink2: hotpink;
    --green: darkgreen;
    --orange: darkorange;
    --gold: goldenrod;
    --grey: grey;
    --light: #eee;
    --dark: #333;
    --white: white;
}

/* Dark mode ====================================================================== */
/* Invert ALL colours */
iframe,
:root,
html {
    filter: invert(1) hue-rotate(180deg) !important;
}

.mce-colorbutton-grid {
    background-color: black !important
}

.lia-quilt-column-common-header .BreadCrumb {
    background-image: none !important;
    background-color: #0000ff;
}

.lia-paging-full .lia-link-disabled,
.lia-paging-full-pages .lia-paging-page-ellipsis > .lia-link-disabled {
    background-color: transparent !important;
}

.lia-paging-full-pages li > .lia-link-disabled {
    background-color: pink !important;
}

/* Inverts ALL colours for items that look wierd */
.c-hero,
.hero-image,
.lia-unicode-emoji,
.lia-notifications-messages-aggregate,
.lia-tinymce-html,
.lia-user-rank-icon,
.UserName,
.vjs-poster,
.vjs-tech,
.lia-emoticons-emoji,
.lia-unicode-emoji,
.lia-link-navigation.lia-page-link.lia-user-name-link,
.prgBarComPnts,
.prgBarLinkCon,
.lia-video-brightcove-player-container svg,
img,
iframe,
video-js,
.video-player,
#arjb_divider,
div[aria-label="Breadcrumb"] {
    filter: brightness(75%) invert(1) hue-rotate(180deg) !important;
}

a {
    text-underline-position: under !important;
}

.page-link {
    color: var(--grey) !important;
    filter: brightness(80%) !important;
}

.lia-message-unread > .page-link {
    color: var(--orange) !important;
    filter: brightness(80%) !important;
}

.lia-notifications-messages-aggregate {
    border-color: var(--grey) !important;
}

.triangletop::before {
    background-color: yellow !important;
    color: #888 !important;
}

.lia-user-avatar-message {
    background-color: var(--black) !important;
    border: 0 !important;
}

#skycommunity {
    background-color: var(--light) !important;
    padding: 0 !important;
    margin-right: 0 !important;
}

span[itemprop="name"] {
    color: var(--blue) !important;
}

span[aria-current="page"] {
    color: var(--dark) !important;
}

.lia-breadcrumb-node.crumb::before {
    color: var(--corn) !important;
}

h2,
.lia-thread-subject,
.BoardList {
    color: var(--green) !important;
}

.lia-users-current-user-profile-card,
.prgBar {
    background: #ddd !important;
}

.lia-quilt-user-slide-out-menu .lia-users-current-user-profile-card .lia-users-profile-card-login,
.lia-quilt-user-slide-out-menu .lia-users-current-user-profile-card .lia-users-profile-card-rank {
    color: var(--dark) !important;
}

.lia-new-message-count {
    font-size: 115% !important;
    color: var(--gold) !important;
}

.lia-message-read,
.lia-message-unread {
    color: var(--blue) !important;
}

.image-console-link::before,
.video-console-link::before {
    color: var(--blue) !important;
}

.lia-quilt-column-alley .lia-quilt-column-alley-single {
    background-color: #eee !important;
}

#grid > .lia-list-wide > tbody > .lia-row-odd,
#grid > .lia-list-wide > tbody > .lia-row-even {
    border: 1px solid #aaa;
}

h2.board-title > a {
    color: var(--corn) !important;
}

Please note: Due to a forum update the TinyMCE editor (Where you submit new posts to the forum) is no longer able to be overwritten to dark mode 😞

[Annie+UK]

The TinyMCE editor, noted above, seems to have gone dark again using the code above, either something forum side changed or something in my browser/Linux changed, but either way it now goes dark 🙂

[NaughtyDragon]

there is a simpler way there is an app called Dark Reader for desktop it's available on Chrome Firefox Edge and safari as an add on / extension 

for mobile devices it's in the Apple App Store but it's a paid app not too much.  For Android use Firefox then you can install the add on and it's free

[Annie+UK]

@NaughtyDragon Thanks, that addon seems to work but has not been updated in 3 years 😞

My method is not perfect but does allow for a greater level of control

I gave the addon a quick try on this forum but reverted to my Stylus CSS