Skip to content

Commit aeb54f7

Browse files
HofiOneHofiOne
committed
Prepared handling future light/dark skin changes
- Moved common js init parts to globals.html - oi skins made the default light/dark ones Signed-off-by: Hofi <hofione@gmail.com>
1 parent 3db2fa1 commit aeb54f7

20 files changed

+344
-63
lines changed

‎_config.yml

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22

33
remote_theme: mmistakes/minimal-mistakes@4.24.0
44
#theme: minimal-mistakes-jekyll
5-
minimal_mistakes_skin: "midnight" # "default", "air", "aqua", "contrast", "dark", "dirt", "midnight", "mint", "neon", "plum", "sunrise"
5+
# Default minimal-mistakes skins
6+
# - # "default", "air", "aqua", "contrast", "dark", "dirt", "mint", "neon", "plum", "sunrise"
7+
# Additional skins
8+
# - "oi-midnight", "oi-light", "oi-dark"
9+
# NOTE: This one is not used at all, an d has no effect anymore, as we have our custom dynamic skin loading/swapping solution yet,
10+
# that is turned on by default via "skin_switchable: true"
11+
minimal_mistakes_skin: "oi-light"
612
skin_switchable: true
713

814
# Disable caching of content to disk in order to skip creating a .jekyll-cache or similar directory

‎_includes/globals.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{% comment %}
2+
<!-- Global variables, scripts that require an early access, go through liquid parsimg, and/or cannot be moved to main.min.js-->
3+
{% endcomment %}
4+
5+
<script async="false">
6+
7+
const searchEnabled = {% if site.search == true %} true {% else %} false {% endif %};
8+
const searchFromMastHead = {% if site.search_from_masthead == true %} true {% else %} false {% endif %};
9+
10+
const docRoot = '{{ site.baseurl }}';
11+
12+
function docPrefix() {
13+
return (docRoot != '' ? docRoot + '/' : '');
14+
}
15+
16+
function setCookie(name, value, days = 365 * 100) {
17+
var expires = "";
18+
if (days) {
19+
var date = new Date();
20+
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
21+
expires = "; expires=" + date.toUTCString();
22+
}
23+
document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Strict";
24+
}
25+
26+
function getCookie(name, defaultValue = null, saveIfMissing = false) {
27+
var nameEQ = name + "=";
28+
var ca = document.cookie.split(';');
29+
for (var i = 0; i < ca.length; i++) {
30+
var c = ca[i];
31+
while (c.charAt(0) == ' ') {
32+
c = c.substring(1, c.length);
33+
}
34+
if (c.indexOf(nameEQ) == 0) {
35+
return c.substring(nameEQ.length, c.length);
36+
}
37+
}
38+
if (saveIfMissing && defaultValue != null)
39+
setCookie(name, defaultValue);
40+
return defaultValue;
41+
}
42+
43+
</script>

‎_includes/head.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
<script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';</script>
1212

13+
{% include globals.html %}
1314
{% include skins.html %}
1415

1516
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

‎_includes/skins.html

Lines changed: 64 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<!-- Dynamic loading of the user selected skin stylesheet -->
33
{% endcomment %}
44

5-
{% comment %}<!-- NOTE: the 'default' skin is in the 'main.css', see the main.scss file for details -->{% endcomment %}
6-
<link rel="stylesheet" id="skinedStylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
5+
<link rel="stylesheet" id="skinedStylesheet" href="{{ '/assets/css/main_oi-light.css' | relative_url }}">
76

87
<style>
98
#full-page-container.full-page-container {
@@ -23,63 +22,74 @@
2322

2423
<script async="false">
2524

