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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@ -6,6 +6,17 @@ with [Jekyll](http://jekyllrb.com/).
See it at [https://www.hallada.net/](https://www.hallada.net/). See it at [https://www.hallada.net/](https://www.hallada.net/).
## Build Locally
To run a version of the site in development locally. Checkout this repo and
then:
1. `cd thallada.github.io`
2. [Install Jekyll](https://jekyllrb.com/docs/installation/)
3. Run `bundle install`
3. Run `bundle exec jekyll serve`
4. Visit `http://localhost:4000` to view the website
## Magic ## Magic
Most of the development work of this website went into creating what I like to Most of the development work of this website went into creating what I like to
@ -127,6 +138,17 @@ Another note: I use [box-sizing (as suggested by Paul
Irish)](http://www.paulirish.com/2012/box-sizing-border-box-ftw/), which I think Irish)](http://www.paulirish.com/2012/box-sizing-border-box-ftw/), which I think
makes dealing with sizing elements a lot more sane. makes dealing with sizing elements a lot more sane.
### Light & Dark Themes
In 2020, I created a dark theme for the website. The dark theme is used if it
detects that the user's OS is set to prefer a dark theme [using the
`prefers-color-scheme` `@media`
query](https://css-tricks.com/dark-modes-with-css/).
To allow the user to select a theme separate from their OS's theme, I have also
included [a switch that can toggle between the two
themes](https://github.com/GoogleChromeLabs/dark-mode-toggle).
## Attributions ## Attributions
[Book](http://thenounproject.com/term/book/23611/) designed by [Nherwin [Book](http://thenounproject.com/term/book/23611/) designed by [Nherwin

14
_layouts/default.html
View File

@ -16,9 +16,11 @@
<!-- syntax highlighting CSS --> <!-- syntax highlighting CSS -->
<link rel="stylesheet" href="/css/syntax.css"> <link rel="stylesheet" href="/css/syntax.css">
<link rel="stylesheet" href="/css/syntax_dark.css" media="(prefers-color-scheme: dark)">
<!-- Custom CSS --> <!-- Custom CSS -->
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/main_dark.css" media="(prefers-color-scheme: dark)">
<!-- Web Fonts --> <!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700" rel="stylesheet" type="text/css"> <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> </script>
<!-- End Google Analytics --> <!-- End Google Analytics -->
<script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
{% seo %} {% seo %}
</head> </head>
@ -52,7 +55,7 @@
</div> </div>
{{ content }} {{ content }}
<div class="row clearfix rss"> <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>
<div class="row clearfix footer"> <div class="row clearfix footer">
<div class="column full contact"> <div class="column full contact">
@ -62,5 +65,14 @@
</div> </div>
</div> </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> </body>
</html> </html>

14
_layouts/home.html
View File

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

2
_layouts/post.html
View File

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

2
blog/index.html
View File

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

23
css/main.css
View File

@ -558,3 +558,26 @@ div.options-panel form label {
div.isso-postbox div.form-wrapper section.auth-section p.input-wrapper { div.isso-postbox div.form-wrapper section.auth-section p.input-wrapper {
margin-right: 10px; margin-right: 10px;
} }
/*****************************************************************************/
/*
/* Light & Dark Theme Toggle
/*
/*****************************************************************************/
div.theme-toggle {
position: static;
bottom: 0;
width: 100%;
text-align: center;
z-index: 100;
}
@media (min-width: 40rem) {
div.theme-toggle {
position: absolute;
top: 0;
right: 0;
width: inherit;
}
}

43
css/main_dark.css Normal file
View File

@ -0,0 +1,43 @@
/* Dark theme */
html {
background-color: #0F0908;
}
html {
filter: invert(90%);
}
img:not(.icon), video, div.video-container {
filter: invert(100%);
}
img:not(.icon) {
opacity: .75;
transition: opacity .5s ease-in-out;
}
img:hover:not(.icon) {
opacity: 1;
}
a:not(.card), a:hover:not(.card) {
filter: invert(100%);
}
a:not(.card) img:not(.icon) {
filter: none;
}
.post pre {
background-color: #fff;
}
.post code {
background-color: #fff;
}
.post a code {
background-color: #222;
border: 1px solid #333;
}

56
css/syntax_dark.css Normal file
View File

@ -0,0 +1,56 @@
.highlight code {
filter: invert(100%);
background-color: #000 !important;
}
.highlight { background: #0F0908; color: #E0CCAE; }
.highlight .c { color: #6B4035; } /* Comment */
.highlight .err { color: #F2DDBC; background-color: #66292F } /* Error */
.highlight .o { color: #A67458 } /* Operator */
.highlight .cm { color: #6B4035; } /* Comment.Multiline */
.highlight .cp { color: #6B4035; } /* Comment.Preproc */
.highlight .c1 { color: #6B4035; } /* Comment.Single */
.highlight .cs { color: #6B4035; } /* Comment.Special */
.highlight .gd { color: #BF472C; background-color: #291916 } /* Generic.Deleted */
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.highlight .gr { color: #66292F } /* Generic.Error */
.highlight .gh { color: #F2A766 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.highlight .go { color: #E0CCAE } /* Generic.Output */
.highlight .gp { color: #8A4B53 } /* Generic.Prompt */
.highlight .gu { color: #F2A766 } /* Generic.Subheading */
.highlight .gt { color: #BF472C } /* Generic.Traceback */
.highlight .kt { color: #BF472C } /* Keyword.Type */
.highlight .m { color: #8A4B53 } /* Literal.Number */
.highlight .s { color: #D47D49 } /* Literal.String */
.highlight .na { color: #BF472C } /* Name.Attribute */
.highlight .nb { color: #F2A766 } /* Name.Builtin */
.highlight .nc { color: #445588 } /* Name.Class */
.highlight .no { color: #F2DDBC } /* Name.Constant */
.highlight .ni { color: #a4896f } /* Name.Entity */
.highlight .ne { color: #990000 } /* Name.Exception */
.highlight .nf { color: #BF472C } /* Name.Function */
.highlight .nn { color: #BF472C } /* Name.Namespace */
.highlight .nt { color: #F2A766 } /* Name.Tag */
.highlight .nv { color: #A67458 } /* Name.Variable */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #8A4B53 } /* Literal.Number.Float */
.highlight .mh { color: #8A4B53 } /* Literal.Number.Hex */
.highlight .mi { color: #8A4B53 } /* Literal.Number.Integer */
.highlight .mo { color: #8A4B53 } /* Literal.Number.Oct */
.highlight .sb { color: #D47D49 } /* Literal.String.Backtick */
.highlight .sc { color: #D47D49 } /* Literal.String.Char */
.highlight .sd { color: #D47D49 } /* Literal.String.Doc */
.highlight .s2 { color: #D47D49 } /* Literal.String.Double */
.highlight .se { color: #D47D49 } /* Literal.String.Escape */
.highlight .sh { color: #D47D49 } /* Literal.String.Heredoc */
.highlight .si { color: #D47D49 } /* Literal.String.Interpol */
.highlight .sx { color: #D47D49 } /* Literal.String.Other */
.highlight .sr { color: #D47D49 } /* Literal.String.Regex */
.highlight .s1 { color: #D47D49 } /* Literal.String.Single */
.highlight .ss { color: #D47D49 } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #A67458 } /* Name.Variable.Class */
.highlight .vg { color: #A67458 } /* Name.Variable.Global */
.highlight .vi { color: #A67458 } /* Name.Variable.Instance */
.highlight .il { color: #8A4B53 } /* Literal.Number.Integer.Long */

8
index.html
View File

@ -49,25 +49,25 @@ title: Tyler Hallada
<div class="row clearfix"> <div class="row clearfix">
<div class="column fourth mobile-half"> <div class="column fourth mobile-half">
<a href="/blog/" class="no-decoration link-card card"> <a href="/blog/" class="no-decoration link-card card">
<img src="img/book.png" alt="book"/><br/> <img src="img/book.png" alt="book" class="icon" /><br/>
<span>Blog</span> <span>Blog</span>
</a> </a>
</div> </div>
<div class="column fourth mobile-half"> <div class="column fourth mobile-half">
<a href="/resume.pdf" class="no-decoration link-card card"> <a href="/resume.pdf" class="no-decoration link-card card">
<img src="img/resume.png" alt="resume"/><br/> <img src="img/resume.png" alt="resume" class="icon" /><br/>
<span>Resume</span> <span>Resume</span>
</a> </a>
</div> </div>
<div class="column fourth mobile-half"> <div class="column fourth mobile-half">
<a href="http://github.com/thallada" rel="me" class="no-decoration link-card card"> <a href="http://github.com/thallada" rel="me" class="no-decoration link-card card">
<img src="img/github.png" alt="github"/><br/> <img src="img/github.png" alt="github" class="icon" /><br/>
<span>Github</span> <span>Github</span>
</a> </a>
</div> </div>
<div class="column fourth mobile-half"> <div class="column fourth mobile-half">
<a href="https://flic.kr/ps/2Vy25U" rel="me" class="no-decoration link-card card"> <a href="https://flic.kr/ps/2Vy25U" rel="me" class="no-decoration link-card card">
<img src="img/photos.png" alt="photos"/><br/> <img src="img/photos.png" alt="photos" class="icon" /><br/>
<span>Photos</span> <span>Photos</span>
</a> </a>
</div> </div>