From 6e02aeb7ab5c8189c4f7758045c6f36939331f11 Mon Sep 17 00:00:00 2001 From: Jake Date: Sun, 30 May 2021 19:03:36 -0700 Subject: [PATCH] Add light theme first pass Toggle is only temp to test. Need to move in nav for final. Will need further adjusting colors. --- assets/js/theme-switch.js | 64 +++++++++++++ styles/_diagrams.scss | 4 +- styles/_github-edit.scss | 2 +- styles/_side-nav.scss | 2 +- styles/light/_light-theme.scss | 170 +++++++++++++++++++++++++++++++++ styles/light/_mixins.scss | 5 + styles/package.json | 3 +- styles/xrpl.scss | 17 ++++ template/base.html.jinja | 13 ++- 9 files changed, 275 insertions(+), 5 deletions(-) create mode 100644 assets/js/theme-switch.js create mode 100644 styles/light/_light-theme.scss create mode 100644 styles/light/_mixins.scss diff --git a/assets/js/theme-switch.js b/assets/js/theme-switch.js new file mode 100644 index 0000000000..dd83c0dcd2 --- /dev/null +++ b/assets/js/theme-switch.js @@ -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); + }); + +}) \ No newline at end of file diff --git a/styles/_diagrams.scss b/styles/_diagrams.scss index 48d360810f..4aa4daded0 100644 --- a/styles/_diagrams.scss +++ b/styles/_diagrams.scss @@ -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"] { diff --git a/styles/_github-edit.scss b/styles/_github-edit.scss index 62e406e184..3e49322c0f 100644 --- a/styles/_github-edit.scss +++ b/styles/_github-edit.scss @@ -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; diff --git a/styles/_side-nav.scss b/styles/_side-nav.scss index cf2dcec887..7820a6014b 100644 --- a/styles/_side-nav.scss +++ b/styles/_side-nav.scss @@ -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); diff --git a/styles/light/_light-theme.scss b/styles/light/_light-theme.scss new file mode 100644 index 0000000000..31de77542f --- /dev/null +++ b/styles/light/_light-theme.scss @@ -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; + } + } +} + diff --git a/styles/light/_mixins.scss b/styles/light/_mixins.scss new file mode 100644 index 0000000000..ed858e5ad4 --- /dev/null +++ b/styles/light/_mixins.scss @@ -0,0 +1,5 @@ +@mixin prefers-color-scheme( $scheme: dark ) { + @media (prefers-color-scheme: #{$scheme}) { + @content; + } + } \ No newline at end of file diff --git a/styles/package.json b/styles/package.json index c39c56af4f..abf0c99bf3 100644 --- a/styles/package.json +++ b/styles/package.json @@ -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" diff --git a/styles/xrpl.scss b/styles/xrpl.scss index ec407d491b..eaac2b72f6 100644 --- a/styles/xrpl.scss +++ b/styles/xrpl.scss @@ -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"; +} diff --git a/template/base.html.jinja b/template/base.html.jinja index 16082f5d1f..1166f03c4f 100644 --- a/template/base.html.jinja +++ b/template/base.html.jinja @@ -32,6 +32,8 @@ + + @@ -71,6 +73,9 @@ {% endif %} + + + {% block head %} {% endblock %} @@ -78,7 +83,13 @@ - +
+
+ + +
+
+