0

Discussion topic: Dark mode for this forum

Reply
This message was authored by Annie+UK This message was authored by: Annie+UK

Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more

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

 

Annie  ( Please Note: I am Neurodivergent )
Reply

All Replies

This message was authored by SDR This message was authored by: SDR

Re: Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more

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

Stuart R
I am responsible for the content, but not the way it is presented, I have some sight issues
Auto-Correct is my enemy.
If this is your first post - Welcome
Sky Glass - No Puck
Annie+UK
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more

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

Annie  ( Please Note: I am Neurodivergent )
This message was authored by Mark39 This message was authored by: Mark39

Re: Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more

@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
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more

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

 

2021-05-10-151705_2560x720_scrot.png

 

Annie  ( Please Note: I am Neurodivergent )
This message was authored by daveNOS This message was authored by: daveNOS

Re: Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more

@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.

This message was authored by Mark39 This message was authored by: Mark39

Re: Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more

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

Annie+UK
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more

 

/* 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...

 

Annie  ( Please Note: I am Neurodivergent )
This message was authored by Federica-C This message was authored by: Federica-C

Re: Dark mode for this forum

Fab tips, thank you all! 😃 😎

Federica-C
Community Manager

We're interested in your ideas for improving Sky Go, Sky Q & Sky Broadband.

Browse the latest customer ideas or add your own. 

Annie+UK
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more
/* 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;
}
Annie  ( Please Note: I am Neurodivergent )
This message was authored by LGUser This message was authored by: LGUser

Re: Dark mode for this forum

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

Annie+UK
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more

@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  ( Please Note: I am Neurodivergent )
Annie+UK
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more

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  ( Please Note: I am Neurodivergent )
Annie+UK
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more

 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  ( Please Note: I am Neurodivergent )
Annie+UK
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

Posted by a Superuser, not a Sky employee. Find out more

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;
}

 

 

Annie  ( Please Note: I am Neurodivergent )
Reply

Was this discussion not helpful?

No problem. Browse or search to find help, or start a new discussion on Community.

Start a new discussion

On average, new discussions are replied to by our users within 7 hours

New Discussion