Skip to content

Commit 9cec980

Browse files
allmightyspiffallmightyspiff
authored
Merge pull request #673 from softlayer/darkTheme
Dark theme!
2 parents 4146fef + 0d84ccf commit 9cec980

19 files changed

Lines changed: 535 additions & 386 deletions

‎layouts/article/section.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<body>
33
{{ partial "navbar.html" . }}
44
<div class="container">
5-
<div class="row">
5+
<div class="row main-top">
66
<h1> Articles </h1>
77
<div class="row">
88
<div class="col-sm-9">

‎layouts/article/single.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<body>
33
{{ partial "navbar.html" . }}
44
<div class="container">
5-
<div class="row">
5+
<div class="row main-top">
66
<!-- Sidebar -->
77
<div class="col-md-3">
88
<div style="word-wrap: break-word;"> <!-- Post-specific stats -->

‎layouts/article/summary.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="well well-sm example">
22
<h4>
33
<a href="{{ .Permalink }}"><i class="fas fa-terminal"></i> {{ .Title }} </a> <small class="pull-right">{{ .Date.Format "Jan 2, 2006" }}</small><br>
4-
<small>{{ .Description }}</small>
54
</h4>
5+
<div class = "example-summary"> {{ .Description }}</div>
66
<a class="btn btn-primary btn-xs" href="{{ .Permalink }}"><i class="fas fa-file"></i> Read Me </a>
77
</div>

‎layouts/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66

77
<div class="container">
8-
<div class="row">
8+
<div class="row main-top">
99
<h1>Release Notes</h1>
1010
<div class="col-md-9">
1111
{{ range $paginator.Pages }}

‎layouts/partials/feedback-menu.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="col-md-6">
2-
<div class="well well-sm" style="word-wrap: break-word;"> <!-- Post-specific stats -->
2+
<div class="well well-sm footer" style="word-wrap: break-word;"> <!-- Post-specific stats -->
33
<strong>Feedback? <span class="fas fa-comment"/></strong>
44
<p>
55
If this article contains any error, or leaves any of your questions unanswered, please help us out by

‎layouts/partials/footer.copyright.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<footer>
22
<div class="row">
3-
<div class="col-sm-12">
3+
<div class="col-sm-12 footer">
44
<p>&copy; SoftLayer {{ dateFormat "2006" now }}<br>
55
Built with <a href="https://github.com/spf13/hugo">Hugo</a></p>
66
</div>

‎layouts/partials/header.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<script>
1313
$(document).ready(function() {
1414
$('table').addClass("table table-hover table-striped")
15+
setThemeMode(localStorage.getItem("dark-mode-theme") || "dark");
1516
})
1617
</script>
1718
{{ template "_internal/google_analytics.html" . }}

‎layouts/partials/header.includes.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<link href="/css/custom.css" rel="stylesheet">
44
<link href="/css/monokai.css" rel="stylesheet">
55
<link href="/css/highlight/solarized_dark.css" rel="stylesheet">
6+
67

78
<script src="/js/highlight.pack.js"></script>
89

@@ -22,3 +23,17 @@
2223
<script defer src="/fontawesome/js/solid.min.js"></script>
2324
<script defer src="/fontawesome/js/brands.min.js"></script>
2425
<script defer src="/fontawesome/js/fontawesome.min.js"></script>
26+
27+
<script>
28+
var head = document.getElementsByTagName('head')[0]
29+
var style = document.createElement('link')
30+
style.type = 'text/css'
31+
style.rel = 'stylesheet'
32+
style.id = "dark-theme"
33+
if (localStorage.getItem("dark-mode-theme") == "dark") {
34+
style.href = '/css/dark.css'
35+
} else {
36+
style.href = '/css/light.css'
37+
}
38+
head.append(style)
39+
</script>

‎layouts/partials/navbar.html‎

