Mobile Apps & Websites
0

Discussion topic: Dark mode for this forum

Reply
Reply
Annie+UK
What's this?
Superuser
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

‎02 Apr 2023 11:04 AM

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

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;
}
Report post
Post 16 of 21
2,292 Views
Reply
0 Likes
Annie+UK
What's this?
Superuser
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

‎17 May 2023 10:02 AM - last edited: ‎17 May 2023 10:17 AM

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

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 😞

Report post
Post 17 of 21
2,093 Views
Reply
0 Likes
Annie+UK
What's this?
Superuser
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

‎31 May 2023 10:07 AM

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

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 🙂

Report post
Post 18 of 21
2,043 Views
Reply
NaughtyDragon
What's this?
This message was authored by NaughtyDragon This message was authored by: NaughtyDragon

Re: Dark mode for this forum

‎23 Aug 2023 08:42 PM

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

Report post
Post 19 of 21
1,873 Views
Reply
0 Likes
Annie+UK
What's this?
Superuser
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

‎23 Aug 2023 09:11 PM

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

@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

Report post
Post 20 of 21
1,865 Views
Reply
0 Likes
Annie+UK
What's this?
Superuser
Topic Author
This message was authored by Annie+UK This message was authored by: Annie+UK

Re: Dark mode for this forum

‎17 Apr 2024 04:57 PM

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

Version 1.6 to darken new changes for post reply buttons etc...

 

/* ==UserStyle==
@name           Sky Help Foums - Dark Mode
@author         Annie UK
@description    `Dark Mode for Sky Help Forums`
@version        20230517.1.6
==/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;

    background-color: black;
    color-scheme: dark only !important;
}

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

body,
:root {
    background-color: #f5f5f5;
}

.lia-forum-topic-page-solution-link,
.lia-component-solution-link {
    font-size: 80%;
}

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

.lia-tinymce-html {
    scrollbar-color: hotpink 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,
video,
#arjb_divider,
div[aria-label="Breadcrumb"] {
    filter: brightness(75%) invert(1) hue-rotate(180deg);
}
a {
    text-underline-position: under !important;
}

.page-link {
    font-weight: 400 !important;
    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: orange !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;
}

::selection {
    background-color: #3399FF !important;
    color: white !important;
    background-image: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: white !important;
}

.lia-action-reply {
    background-color: #ffffff !important;
    border-color: #2385d0 !important;
    color: #fff !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='19' viewBox='0 0 27 19' role='img'%3E%3Ctitle%3EReply icon%3C/title%3E%3Cpath fill='%230073c5' fill-rule='evenodd' d='M9.838 1.259l-8.56 6.114c-.898.642-1.107 1.89-.465 2.79.129.18.286.336.465.464L13 19v-6h3.5c4.57 0 8.447 1.925 9.89 6 .387-1.096.61-2.271.61-3.5C27 9.701 22.299 5 16.5 5H13V2.886c0-1.104-.895-2-2-2-.417 0-.823.13-1.162.373zM11 2.886V7h5.5c4.005 0 7.371 2.784 8.267 6.519C22.628 11.895 19.784 11 16.5 11H11V15.113L2.441 9'/%3E%3C/svg%3E") !important;
}


.lia-action-reply:hover {
    background-color: #73add8 !important;
    border-color: #73add8 !important;
    color: #fff !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='19' viewBox='0 0 27 19' role='img'%3E%3Ctitle%3EReply icon%3C/title%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M9.838 1.259l-8.56 6.114c-.898.642-1.107 1.89-.465 2.79.129.18.286.336.465.464L13 19v-6h3.5c4.57 0 8.447 1.925 9.89 6 .387-1.096.61-2.271.61-3.5C27 9.701 22.299 5 16.5 5H13V2.886c0-1.104-.895-2-2-2-.417 0-.823.13-1.162.373zM11 2.886V7h5.5c4.005 0 7.371 2.784 8.267 6.519C22.628 11.895 19.784 11 16.5 11H11V15.113L2.441 9'/%3E%3C/svg%3E") !important;
}
/* Reply button and Mark answer buttons hover states */
/* .lia-action-reply:hover, */
.lia-link-ticket-post-action:hover,
.lia-reply-action-link:hover {
    background-color: #73add8 !important;
    border-color: #73add8 !important;
    color: #fff !important;
}

/* Disabled thums up - stop hover changing button */
.kudos-link.lia-link-disabled:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='23' viewBox='0 0 24 23' role='img'%3E%3Ctitle%3ELike icon%3C/title%3E%3Cpath fill='%230073c5' fill-rule='evenodd' d='M17.84 21.137l-7.008-.049c-.183-.001-.358-.036-.521-.102-.876-.36-1.548-.588-2.062-.734v-.027l.001-.004v-9.43c1.486-1.757 3.16-3.965 3.164-7.513.001-.68.197-1.007.618-1.028.23 0 .824.011 1.338 1.187.598 1.366.505 4.06.397 4.979-.1.86.438 1.651 1.493 1.651h6.488l-.632 1.788h-3.973c-.177 0-.322.061-.436.182-.24.257-.203.993-.071 1.318h3.951l-.529 1.5h-2.915c-.177 0-.322.061-.436.182-.24.257-.203.993-.071 1.318h2.892l-.53 1.5h-1.855c-.177 0-.322.061-.436.182-.24.257-.203.994-.071 1.318h1.833l-.629 1.782zm-15.59-.841h4.5v-9.3h-4.5v9.3zM21.762 8.567H15.26s.375-3.696-.516-5.731C13.854.8 12.451.75 12.025.75c-.425 0-2.109.254-2.11 2.527C9.91 6.172 8.636 7.99 7.29 9.6c-.169-.065-.35-.104-.541-.104h-4.5c-.829 0-1.5.671-1.5 1.5v9.225c0 .87.704 1.575 1.574 1.575h4.352c.277 0 .534-.078.76-.204.764.174 1.73.546 2.306.781.343.141.71.212 1.08.215l7.008.049h.01c.636 0 1.204-.401 1.416-1.002l3.975-11.264c.193-.931-.518-1.804-1.469-1.804z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 56px !important;
}

 

Report post
Post 21 of 21
369 Views
Reply
0 Likes
Reply

Was this discussion not helpful?

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

Search Sky Community

linear-search Created with Sketch. Search

Start a new discussion

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

New Discussion