From 67bad2a2f8fc350757349b0c567aac8d827d8391 Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Sun, 5 Jan 2020 18:09:53 -0500 Subject: [PATCH] Add dark theme with theme switcher --- README.md | 22 +++++++++++++++++ _layouts/default.html | 14 ++++++++++- _layouts/home.html | 14 ++++++++++- _layouts/post.html | 2 +- blog/index.html | 2 +- css/main.css | 23 ++++++++++++++++++ css/main_dark.css | 43 +++++++++++++++++++++++++++++++++ css/syntax_dark.css | 56 +++++++++++++++++++++++++++++++++++++++++++ index.html | 8 +++---- 9 files changed, 176 insertions(+), 8 deletions(-) create mode 100644 css/main_dark.css create mode 100644 css/syntax_dark.css diff --git a/README.md b/README.md index 159419c..0fd23d8 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,17 @@ with [Jekyll](http://jekyllrb.com/). 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 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 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 [Book](http://thenounproject.com/term/book/23611/) designed by [Nherwin diff --git a/_layouts/default.html b/_layouts/default.html index 87102d5..a6ef0eb 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -16,9 +16,11 @@ + + @@ -41,6 +43,7 @@ + {% seo %} @@ -52,7 +55,7 @@ {{ content }}
- RSS + RSS
@@ -62,5 +65,14 @@
+
+ +
diff --git a/_layouts/home.html b/_layouts/home.html index 825810d..f36a349 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -16,9 +16,11 @@ + + @@ -48,11 +50,21 @@ + {% seo %} - +
+ +
+
{{ content }}
diff --git a/_layouts/post.html b/_layouts/post.html index f148218..736d5d6 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -4,7 +4,7 @@ layout: default
-

{{ page.title }}

 +

{{ page.title }}

{{ page.date | date_to_string }} diff --git a/blog/index.html b/blog/index.html index e69a5e2..d6b45fa 100644 --- a/blog/index.html +++ b/blog/index.html @@ -8,7 +8,7 @@ title: Tyler Hallada - Blog
-

{{ post.title }}

 +

{{ post.title }}

{{ post.date | date_to_string }} diff --git a/css/main.css b/css/main.css index 2bfc73d..acc432d 100755 --- a/css/main.css +++ b/css/main.css @@ -558,3 +558,26 @@ div.options-panel form label { div.isso-postbox div.form-wrapper section.auth-section p.input-wrapper { 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; + } +} diff --git a/css/main_dark.css b/css/main_dark.css new file mode 100644 index 0000000..4456460 --- /dev/null +++ b/css/main_dark.css @@ -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; +} diff --git a/css/syntax_dark.css b/css/syntax_dark.css new file mode 100644 index 0000000..21bd002 --- /dev/null +++ b/css/syntax_dark.css @@ -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 */ diff --git a/index.html b/index.html index fed8c04..5f589d5 100644 --- a/index.html +++ b/index.html @@ -49,25 +49,25 @@ title: Tyler Hallada
- book
+ book
Blog
- resume
+ resume
Resume
- github
+ github
Github
- photos
+ photos
Photos