0

Discussion topic: Dark mode for this forum

Reply
Reply
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

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;
}
Sky support for Sky+HD and earlier systems has ended, you can still get support if you already have Sky Protect insurance otherwise you'll have to find your own 3rd party company to get support from at your own expense
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

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 😞

Sky support for Sky+HD and earlier systems has ended, you can still get support if you already have Sky Protect insurance otherwise you'll have to find your own 3rd party company to get support from at your own expense
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

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 🙂

Sky support for Sky+HD and earlier systems has ended, you can still get support if you already have Sky Protect insurance otherwise you'll have to find your own 3rd party company to get support from at your own expense
This message was authored by NaughtyDragon This message was authored by: NaughtyDragon

Re: Dark mode for this forum

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

@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

Sky support for Sky+HD and earlier systems has ended, you can still get support if you already have Sky Protect insurance otherwise you'll have to find your own 3rd party company to get support from at your own expense
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.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;
}

 

Sky support for Sky+HD and earlier systems has ended, you can still get support if you already have Sky Protect insurance otherwise you'll have to find your own 3rd party company to get support from at your own expense
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