Skip to content

Commit 1dc36b7

Browse files
harsh4799harsh4799
authored
Merge pull request #7 from git-pi-e/main
Enable website-wide Dark mode
2 parents b6b24aa + 8812663 commit 1dc36b7

File tree

6 files changed

+467
-5
lines changed

6 files changed

+467
-5
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ _site
44
.jekyll-metadata
55
vendor
66
Gemfile.lock
7+
.vscode

‎_config.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ theme: just-the-docs
3333
plugins:
3434
- jekyll-feed
3535

36+
color_scheme: dark
3637
# Exclude from processing.
3738
# The following items will not be processed, by default.
3839
# Any item listed under the `exclude:` key here will be automatically added to

‎_includes/head.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<head>
2+
<meta charset="UTF-8">
3+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
4+
5+
{% unless site.plugins contains "jekyll-seo-tag" %}
6+
<title>{{ page.title }} - {{ site.title }}</title>
7+
8+
{% if page.description %}
9+
<meta name="Description" content="{{ page.description }}">
10+
{% endif %}
11+
{% endunless %}
12+
13+
<link rel="shortcut icon" href="{{ 'favicon.ico' | relative_url }}" type="image/x-icon">
14+
15+
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
16+
17+
{% if site.ga_tracking != nil %}
18+
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.ga_tracking }}"></script>
19+
<script>
20+
window.dataLayer = window.dataLayer || [];
21+
function gtag() { dataLayer.push(arguments); }
22+
gtag('js', new Date());
23+
24+
gtag('config', '{{ site.ga_tracking }}' {% unless site.ga_tracking_anonymize_ip == nil %}, { 'anonymize_ip': true }{% endunless %});
25+
</script>
26+
27+
{% endif %}
28+
29+
{% if site.search_enabled != false %}
30+
<script type="text/javascript" src="{{ '/assets/js/vendor/lunr.min.js' | relative_url }}"></script>
31+
{% endif %}
32+
<script type="text/javascript" src="{{ '/assets/js/just-the-docs.js' | relative_url }}"></script>
33+
34+
<meta name="viewport" content="width=device-width, initial-scale=1">
35+
36+
{% seo %}
37+
38+
39+
</head>

