night mode theme for website

6 postsstarted by joelweight 6,134 viewsoriginal topic

New Member
#1
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?
Community Moderators
#2
No, LDS.org doesn't have a night mode.
Samuel Bradshaw • If you desire to serve God, you are called to the work.
New Member
#3
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;
}
}
Community Moderators
#4
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.
New Member
#5
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
New Member
#6
below your profile picture clic on the thee dots, then display then choose dark.