mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 03:35:51 +00:00
Add light theme first pass
Toggle is only temp to test. Need to move in nav for final. Will need further adjusting colors.
This commit is contained in:
Jake
64
assets/js/theme-switch.js
Normal file
64
assets/js/theme-switch.js
Normal file
@@ -0,0 +1,64 @@
|
||||
// Check user prefers color, toggle light/dark, save state
|
||||
// Based partly on https://github.com/vinorodrigues/bootstrap-dark
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
//////// 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 / 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);
|
||||
}
|
||||
|
||||
// initial mode discovery & update button
|
||||
update_color_scheme_css();
|
||||
|
||||
// update every time it changes
|
||||
if (window.matchMedia) window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme_css );
|
||||
|
||||
// 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);
|
||||
});
|
||||
|
||||
})
|
||||
@@ -3,7 +3,6 @@
|
||||
// These styles control the display of diagrams in page contents.
|
||||
|
||||
.content {
|
||||
|
||||
// Shrink images that would overflow the main column.
|
||||
img {
|
||||
max-width: 100%;
|
||||
@@ -19,6 +18,9 @@
|
||||
svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .content {
|
||||
|
||||
// Recolor UMLet diagrams for dark theme -------------------------------------
|
||||
svg[fill="black"] {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* Edit on GitHub link ------------------------------------------------------ */
|
||||
.github-edit-wrap .github-edit {
|
||||
background-image: url(../vendor/github-marks/GitHub-Mark-Light-32px.png);
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
|
||||
background-size: 24px 24px;
|
||||
background-position: left 12px center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@@ -66,7 +66,7 @@ aside .active-parent > a {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.active > .nav-link, {
|
||||
.active > .nav-link {
|
||||
border-left: 2px solid $primary;
|
||||
margin-left: -1px;
|
||||
padding-left: calc(1rem - 1px);
|
||||
|
||||
170
styles/light/_light-theme.scss
Normal file
170
styles/light/_light-theme.scss
Normal file
@@ -0,0 +1,170 @@
|
||||
$light-theme: #F9FAF8;
|
||||
body {
|
||||
background: $light-theme;
|
||||
background-color: $light-theme;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
// Colors
|
||||
$navbar-light-color: $dark;
|
||||
$navbar-light-hover-color: $secondary;
|
||||
$navbar-light-active-color: $primary;
|
||||
|
||||
// Nav logo.
|
||||
|
||||
.logo {
|
||||
content: url(/assets/img/XRPLedger_DevPortal-black.svg);
|
||||
}
|
||||
|
||||
// Content
|
||||
/* Site-wide header link styles --------------------------------------------- */
|
||||
h1 a,
|
||||
h2 a,
|
||||
h3 a {
|
||||
color: $dark;
|
||||
text-decoration: none;
|
||||
}
|
||||
h1 a:hover,
|
||||
h2 a:hover,
|
||||
h3 a:hover,
|
||||
.xrpl-footer h5 a:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.curated-links a,
|
||||
.children-display a,
|
||||
a.card,
|
||||
.xrpl-footer a {
|
||||
color: $dark;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.btn-outline-secondary,
|
||||
.content a.button,
|
||||
.navbar-dark .navbar-nav .nav-link.btn-outline-secondary {
|
||||
color: $dark;
|
||||
border-color: $dark;
|
||||
|
||||
&:not(:disabled):not(.disabled):hover, &:not(:disabled):not(.disabled):active {
|
||||
color: $primary;
|
||||
border-color: $primary;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
//most will be set further down the line.
|
||||
.btn {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
|
||||
/* (Jump to) "Top" button */
|
||||
.jump-to-top {
|
||||
color: $black;
|
||||
background-color: transparent;
|
||||
|
||||
&::after {
|
||||
content: " ↑"
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
background-color: #00f26f;
|
||||
border-color: #00e56a;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumbs
|
||||
.breadcrumb {
|
||||
background: $light-theme;
|
||||
}
|
||||
.breadcrumb-item a {
|
||||
color: $gray-600;
|
||||
|
||||
&:hover {
|
||||
color: $primary
|
||||
}
|
||||
}
|
||||
|
||||
// Top Nav
|
||||
.top-nav {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $black;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 -1px 0 0 $light-theme;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.github-edit-wrap .github-edit.nav-link {
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
|
||||
background-size: 24px 24px;
|
||||
background-position: left 12px center;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 48px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// side Nav
|
||||
aside li a {
|
||||
color: $black;
|
||||
}
|
||||
aside .sidenav_cat_title {
|
||||
color: $black;
|
||||
}
|
||||
.page-toc .level-1 a,
|
||||
.command-list .separator {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.dactyl-tree-nav {
|
||||
nav {
|
||||
border-left: 1px solid $black;
|
||||
}
|
||||
}
|
||||
|
||||
.page-toc,
|
||||
.command-list {
|
||||
border-left: 1px solid $black;
|
||||
|
||||
.level-3 {
|
||||
border-left: 1px solid $black;
|
||||
}
|
||||
}
|
||||
|
||||
// Code / rfs
|
||||
code {
|
||||
color: $orange-500;
|
||||
}
|
||||
|
||||
// code-tabs
|
||||
.multicode {
|
||||
a {
|
||||
color: $black;
|
||||
&.current {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: $gray-900;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
5
styles/light/_mixins.scss
Normal file
5
styles/light/_mixins.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@mixin prefers-color-scheme( $scheme: dark ) {
|
||||
@media (prefers-color-scheme: #{$scheme}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,8 @@
|
||||
},
|
||||
"scripts": {
|
||||
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2021.css --output-style compressed",
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2021.css --output-style compressed --source-map true"
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2021.css --output-style compressed --source-map true",
|
||||
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2021.css --output-style compressed --source-map true"
|
||||
},
|
||||
"dependencies": {
|
||||
"sass": "^1.26.10"
|
||||
|
||||
@@ -67,3 +67,20 @@ $line-height-base: 1.5;
|
||||
@import "_rpc-tool.scss";
|
||||
@import "_blog.scss";
|
||||
@import "_feedback.scss";
|
||||
|
||||
// Light/Dark theme settings ---------------------------------------------------
|
||||
// Option to only change theme on user system settings. No toggle.
|
||||
|
||||
//Mixin to conditionaly include other themes
|
||||
// @import "light/_mixins.scss";
|
||||
|
||||
// Default to dark theme with light being alt
|
||||
// $color-scheme-alt: light;
|
||||
|
||||
// @include prefers-color-scheme($color-scheme-alt) {
|
||||
// @import "light/_light-theme.scss";
|
||||
// }
|
||||
|
||||
html.light {
|
||||
@import "light/_light-theme.scss";
|
||||
}
|
||||
|
||||
@@ -32,6 +32,8 @@
|
||||
<meta name="msapplication-TileColor" content="#25A768">
|
||||
<meta name="msapplication-config" content="{{currentpage.prefix}}assets/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#25A768">
|
||||
<!-- The page supports both dark and light color schemes, and the page author prefers dark. -->
|
||||
<meta name="color-scheme" content="dark light">
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="{{currentpage.prefix}}assets/vendor/jquery-3.6.0.min.js"></script>
|
||||
@@ -71,6 +73,9 @@
|
||||
<script src="assets/js/js-editor.js"></script>
|
||||
{% endif %}
|
||||
|
||||
<!-- Theme switch -->
|
||||
<script src="assets/js/theme-switch.js"></script>
|
||||
|
||||
{% block head %}
|
||||
|
||||
{% endblock %}
|
||||
@@ -78,6 +83,12 @@
|
||||
</head>
|
||||
|
||||
<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}" data-spy="scroll" data-target=".page-toc" data-offset="0">
|
||||
<form class="form-inline">
|
||||
<div class="custom-control custom-switch" title="" data-toggle="tooltip" data-placement="left" data-original-title="Toggle Dark Mode">
|
||||
<input type="checkbox" class="custom-control-input" id="css-toggle-btn">
|
||||
<label class="custom-control-label" for="css-toggle-btn"></label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KCQZ3L8"
|
||||
|
||||
Reference in New Issue
Block a user