26-
const docRoot = '{{ site.baseurl }}';
27-
const darkSkin = 'midnight';
28-
const lightSkin = 'default';
29-
const searchEnabled = {% if site.search == true %} true {% else %} false {% endif %};
30-
const searchFromMastHead = {% if site.search_from_masthead == true %} true {% else %} false {% endif %};
25+
(function () {
26+
const defaultDarkSkin = 'oi-dark';
27+
const defaultLightSkin = 'oi-light';
3128

32-
function docPrefix() {
33-
return (docRoot != '' ? docRoot + '/' : '');
34-
}
29+
const selectedSkinStateKey = 'skin-state';
30+
const selectedSkinBackgroundColorKey = 'skin-background-color'
31+
const lightSkinKey = 'skin-light';
32+
const darkSkinKey = 'skin-dark';
33+
34+
const darkModeStateOn = 'dark';
35+
const darkModeStateOff = 'light';
36+
37+
//selectedLightSkin = 'default';
38+
//selectedDarkSkin = 'default';
39+
40+
function setSkinModeState(state) {
41+
const stylesheet = document.getElementById('skinedStylesheet');
42+
const skinName = getSkinForState(state);
3543

36-
function setCookie(name, value, days) {
37-
var expires = "";
38-
if (days) {
39-
var date = new Date();
40-
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
41-
expires = "; expires=" + date.toUTCString();
44+
// TODO: It seems it is not always triggered on a href value change once it is loaded/cached
45+
// We might have to force save the new color somehow in a different way as well
46+
// (Maybe a delayed saveColorChanges from window.addEventListener("load", ...) bellow ?!?!
47+
stylesheet.onload = saveColorChanges;
48+
stylesheet.href = docPrefix() + '/assets/css/main' + (skinName == 'default' ? '' : '_' + skinName) + '.css';
49+
50+
setCookie(selectedSkinStateKey, state);
4251
}
43-
document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Strict";
44-
}
4552

46-
function getCookie(name, defaultValue = null) {
47-
var nameEQ = name + "=";
48-
var ca = document.cookie.split(';');
49-
for (var i = 0; i < ca.length; i++) {
50-
var c = ca[i];
51-
while (c.charAt(0) == ' ') {
52-
c = c.substring(1, c.length);
53-
}
54-
if (c.indexOf(nameEQ) == 0) {
55-
return c.substring(nameEQ.length, c.length);
56-
}
53+
function getLightSkin() {
54+
return getCookie(lightSkinKey, defaultLightSkin, true);
5755
}
58-
return defaultValue;
59-
}
6056

61-
(function () {
62-
function setSkin(skin) {
63-
const stylesheet = document.getElementById('skinedStylesheet');
64-
//stylesheet.onload = saveChanges;
65-
stylesheet.href = docPrefix() + '/assets/css/main' + (skin == 'default' ? '' : '_' + skin) + '.css';
66-
setCookie('skin', skin, 365 * 100);
57+
function getDarkSkin() {
58+
return getCookie(darkSkinKey, defaultDarkSkin, true);
6759
}
6860

61+
function getSkinModeState() {
62+
return getCookie(selectedSkinStateKey, darkModeStateOff, true);
63+
}
64+
65+
function getSkinForState(state) {
66+
return state == darkModeStateOn ? getDarkSkin() : getLightSkin();
67+
}
68+
69+
function getSelectedSkin() {
70+
return getSkinForState(getSkinModeState());
71+
}
72+
6973
function toggleSkin(event) {
70-
if (getCookie('skin', 'default') == darkSkin) {
74+
const currentSkinState = getSkinModeState();
75+
if (currentSkinState == darkModeStateOff) {
7176
event.target.classList.remove('fa-toggle-on');
7277
event.target.classList.add('fa-toggle-off');
73-
setSkin(lightSkin);
7478
}
7579
else {
7680
event.target.classList.remove('fa-toggle-off');
7781
event.target.classList.add('fa-toggle-on');
78-
setSkin(darkSkin);
7982
}
83+
setSkinModeState(currentSkinState == darkModeStateOff ? darkModeStateOn : darkModeStateOff);
8084
event.currentTarget.blur();
8185
}
8286

87+
function saveColorChanges() {
88+
const htmlStyle = window.getComputedStyle(document.documentElement);
89+
const backgroundColor = htmlStyle.backgroundColor;
90+
setCookie(selectedSkinBackgroundColorKey, backgroundColor);
91+
};
92+
8393
function toggleIcon(target, off) {
8494
if (off) {
8595
target.classList.remove('fa-toggle-on');
@@ -92,12 +102,9 @@
92102
}
93103

94104
function toggleSkin(event) {
95-
var off = getCookie('skin', 'default') == darkSkin;
105+
var off = getSkinModeState() == darkModeStateOff;
96106

97-
if (off)
98-
setSkin(lightSkin);
99-
else
100-
setSkin(darkSkin);
107+
setSkinModeState(off ? darkModeStateOn : darkModeStateOff);
101108
toggleIcon(event.target, off);
102109

103110
event.currentTarget.blur();
@@ -107,36 +114,34 @@
107114
half rendered content parts (it is better to see an empty content even if it might appear in a different bacground color that the skin has)
108115
*/
109116
window.addEventListener("load", function () {
110-
function saveChanges() {
111-
const htmlStyle = window.getComputedStyle(document.documentElement);
112-
const backgroundColor = htmlStyle.backgroundColor;
113-
setCookie('skin-background-color', backgroundColor, 365 * 100);
114-
};
115-
116117
var container = document.getElementById("full-page-container");
117118
if (container)
118119
container.classList.remove('hidden');
119120

120121
// Why this is not working?!?!
121122
//document.body.style.removeProperty("backgroundColor");
122123
document.body.style.backgroundColor = "";
123-
if (storedSkin !== 'default')
124-
toggleIcon($('#skin-button').find('.masthead_button_icon')[0], false);
125-
124+
125+
toggleIcon($('#skin-button').find('.masthead_button_icon')[0], getSkinModeState());
126126
$("#skin-button").on("click", toggleSkin);
127127

128-
saveChanges();
128+
// TODO: See, setSkinModeState - stylesheet.onload
129+
// setTimeout(function () {
130+
// saveColorChanges();
131+
//}, 100);
129132
});
130133

131134
document.addEventListener("DOMContentLoaded", function () {
132-
const skinBackgroundColor = getCookie('skin-background-color');
135+
const skinBackgroundColor = getCookie(selectedSkinBackgroundColorKey);
133136
if (skinBackgroundColor)
134137
document.body.style.backgroundColor = skinBackgroundColor;
135138
});
136139

137-
const storedSkin = getCookie('skin', 'default');
138-
if (storedSkin !== 'default')
139-
setSkin(storedSkin);
140+
// These are just for always saving a default to the cookiestore if missing
141+
getLightSkin();
142+
getDarkSkin();
143+
144+
setSkinModeState(getSkinModeState());
140145

141146
})();
142147
</script>

‎_sass/minimal-mistakes/minimal-mistakes/skins/_midnight.scss renamed to ‎_sass/minimal-mistakes/minimal-mistakes/skins/_oi-dark.scss

File renamed without changes.

‎_sass/minimal-mistakes/minimal-mistakes/skins/_oi-light.scss

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/* ==========================================================================
2+
OID skin
3+
========================================================================== */
4+
5+
/* Colors */
6+
$oid-gray : #40535d !default;
7+
$oid-black : #162c36 !default;
8+
$oid-blue : #04aada !default;
9+
$quest-orange : #fb4f14 !default;
10+
$jaffa : #ee8a54 !default;
11+
$nepal : #82a7c5 !default;
12+
13+
$gray : $oid-gray !default;
14+
$black : $oid-black !default;
15+
$white : white !default;
16+
17+
$dark-gray : mix($black, $gray, 40%) !default;
18+
$darker-gray : mix($black, $gray, 60%) !default;
19+
$light-gray : mix($white, $gray, 50%) !default;
20+
$lighter-gray : mix($white, $gray, 90%) !default;
21+
22+
$body-color : $white !default;
23+
$background-color : $white !default;
24+
$code-background-color : $lighter-gray !default;
25+
$code-background-color-dark : $light-gray !default;
26+
$text-color : $oid-black !default;
27+
$border-color : $lighter-gray !default;
28+
$footer-background-color : mix($oid-blue, $background-color, 60%) !default;
29+
30+
$tooltip-color : mix($gray, $text-color, 50%) !default;
31+
$tooltip-background-color : rgba(mix($light-gray, $background-color, 7%), 0.925) !default;
32+
$tooltip-arrow-background-color : rgba(mix($tooltip-background-color, $tooltip-color, 90%), 0.925) !default;
33+
34+
$primary-color : $oid-black !default;
35+
$success-color : #27ae60 !default;
36+
$warning-color : $jaffa !default;
37+
$danger-color : $quest-orange !default;
38+
$info-color : $nepal !default;
39+
40+
/* links */
41+
$link-color : $oid-blue !default;
42+
$link-color-hover : mix($black, $link-color, 25%) !default;
43+
$link-color-visited : mix($white, $link-color, 25%) !default;
44+
$masthead-link-color : $primary-color !default;
45+
$masthead-link-color-hover : mix($black, $primary-color, 25%) !default;
46+
$menuitem-hovered-background-color :$oid-blue !default;
47+
$menuitem-selected-background-color: $oid-gray !default;
48+
49+
/* notices */
50+
$notice-background-mix: 60% !default;
51+
$code-notice-background-mix: 65% !default;
52+
53+
$base01 : $oid-blue !default;
54+
55+
.page__title {
56+
a {
57+
color: $link-color !important;
58+
}
59+
}
60+
61+
h1,
62+
h2,
63+
h3,
64+
h4,
65+
h5,
66+
h6 {
67+
color: $link-color !important;
68+
}
69+
70+
.toc {
71+
h4 {
72+
color: $text-color !important;
73+
}
74+
}
75+
76+
.highlight-header {
77+
.btn {
78+
color: $text-color !important;
79+
}
80+
}

0 commit comments

Comments
 (0)