Dark mode for this forum

[Annie+UK]

Anyone wanting dark mode for this help forum using a chrome based browser then I have a solution (work-in-progress)

Using the extension: User JavaScript and CSS

with the following CSS code:

/* Sky Help Dark mode v0.1 beta - © 2021 Annie R J Brion (MMXXI) */

html {
	filter: invert(1) hue-rotate(180deg);
}

.lia-unicode-emoji,
img,
svg  {
	filter: invert(1) hue-rotate(180deg);
}

You need to set the above code to Highest CSS priority in the extension setting for the helpforum

[SDR]

@Annie+UK  Would love a Dark Mode, but I am an iPad 

[Annie+UK]

I've not found a way to inject my CSS using an iPad but to be fair I stopped using my iPad once I got my Raspberry Pi up and running

[Mark39]

---

@SDR wrote:

@Annie+UK  Would love a Dark Mode, but I am an iPad 

---

Yes, same, I'd find it much easier to read. I have an Android tablet but would have no clue how to go about following @Annie+UK's,instructions or what any pre-reqs might be. 

[Annie+UK]

Using a chrome browser that can load standard extensions it is simple to get dark mode working 🙂

[daveNOS]

@Mark39  If you want dark mode here on Android then this is how(using chrome),

1. Type chrome:flags in the browser bar and press enter, 

2. Type Darken in to the search box and press enter,

3. See the item labeled "Darken websites checkbox in themes setting"? Tap the box beneath it and change it from "Default" to "Enabled."

4.Tap the Relaunch button at the bottom of the screen.

Edit missed a few steps.

Once you have done the above enter settings, then themes then dark mode and select Darken websites, all websites should then have dark mode enabled as default.

[Mark39]

Thanks @daveNOS. Worked a treat - with Brave, too.

[Annie+UK]

/* Sky Help Dark mode v0.2 beta - © 2021 Annie R J Brion (MMXXI) */

html {
	filter: invert(1) hue-rotate(180deg);
}

.lia-unicode-emoji,
.lia-notifications-messages-aggregate,
.video-player,
img,
svg  {
	filter: invert(1) hue-rotate(180deg);
}

.lia-notifications-messages-aggregate {
	border-color:grey;
}

#skycommunity::before {
	background-image: none;
}

.lia-users-current-user-profile-card,
.prgBar,
.lia-breadcrumb,
.lia-component-common-widget-breadcrumb,
.Breadcrumb { 
	background: darkgrey;
}

Newer version of the CSS code to not alter video etc...

[Federica-C]

Fab tips, thank you all! 😃 😎

[Annie+UK]

/* Sky Help Dark mode v0.3 beta - © 2021 Annie R J Brion (MMXXI) */

/* Fixes and new featires */

html {
	filter: invert(1) hue-rotate(180deg);
}

.mce-colorbutton-grid {
	filter: invert(1) hue-rotate(180deg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: quicksand,Helvetica,Arial,sans-serif;
	font-weight: 400;
}

a {
    text-underline-position: under;
}

 .lia-unicode-emoji,
.lia-notifications-messages-aggregate,
.lia-tinymce-html,
.lia-user-rank-icon,
.UserName,
.hero-image,
.lia-emoticons-emoji,
.lia-unicode-emoji,
.lia-link-navigation.lia-page-link.lia-user-name-link,
svg,
img,
iframe,
.video-player {
	filter: brightness(90%) invert(1) hue-rotate(180deg);
}

.page-link {
	color: darkorange;
	filter: brightness(80%);
}

.lia-notifications-messages-aggregate {
	border-color:grey;
}

.lia-user-avatar-message {
	background-color:black;
	border:0;
}

.UserAvatar>img,
table, tr, td,
li,
span,
div {
	box-shadow: none;
}

#skycommunity::before {
	background-image: none;
}

#skycommunity {
	background-color: #eee;
}

span[itemprop="name"] {
	color: #0073c5;
}

span[aria-current="page"] {
	color: #333;	
}

.lia-breadcrumb-node.crumb::before {
	color: royalblue;
}

h2,
.lia-thread-subject,
.BoardList {
	color: deeppink;	
}

.lia-users-current-user-profile-card,
.prgBar,
.lia-breadcrumb,
.lia-breadcrumb-forum,
.lia-component-common-widget-breadcrumb,
.breadcrumb { 
	background: #ddd;
	color: #444;
}

.solution,
.staffPost,
.oraclePost {
	border:0;
}

.lia-list-row::after,
.lia-list-standard-inline::before {
	display: none;
}

.lia-new-message-count {
	font-size: 200%;
	color: #cccc00;
}


.lia-message-read,
.lia-message-unread {
	font-size: 90%;
	color: #0073c5;
}

.lia-panel-heading-bar-title {
	color: #0073c5;

}

.lia-panel-heading-bar-title:hover {
	cursor: pointer;
	text-decoration: underline;
    text-underline-position: under;
}

.image-console-link::before,
.video-console-link::before {
	display: none;
}

[LGUser]

What extention would work for Firefox to allow this code to be used?

[Annie+UK]

@LGUser 

Been busy the last month migrating to a new Linux distribution and moving from Chromium to Firefox and have had to find new add-ons to get things working again 🙂 I've not been monitoring this form at all during this time thus the late reply

I use Stylus as that has an addon/extension for Firefox and Chrome/Chromium

Latest code here

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

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

