ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-19 19:25:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix light mode, top nav external links, etc:

Browse Source 
- Top nav external links now open in a new tab as intended (not specific
  to light mode)
- Consistently adjust opacity (not placement) of background images in
  mobile; lighter in light mode for legibility.
- Add a subtle white "shadow" to eyebrow text in light mode to improve
  legibility
- Fix focus styles for buttons & multicode tabs in light mode
- Make all buttons sized the same as primary buttons by default
- Fix typo that caused the "Reset" button on get-started to be unstyled
- Refactor theme switcher JS for simplicity.
- Fix issue with theme select icon not being visible in some cases.
- Update color of ✅ icons in interactive tutorial breadcrumbs
This commit is contained in:
mDuo13
2021-07-14 15:52:27 -07:00
parent f9f608d469
commit be80405f10
11 changed files with 124 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal2021.css
View File

File diff suppressed because one or more lines are too long

98
assets/js/theme-switch.js
View File

@@ -1,66 +1,46 @@
// Check user prefers color, toggle light/dark, save state
// Based partly on https://github.com/vinorodrigues/bootstrap-dark
// Based loosely on https://github.com/vinorodrigues/bootstrap-dark
function apply_color_scheme(theme) {
const disable_theme = (theme == "dark") ? "light" : "dark";
document.documentElement.classList.add(theme)
document.documentElement.classList.remove(disable_theme)
// $("#css-toggle-btn").prop( "checked", (theme == 'dark') );
}
//////// NOTES
// On mac the system will be either light, dark or auto. Auto will return either light or dark and NOT no preference.
// If users have set to auto then light will default durring daylight hours.
// Option 1 is to NOT respect user-prefers-color and only respect a toggle. This will default to a dark theme with light being optional.
// Option 2 is respect user-prefers-color at first. This will likely load the light theme during daylight. And switch auto. Then if user toggles switch we then respect that as override.
// function to toggle the css
function toggle_color_scheme_css($mode) {
// amend the body classes
if ($mode == 'dark') {
$("html").removeClass('light').addClass("dark");
} else {
$("html").removeClass("dark").addClass('light');
}
// if on user prefers color then update stored value
$upc = window.localStorage.getItem('user-prefers-color');
if ($upc !== null) {
// if ($upc == 0) $("#css-save-btn").prop( "checked", true ); // first time click
window.localStorage.setItem('user-prefers-color', ($mode == 'dark') ? 2 : 1);
}
function auto_update_theme() {
const upc = window.localStorage.getItem('user-prefers-color')
let theme = "dark"; // Default to dark theme
if (!upc) {
// User hasn't saved a preference specifically for this site; check
// the browser-level preferences.
if (window.matchMedia &&
window.matchMedia("(prefers-color-scheme: light)").matches) {
theme = "light"
}
} else { // Follow user's saved setting.
theme = (upc == "light") ? "light" : "dark"
}
apply_color_scheme(theme)
}
// function / listener action to toggle the button
function update_color_scheme_css() {
$upc = window.localStorage.getItem('user-prefers-color');
if (($upc === null) || ($upc == 0)) {
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: no-preference)").matches){
$mode = 'dark';
}else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches){
$mode = 'light';
}else{
$mode = 'dark';
}
} else {
$mode = ($upc == 2) ? 'dark' : 'light';
}
$("#css-toggle-btn").prop( "checked", ('dark' == $mode) );
toggle_color_scheme_css($mode);
}
function user_toggle_theme() {
const new_theme = document.documentElement.classList.contains("dark") ? "light" : "dark"
window.localStorage.setItem("user-prefers-color", new_theme)
// Animate this style switch, but not the ones that happen on page load:
document.body.style.transition = "background-color .2s ease"
apply_color_scheme(new_theme)
}
// initial mode discovery & update button
update_color_scheme_css();
auto_update_theme()
// update automatically if the user's theme preference changes
if (window.matchMedia) {
window.matchMedia("(prefers-color-scheme: dark)").addListener( auto_update_theme )
}
// Note: .addListener is considered deprecated, and is supposed to be updated to
// addEventListener("change", callback) instead; however, as recently as macOS
// High Sierra (~2017-2018) Safari does not support addEventListener here.
// update every time it changes
if (window.matchMedia) window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme_css );
$(document).ready(function() {
// toggle button click code
$("#css-toggle-btn").bind("click", function() {
// disable further automatic toggles
if (window.localStorage.getItem('user-prefers-color') === null)
window.localStorage.setItem('user-prefers-color', 0);
// get current mode, i.e. does body have the `.dark`` classname
$mode = $("html").hasClass("dark") ? 'light' : 'dark';
$upc = $("html").hasClass("dark") ? 1 : 2;
window.localStorage.setItem("user-prefers-color", $upc);
toggle_color_scheme_css($mode);
});
})
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("css-toggle-btn").onclick = user_toggle_theme
})