Lines changed: 53 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
2-
<div class="container">
3-
<div class="navbar-header">
2+
<div class="nav-container">
3+
<div class="navbar-header" style="width: 150px">
44
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
55
<span class="sr-only">Toggle Navigation</span>
66
<span class="icon-bar"></span>
@@ -9,30 +9,62 @@
99
</button>
1010
<a class="navbar-brand" href="{{ .Site.BaseURL}}">{{ .Site.Title }}</a>
1111
</div>
12-
<div class="collapse navbar-collapse navbar-ex1-collapse">
13-
<ul class="nav navbar-nav">
12+
13+
<div class="navbar-header" style="width: calc(100% - 400px)">
14+
<ul class="nav navbar-nav" style="width: 100%">
1415
{{ range .Site.Menus.main }}
1516
<li><a href="{{.URL}}">{{ .Name }}</a></li>
1617
{{ end }}
17-
18-
<!--
19-
And here is where you'd add more links to sections, or anywhere you like.
20-
<li><a href="#">About Me</a></li>
21-
-->
18+
<li class="nav-item">
19+
<a id="dark-toggle" class="dark-mode-toggle" aria-label="dark-mode-toggle" style="color: var(--Red); font-size: 20px">
20+
<i class="fas fa-sun"></i>
21+
</a>
22+
</li>
2223
</ul>
23-
<div id="custom-search-input" class="pull-right">
24-
<form class="navbar-form" role="search" method="get" action="https://www.bing.com/search">
25-
<div class="input-group col-md-12">
26-
<input type="text" class="form-control input-md" placeholder="Search" name="q" id="srch-term">
27-
<input type="hidden" name="q1" value="site:sldn.softlayer.com" />
28-
<div class="input-group-btn">
29-
<button class="btn btn-info" type="submit">
30-
<i class="glyphicon glyphicon-search"></i>
31-
</button>
32-
</div>
33-
</div>
34-
</form>
24+
</div>
25+
26+
<div id="custom-search-input" class="pull-right" style="width: 250px">
27+
<form class="navbar-form" role="search" method="get" action="https://www.bing.com/search">
28+
<div class="input-group col-md-12">
29+
<input type="text" class="form-control input-md" placeholder="Search" name="q" id="srch-term">
30+
<input type="hidden" name="q1" value="site:sldn.softlayer.com" />
31+
<div class="input-group-btn">
32+
<button class="btn btn-info" type="submit">
33+
<i class="glyphicon glyphicon-search"></i>
34+
</button>
35+
</div>
3536
</div>
37+
</form>
3638
</div>
39+
3740
</div>
3841
</nav>
42+
43+
<script type="text/javascript">
44+
const darkIconClass = 'fas fa-moon'
45+
const lightIconClass = 'fas fa-sun'
46+
var darkCSS = $("#dark-theme");
47+
var darkToggleIcon = $("#dark-toggle i");
48+
49+
// Set theme with the given mode and toggle the theme icon button
50+
// The button won't actually change for some reason on page load, will
51+
// change when its pressed though.
52+
function setThemeMode(mode) {
53+
localStorage.setItem("dark-mode-theme", mode);
54+
if (mode === "dark") {
55+
darkToggleIcon.attr('class', darkIconClass)
56+
} else {
57+
darkToggleIcon.attr('class', lightIconClass)
58+
}
59+
}
60+
61+
// Toggle dark mode when user click on the icon button
62+
$("#dark-toggle").click(function () {
63+
if (darkToggleIcon.attr("class") == lightIconClass) {
64+
setThemeMode("dark")
65+
} else if (darkToggleIcon.attr("class") == darkIconClass) {
66+
setThemeMode("light")
67+
}
68+
location.reload();
69+
});
70+
</script>

‎layouts/partials/title.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="row">
1+
<div class="row reference-title">
22

33
<div class="col-md-12">
44
<div style="word-wrap: break-word;"> <!-- Post-specific stats -->

0 commit comments

Comments
 (0)