night mode theme for website

Discuss ideas and suggestions around the Church website.
Post Reply
joelweight
New Member
Posts: 2
Joined: Sun Jul 05, 2015 12:39 pm

night mode theme for website

#1

Post by joelweight »

I use night mode exclusively in the gospel library on my mobile app. Because of that, the yellow underline looks the best for my marking. I have found that when I go to the scriptures on the website I can't even see many of my highlights because of the yellow underline on white background. Is there a "night mode" for the website that I can apply without having to resort to a browser plugin to manually tweak the css?
User avatar
sbradshaw
Community Moderators
Posts: 6260
Joined: Mon Sep 26, 2011 9:42 pm
Location: Utah
Contact:

Re: night mode theme for website

#2

Post by sbradshaw »

No, LDS.org doesn't have a night mode.
Samuel Bradshaw • If you desire to serve God, you are called to the work.
tylerslaughter
New Member
Posts: 1
Joined: Mon Jan 20, 2020 8:45 pm

Re: night mode theme for website

#3

Post by tylerslaughter »

1) Install the extension: Amino - https://chrome.google.com/webstore/deta ... f?hl=en-US
2) Now navigate to the church website, then open the extension and hit the button that says domain in the extension window
3) Paste this script inside the editor and hit save
now keep in mind that this is a CSS script, meaning that there is no possible way for it to steal your information...
NOTE: This was not made for the main website, but will work very well somewhere like here for an example: https://www.churchofjesuschrist.org/stu ... n?lang=eng

:not(span) {
background: transparent !important;
color: white !important;
}

html:root {
--background-primary: rgb(46, 46, 46);
}

#app, header, nav, body, html, #flexContainer, article, section, section * {
background: var(--background-primary) !important;
}

a, .tree_item, .branch, select, *::after, .iconLink, #PFmainNavLinks, button path {
color: skyblue !important;
text-shadow: 0 0 7.5px lime !important;
fill: skyblue !important;
}
a:visited, .currentselected {
&, * {
color: powderblue !important;
}
}

img, svg, svg * {
background: radial-gradient(rgba(191, 255, 0, .3), transparent 75%) !important;
}

path {
fill: white;
}

nav ul span {
border-radius: 5px;
}

.navArrow {
box-shadow: inset 0 0 10px skyblue;
margin: 2px;
}

a::after {
background: inherit !important;
}

* {
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-thumb {
border-radius: 5px 3px 3px 5px !important;
background: gray !important;
&:hover {
background: dimgray !important;
}
}

::-webkit-scrollbar-track {
background: rgba(0,0,0, 0.1) !important;
}
}
User avatar
sbradshaw
Community Moderators
Posts: 6260
Joined: Mon Sep 26, 2011 9:42 pm
Location: Utah
Contact:

Re: night mode theme for website

#4

Post by sbradshaw »

Gospel Library does have Night and Sepia themes now (though unfortunately the header remains bright).
https://www.churchofjesuschrist.org/study/lib?lang=eng
The theme can be changed using the gear icon in the top right.
Samuel Bradshaw • If you desire to serve God, you are called to the work.
msrobins
New Member
Posts: 1
Joined: Sun Jan 10, 2021 10:16 am

Re: night mode theme for website

#5

Post by msrobins »

When using the Chrome browser, you can get similar results, but for all webpages, by doing the following:

Make sure you are prepared to close all of your current chrome tabs as a relaunch will be required as a last step

Go to: chrome://flags
Search "Force Dark Mode for Web Contents"
Change Default to Enabled
Relaunch
jecm1234
New Member
Posts: 1
Joined: Wed Oct 25, 2023 4:36 am

Re: night mode theme for website

#6

Post by jecm1234 »

below your profile picture clic on the thee dots, then display then choose dark.
Post Reply

Return to “Main Church Website”