‎_layouts/default.html

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
---
2+
layout: table_wrappers
3+
---
4+
5+
<!DOCTYPE html>
6+
7+
<html lang="{{ site.lang | default: 'en-US' }}">
8+
{% include head.html %}
9+
<body>
10+
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
11+
<symbol id="svg-link" viewBox="0 0 24 24">
12+
<title>Link</title>
13+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
14+
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
15+
</svg>
16+
</symbol>
17+
<symbol id="svg-search" viewBox="0 0 24 24">
18+
<title>Search</title>
19+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
20+
<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
21+
</svg>
22+
</symbol>
23+
<symbol id="svg-menu" viewBox="0 0 24 24">
24+
<title>Menu</title>
25+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
26+
<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
27+
</svg>
28+
</symbol>
29+
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
30+
<title>Expand</title>
31+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
32+
<polyline points="9 18 15 12 9 6"></polyline>
33+
</svg>
34+
</symbol>
35+
<symbol id="svg-doc" viewBox="0 0 24 24">
36+
<title>Document</title>
37+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
38+
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
39+
</svg>
40+
</symbol>
41+
</svg>
42+
43+
<div class="side-bar">
44+
<div class="site-header">
45+
<a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
46+
<a href="#" id="menu-button" class="site-button">
47+
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
48+
</a>
49+
</div>
50+
<nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
51+
{% if site.just_the_docs.collections %}
52+
{% assign collections_size = site.just_the_docs.collections | size %}
53+
{% for collection_entry in site.just_the_docs.collections %}
54+
{% assign collection_key = collection_entry[0] %}
55+
{% assign collection_value = collection_entry[1] %}
56+
{% assign collection = site[collection_key] %}
57+
{% if collection_value.nav_exclude != true %}
58+
{% if collections_size > 1 %}
59+
<div class="nav-category">{{ collection_value.name }}</div>
60+
{% endif %}
61+
{% include nav.html pages=collection %}
62+
{% endif %}
63+
{% endfor %}
64+
{% else %}
65+
{% include nav.html pages=site.html_pages %}
66+
{% endif %}
67+
</nav>
68+
<footer class="site-footer">
69+
This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
70+
</footer>
71+
</div>
72+
<div class="main" id="top">
73+
<div id="main-header" class="main-header">
74+
{% if site.search_enabled != false %}
75+
<div class="search">
76+
<div class="search-input-wrap">
77+
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
78+
<label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
79+
</div>
80+
<div id="search-results" class="search-results"></div>
81+
</div>
82+
{% endif %}
83+
{% include header_custom.html %}
84+
{% if site.aux_links %}
85+
<nav aria-label="Auxiliary" class="aux-nav">
86+
<ul class="aux-nav-list">
87+
{% for link in site.aux_links %}
88+
<li class="aux-nav-list-item">
89+
<a href="{{ link.last }}" class="site-button"
90+
{% if site.aux_links_new_tab %}
91+
target="_blank" rel="noopener noreferrer"
92+
{% endif %}
93+
>
94+
{{ link.first }}
95+
</a>
96+
</li>
97+
{% endfor %}
98+
</ul>
99+
</nav>
100+
{% endif %}
101+
</div>
102+
<div id="main-content-wrap" class="main-content-wrap">
103+
{% unless page.url == "/" %}
104+
{% if page.parent %}
105+
{%- for node in pages_list -%}
106+
{%- if node.parent == nil -%}
107+
{%- if page.parent == node.title or page.grand_parent == node.title -%}
108+
{%- assign first_level_url = node.url | absolute_url -%}
109+
{%- endif -%}
110+
{%- if node.has_children -%}
111+
{%- assign children_list = pages_list | where: "parent", node.title -%}
112+
{%- for child in children_list -%}
113+
{%- if page.url == child.url or page.parent == child.title -%}
114+
{%- assign second_level_url = child.url | absolute_url -%}
115+
{%- endif -%}
116+
{%- endfor -%}
117+
{%- endif -%}
118+
{%- endif -%}
119+
{%- endfor -%}
120+
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
121+
<ol class="breadcrumb-nav-list">
122+
{% if page.grand_parent %}
123+
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
124+
<li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
125+
{% else %}
126+
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
127+
{% endif %}
128+
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
129+
</ol>
130+
</nav>
131+
{% endif %}
132+
{% endunless %}
133+
<div id="main-content" class="main-content" role="main">
134+
{% if site.heading_anchors != false %}
135+
{% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
136+
{% else %}
137+
{{ content }}
138+
{% endif %}
139+
140+
{% if page.has_children == true and page.has_toc != false %}
141+
<hr>
142+
<h2 class="text-delta">Table of contents</h2>
143+
<ul>
144+
{%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%}
145+
{% for child in children_list %}
146+
<li>
147+
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
148+
</li>
149+
{% endfor %}
150+
</ul>
151+
{% endif %}
152+
153+
{% capture footer_custom %}
154+
{%- include footer_custom.html -%}
155+
{% endcapture %}
156+
{% if footer_custom != "" or site.last_edit_timestamp or site.gh_edit_link %}
157+
<hr>
158+
<footer>
159+
{% if site.back_to_top %}
160+
<p><a href="#top" id="back-to-top">{{ site.back_to_top_text }}</a></p>
161+
{% endif %}
162+
163+
{{ footer_custom }}
164+
165+
{% if site.last_edit_timestamp or site.gh_edit_link %}
166+
<div class="mt-2 d-flex">
167+
{% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
168+
<p class="mb-0 mr-2 text-small text-grey-dk-000">
169+
Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
170+
</p>
171+
{% endif %}
172+
{% if
173+
site.gh_edit_link and
174+
site.gh_edit_link_text and
175+
site.gh_edit_repository and
176+
site.gh_edit_branch and
177+
site.gh_edit_view_mode
178+
%}
179+
<p class="mb-0 text-small text-grey-dk-000">
180+
<a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}{% if site.gh_edit_source %}/{{ site.gh_edit_source }}{% endif %}/{{ page.path }}" id="edit-this-page">{{ site.gh_edit_link_text }}</a>
181+
</p>
182+
{% endif %}
183+
</div>
184+
{% endif %}
185+
</footer>
186+
{% endif %}
187+
188+
</div>
189+
</div>
190+
191+
{% if site.search_enabled != false %}
192+
{% if site.search.button %}
193+
<a href="#" id="search-button" class="search-button">
194+
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
195+
</a>
196+
{% endif %}
197+
<div class="search-overlay"></div>
198+
{% endif %}
199+
</div>
200+
<script>
201+
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
202+
203+
localStorage.setItem('theme', '{{ site.color_scheme }}');
204+
jtd.addEvent(toggleDarkMode, 'click', function () {
205+
if (localStorage.getItem("theme") === 'dark') {
206+
localStorage.setItem('theme', 'light');
207+
jtd.setTheme(localStorage.getItem("theme"));
208+
toggleDarkMode.textContent = 'Switch to Dark Mode';
209+
} else if (localStorage.getItem("theme") === 'light') {
210+
localStorage.setItem('theme', 'dark');
211+
jtd.setTheme(localStorage.getItem("theme"));
212+
toggleDarkMode.textContent = 'Switch to Light Mode';
213+
}
214+
});
215+
</script>
216+
</body>
217+
</html>

0 commit comments

Comments
 (0)