/*html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Quicksand, Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
}*/
a {
    text-underline-position: under !important;
}

.lia-unicode-emoji,
.lia-notifications-messages-aggregate,
.lia-tinymce-html,
.lia-user-rank-icon,
.UserName,
.hero-image,
.lia-emoticons-emoji,
.lia-unicode-emoji,
.lia-link-navigation.lia-page-link.lia-user-name-link,
.lia-video-brightcove-player-container svg,
img,
iframe,
.video-player {
    filter: brightness(90%) invert(1) hue-rotate(180deg) !important;
}

.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,
.lia-breadcrumb,
.lia-breadcrumb-forum,
.lia-component-common-widget-breadcrumb,
.breadcrumb {
    background: #ddd !important;
    color: var(--dark) !important;
}

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

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

.lia-panel-heading-bar-title {
    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;
}

h2.board-title > a#link_14,
h2.board-title > a#link_26 {
    color: var(--pink) !important;
    font-size: 90% !important;
}

h2.board-title > a#link_17,
h2.board-title > a#link_20,
h2.board-title > a#link_23 {
    color: var(--corn) !important;
    font-size: 90% !important;
}

/* Remove unwanted stuff ====================================================================== */
.lia-message-stats-count::before {
    display: none !important;
}

.UserAvatar > img,
table,
tr,
td,
li,
span,
div {
    box-shadow: none !important;
}

#skycommunity::before {
    background-image: none !important;
}

.solution,
.staffPost,
.oraclePost {
    border: 0 !important;
}

.lia-list-row::after,
.lia-list-standard-inline::before {
    display: none !important;
}

[Annie+UK]

Minor fix to correct some video attachements

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

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

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

.lia-unicode-emoji,
.lia-notifications-messages-aggregate,
.lia-tinymce-html,
.lia-user-rank-icon,
.UserName,
.hero-image,
.vjs-poster,
.vjs-tech,
.lia-emoticons-emoji,
.lia-unicode-emoji,
.lia-link-navigation.lia-page-link.lia-user-name-link,
.lia-video-brightcove-player-container svg,
img,
iframe,
.video-player {
    filter: brightness(90%) invert(1) hue-rotate(180deg) !important;
}

.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,
.lia-breadcrumb,
.lia-breadcrumb-forum,
.lia-component-common-widget-breadcrumb,
.breadcrumb {
    background: #ddd !important;
    color: var(--dark) !important;
}

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

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

.lia-panel-heading-bar-title {
    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;
}

h2.board-title > a#link_14,
h2.board-title > a#link_29 {
    color: var(--pink) !important;
    font-size: 90% !important;
}

h2.board-title > a#link_17,
h2.board-title > a#link_20,
h2.board-title > a#link_23,
h2.board-title > a#link_26 {
    color: var(--corn) !important;
    font-size: 90% !important;
}

/* Remove unwanted stuff ====================================================================== */
.lia-message-stats-count::before {
    display: none !important;
}

.UserAvatar > img,
table,
tr,
td,
li,
span,
div {
    box-shadow: none !important;
}

#skycommunity::before {
    background-image: none !important;
}

.solution,
.staffPost,
.oraclePost {
    border: 0 !important;
}

.lia-list-row::after,
.lia-list-standard-inline::before {
    display: none !important;
}

[Annie+UK]

 Version 1.2

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

/* Dark mode ====================================================================== */
: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;
}

.c-hero,
.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,
.lia-video-brightcove-player-container svg,
img,
iframe,
.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(--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;
    color: var(--dark) !important;
}

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

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

.lia-panel-heading-bar-title {
    color: var(--blue2) !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;
}

h2.board-title > a#link_14,
h2.board-title > a#link_29 {
    color: var(--pink) !important;
    font-size: 90% !important;
}

h2.board-title > a#link_17,
h2.board-title > a#link_20,
h2.board-title > a#link_23,
h2.board-title > a#link_26 {
    color: var(--corn) !important;
    font-size: 90% !important;
}


/* Remove unwanted stuff ====================================================================== */
.UserAvatar > img,
table,
tr,
td,
li,
span,
div {
    box-shadow: none !important;
}

#skycommunity::before {
    background-image: none !important;
}

.solution,
.staffPost,
.oraclePost {
    border: 0 !important;
}

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

#grid > .lia-list-wide > tbody > .lia-row-odd::after,
#grid > .lia-list-wide > tbody > .lia-row-even::after {
    display: none;
}

[Annie+UK]

Fixes for profile slide-out menu etc...

Use this with the Stylus browser addon/extension or similar

To use you own colours just edit the variables starting -- at the top, for example:

    --pink: deeppink;

to

    --pink: royalblue;

/* ==UserStyle==
@name           Sky Help Foums - Dark Mode
@author         Annie UK
@description    `Dark Mode for Sky Help Forums`
@version        20220808.1.3
==/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-users-current-user-profile-card,
.lia-video-brightcove-player-container svg,
img,
iframe,
.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(--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;
    color: var(--dark) !important;
}

.lia-new-message-count {
    font-size: 200% !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#link_14,
h2.board-title > a#link_29 {
    color: var(--pink) !important;
    font-size: 90% !important;
}

h2.board-title > a#link_17,
h2.board-title > a#link_20,
h2.board-title > a#link_23,
h2.board-title > a#link_26 {
    color: var(--corn) !important;
    font-size: 90% !important;
}