Skip to content

Commit e7a2cdb

Browse files
carlos-granadoscarlos-granados
committed
dark/light mode
1 parent 7d294f2 commit e7a2cdb

4 files changed

Lines changed: 121 additions & 1 deletion

File tree

‎_config.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# Site Settings
22
title: " "
33
logo: "https://raw.githubusercontent.com/php-debugger/art/main/php-debugger-lockup.png"
4+
logo_dark: "https://raw.githubusercontent.com/php-debugger/art/main/php-debugger-lockup-white.png"
45
email:
56
description: >-
67
A PHP debugger extension focused on step debugging with near-zero overhead.
@@ -13,7 +14,8 @@ markdown: kramdown
1314
remote_theme: "mmistakes/minimal-mistakes@4.28.0"
1415

1516
# Minimal Mistakes theme settings
16-
minimal_mistakes_skin: "default"
17+
minimal_mistakes_skin: "contrast"
18+
minimal_mistakes_skin2: "dark"
1719

1820
# Site Author
1921
author:

‎_includes/head.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<meta charset="utf-8">
2+
3+
{% include seo.html %}
4+
5+
{% unless site.atom_feed.hide %}
6+
<link href="{% if site.atom_feed.path %}{{ site.atom_feed.path }}{% else %}{{ '/feed.xml' | relative_url }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">
7+
{% endunless %}
8+
9+
<!-- https://t.co/dKP3o1e -->
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
12+
<script>
13+
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
14+
</script>
15+
16+
<!-- For all browsers -->
17+
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}" id="theme_source">
18+
{% if site.minimal_mistakes_skin2 %}
19+
<link rel="stylesheet alternate" href="{{ '/assets/css/theme2.css' | relative_url }}" id="theme_source_2">
20+
<script>
21+
let theme = sessionStorage.getItem('theme');
22+
if(theme === "dark")
23+
{
24+
sessionStorage.setItem('theme', 'dark');
25+
node1 = document.getElementById('theme_source');
26+
node2 = document.getElementById('theme_source_2');
27+
node1.setAttribute('rel', 'stylesheet alternate');
28+
node2.setAttribute('rel', 'stylesheet');
29+
30+
// Switch logo on page load
31+
document.addEventListener('DOMContentLoaded', function() {
32+
var logo_light = document.getElementById('logo_light');
33+
var logo_dark = document.getElementById('logo_dark');
34+
if(logo_light && logo_dark) {
35+
logo_light.style.display = 'none';
36+
logo_dark.style.display = 'inline';
37+
}
38+
});
39+
}
40+
else
41+
{
42+
sessionStorage.setItem('theme', 'light');
43+
}
44+
</script>
45+
{% endif %}
46+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">
47+
48+
<!--[if IE]>
49+
<style>
50+
/* old IE unsupported flexbox fixes */
51+
.greedy-nav .site-title {
52+
padding-right: 3em;
53+
}
54+
.greedy-nav button {
55+
position: absolute;
56+
top: 0;
57+
right: 0;
58+
height: 100%;
59+
}
60+
</style>
61+
<![endif]-->
62+
63+
{% if site.head_scripts %}
64+
{% for script in site.head_scripts %}
65+
<script src="{{ script | relative_url }}"></script>
66+
{% endfor %}
67+
{% endif %}

‎_includes/masthead.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{% capture logo_path %}{{ site.logo }}{% endcapture %}
2+
{% capture logo_path_dark %}{{ site.logo_dark }}{% endcapture %}
3+
4+
<div class="masthead">
5+
<div class="masthead__inner-wrap">
6+
<div class="masthead__menu">
7+
<nav id="site-nav" class="greedy-nav">
8+
{% unless logo_path == empty %}
9+
<a class="site-logo" href="{{ '/' | relative_url }}">
10+
<img src="{{ logo_path | relative_url }}" alt="{{ site.masthead_title | default: site.title }}" class="logo-light" id="logo_light">
11+
{% unless logo_path_dark == empty %}
12+
<img src="{{ logo_path_dark | relative_url }}" alt="{{ site.masthead_title | default: site.title }}" class="logo-dark" id="logo_dark" style="display: none;">
13+
{% endunless %}
14+
</a>
15+
{% endunless %}
16+
<a class="site-title" href="{{ '/' | relative_url }}">
17+
{{ site.masthead_title | default: site.title }}
18+
{% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
19+
</a>
20+
<ul class="visible-links">
21+
{%- for link in site.data.navigation.main -%}
22+
<li class="masthead__menu-item">
23+
<a href="{{ link.url | relative_url }}"{% if link.description %} title="{{ link.description }}"{% endif %}>{{ link.title }}</a>
24+
</li>
25+
{%- endfor -%}
26+
</ul>
27+
{% if site.minimal_mistakes_skin2 %}
28+
<i class="fas fa-fw fa-adjust" aria-hidden="true" onclick="node1=document.getElementById('theme_source');node2=document.getElementById('theme_source_2');logo_light=document.getElementById('logo_light');logo_dark=document.getElementById('logo_dark');if(node1.getAttribute('rel')=='stylesheet'){node1.setAttribute('rel', 'stylesheet alternate'); node2.setAttribute('rel', 'stylesheet');sessionStorage.setItem('theme', 'dark');if(logo_light && logo_dark){logo_light.style.display='none';logo_dark.style.display='inline';}}else{node2.setAttribute('rel', 'stylesheet alternate'); node1.setAttribute('rel', 'stylesheet');sessionStorage.setItem('theme', 'light');if(logo_light && logo_dark){logo_light.style.display='inline';logo_dark.style.display='none';}} return false;"></i>
29+
{% endif %}
30+
{% if site.search == true %}
31+
<button class="search__toggle" type="button">
32+
<span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
33+
<i class="fas fa-search"></i>
34+
</button>
35+
{% endif %}
36+
<button class="greedy-nav__toggle hidden" type="button">
37+
<span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
38+
<div class="navicon"></div>
39+
</button>
40+
<ul class="hidden-links hidden"></ul>
41+
</nav>
42+
</div>
43+
</div>
44+
</div>

‎assets/css/theme2.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
---
3+
4+
@charset "utf-8";
5+
6+
@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin2 | default: 'default' }}"; // skin
7+
@import "minimal-mistakes"; // main partials

0 commit comments

Comments
 (0)