thallada/thallada.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark theme with theme switcher

Browse Source
This commit is contained in:
Tyler Hallada
2020-01-05 18:09:53 -05:00
parent 097e97b24c
commit 67bad2a2f8
9 changed files with 176 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
_layouts/default.html
View File

@@ -16,9 +16,11 @@
<!-- syntax highlighting CSS -->
<link rel="stylesheet" href="/css/syntax.css">
<link rel="stylesheet" href="/css/syntax_dark.css" media="(prefers-color-scheme: dark)">
<!-- Custom CSS -->
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/main_dark.css" media="(prefers-color-scheme: dark)">
<!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700" rel="stylesheet" type="text/css">
@@ -41,6 +43,7 @@
</script>
<!-- End Google Analytics -->
<script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
{% seo %}
</head>
@@ -52,7 +55,7 @@
</div>
{{ content }}
<div class="row clearfix rss">
<a class="rss" href="/feed.xml"><img src="/img/rss.png" alt="RSS"/></a>
<a class="rss" href="/feed.xml"><img src="/img/rss.png" alt="RSS" class="icon" /></a>
</div>
<div class="row clearfix footer">
<div class="column full contact">
@@ -62,5 +65,14 @@
</div>
</div>
</div>
<div class="theme-toggle">
<dark-mode-toggle
id="dark-mode-toggle-1"
appearance="switch"
dark="Dark"
light="Light"
permanent
></dark-mode-toggle>
</div>
</body>
</html>

14
_layouts/home.html
View File

@@ -16,9 +16,11 @@
<!-- syntax highlighting CSS -->
<link rel="stylesheet" href="/css/syntax.css">
<link rel="stylesheet" href="/css/syntax_dark.css" media="(prefers-color-scheme: dark)">
<!-- Custom CSS -->
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/main_dark.css" media="(prefers-color-scheme: dark)">
<!-- RSS Feed -->
<link href="/feed.xml" rel="alternate" type="application/atom+xml">
@@ -48,11 +50,21 @@
</script>
<!-- End Google Analytics -->
<script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
{% seo %}
</head>
<body>
<canvas id="magic"></canvas>
<div class="theme-toggle">
<dark-mode-toggle
id="dark-mode-toggle-1"
appearance="switch"
dark="Dark"
light="Light"
permanent
></dark-mode-toggle>
</div>
<canvas id="magic"></canvas>
<div class="container">
{{ content }}
</div>

2
_layouts/post.html
View File

@@ -4,7 +4,7 @@ layout: default
<div class="card">
<div class="row clearfix post-header">
<div class="column three-fourths">
<a href="{{ post.url }}"><h2 class="post-title">{{ page.title }}</h2></a>
<h2 class="post-title"><a href="{{ post.url }}">{{ page.title }}</a></h2>
</div>
<div class="column fourth">
<span class="timestamp">{{ page.date | date_to_string }}</span>