Home Explore Help
Register Sign In
thallada
/
thallada.github.io
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 194 Releases 0 Wiki
Browse Source

Add dark theme with theme switcher

Tyler Hallada 4 years ago
parent
097e97b24c
commit
67bad2a2f8
9 changed files with 176 additions and 8 deletions
Split View Show Diff Stats
  1. 22 0
      README.md
  2. 13 1
      _layouts/default.html
  3. 13 1
      _layouts/home.html
  4. 1 1
      _layouts/post.html
  5. 1 1
      blog/index.html
  6. 23 0
      css/main.css
  7. 43 0
      css/main_dark.css
  8. 56 0
      css/syntax_dark.css
  9. 4 4
      index.html

+ 22 - 0
README.md
View File 

@@ -6,6 +6,17 @@ with [Jekyll](http://jekyllrb.com/).
6 6
7 7 
 See it at [https://www.hallada.net/](https://www.hallada.net/).
8 8
9 
+## Build Locally
10 
+
11 
+To run a version of the site in development locally. Checkout this repo and
12 
+then:
13 
+
14 
+1. `cd thallada.github.io`
15 
+2. [Install Jekyll](https://jekyllrb.com/docs/installation/)
16 
+3. Run `bundle install`
17 
+3. Run `bundle exec jekyll serve`
18 
+4. Visit `http://localhost:4000` to view the website
19 
+
9 20 
 ## Magic
10 21
11 22 
 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
127 138 
 Irish)](http://www.paulirish.com/2012/box-sizing-border-box-ftw/), which I think
128 139 
 makes dealing with sizing elements a lot more sane.
129 140
141 
+### Light & Dark Themes
142 
+
143 
+In 2020, I created a dark theme for the website. The dark theme is used if it
144 
+detects that the user's OS is set to prefer a dark theme [using the
145 
+`prefers-color-scheme` `@media`
146 
+query](https://css-tricks.com/dark-modes-with-css/).
147 
+
148 
+To allow the user to select a theme separate from their OS's theme, I have also
149 
+included [a switch that can toggle between the two
150 
+themes](https://github.com/GoogleChromeLabs/dark-mode-toggle).
151 
+
130 152 
 ## Attributions
131 153
132 154 
 [Book](http://thenounproject.com/term/book/23611/) designed by [Nherwin

+ 13 - 1
_layouts/default.html
View File 

@@ -16,9 +16,11 @@
16 16
17 17 
     <!-- syntax highlighting CSS -->
18 18 
     <link rel="stylesheet" href="/css/syntax.css">
19 
+    <link rel="stylesheet" href="/css/syntax_dark.css" media="(prefers-color-scheme: dark)">
19 20
20 21 
     <!-- Custom CSS -->
21 22 
     <link rel="stylesheet" href="/css/main.css">
23 
+    <link rel="stylesheet" href="/css/main_dark.css" media="(prefers-color-scheme: dark)">
22 24
23 25 
     <!-- Web Fonts -->
24 26 
     <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 @@
41 43
42 44 
     </script>
43 45 
     <!-- End Google Analytics -->
46 
+    <script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
44 47
45 48 
     {% seo %}
46 49 
   </head>
 
@@ -52,7 +55,7 @@
52 55 
       </div>
53 56 
       {{ content }}
54 57 
       <div class="row clearfix rss">
55 
-        <a class="rss" href="/feed.xml"><img src="/img/rss.png" alt="RSS"/></a>
58 
+        <a class="rss" href="/feed.xml"><img src="/img/rss.png" alt="RSS" class="icon" /></a>
56 59 
       </div>
57 60 
       <div class="row clearfix footer">
58 61 
         <div class="column full contact">
 
@@ -62,5 +65,14 @@
62 65 
         </div>
63 66 
       </div>
64 67 
     </div>
68 
+    <div class="theme-toggle">
69 
+      <dark-mode-toggle
70 
+        id="dark-mode-toggle-1"
71 
+        appearance="switch"
72 
+        dark="Dark"
73 
+        light="Light"
74 
+        permanent
75 
+      ></dark-mode-toggle>
76 
+    </div>
65 77 
   </body>
66 78 
 </html>

+ 13 - 1
_layouts/home.html
View File 

@@ -16,9 +16,11 @@
16 16
17 17 
     <!-- syntax highlighting CSS -->
18 18 
     <link rel="stylesheet" href="/css/syntax.css">
19 
+    <link rel="stylesheet" href="/css/syntax_dark.css" media="(prefers-color-scheme: dark)">
19 20
20 21 
     <!-- Custom CSS -->
21 22 
     <link rel="stylesheet" href="/css/main.css">
23 
+    <link rel="stylesheet" href="/css/main_dark.css" media="(prefers-color-scheme: dark)">
22 24
23 25 
     <!-- RSS Feed -->
24 26 
     <link href="/feed.xml" rel="alternate" type="application/atom+xml">
 
@@ -48,11 +50,21 @@
48 50
49 51 
     </script>
50 52 
     <!-- End Google Analytics -->
53 
+    <script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
51 54
52 55 
     {% seo %}
53 56 
   </head>
54 57 
   <body>
55 
-  <canvas id="magic"></canvas>
58 
+    <div class="theme-toggle">
59 
+      <dark-mode-toggle
60 
+        id="dark-mode-toggle-1"
61 
+        appearance="switch"
62 
+        dark="Dark"
63 
+        light="Light"
64 
+        permanent
65 
+      ></dark-mode-toggle>
66 
+    </div>
67 
+    <canvas id="magic"></canvas>
56 68 
     <div class="container">
57 69 
       {{ content }}
58 70 
     </div>

+ 1 - 1
_layouts/post.html
View File 

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

+ 1 - 1
blog/index.html
View File 

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

+ 23 - 0
css/main.css
View File 

@@ -558,3 +558,26 @@ div.options-panel form label {
558 558 
 div.isso-postbox div.form-wrapper section.auth-section p.input-wrapper {
559 559 
   margin-right: 10px;
560 560 
 }
561 
+
562 
+/*****************************************************************************/
563 
+/*
564 
+/* Light & Dark Theme Toggle
565 
+/*
566 
+/*****************************************************************************/
567 
+
568 
+div.theme-toggle {
569 
+  position: static;
570 
+  bottom: 0;
571 
+  width: 100%;
572 
+  text-align: center;
573 
+  z-index: 100;
574 
+}
575 
+
576 
+@media (min-width: 40rem) {
577 
+  div.theme-toggle {
578 
+    position: absolute;
579 
+    top: 0;
580 
+    right: 0;
581 
+    width: inherit;
582 
+  }
583 
+}

+ 43 - 0
css/main_dark.css
View File 

@@ -0,0 +1,43 @@
1 
+/* Dark theme */
2 
+
3 
+html {
4 
+  background-color: #0F0908;
5 
+}
6 
+
7 
+html {
8 
+  filter: invert(90%);
9 
+}
10 
+
11 
+img:not(.icon), video, div.video-container {
12 
+  filter: invert(100%);
13 
+}
14 
+
15 
+img:not(.icon) {
16 
+  opacity: .75;
17 
+  transition: opacity .5s ease-in-out;
18 
+}
19 
+
20 
+img:hover:not(.icon) {
21 
+  opacity: 1;
22 
+}
23 
+
24 
+a:not(.card), a:hover:not(.card) {
25 
+  filter: invert(100%);
26 
+}
27 
+
28 
+a:not(.card) img:not(.icon) {
29 
+  filter: none;
30 
+}
31 
+
32 
+.post pre {
33 
+  background-color: #fff;
34 
+}
35 
+
36 
+.post code {
37 
+  background-color: #fff;
38 
+}
39 
+
40 
+.post a code {
41 
+  background-color: #222;
42 
+  border: 1px solid #333;
43 
+}

+ 56 - 0
css/syntax_dark.css
View File 

@@ -0,0 +1,56 @@
1 
+.highlight code {
2 
+  filter: invert(100%);
3 
+  background-color: #000 !important;
4 
+}
5 
+.highlight  { background: #0F0908; color: #E0CCAE; }
6 
+.highlight .c { color: #6B4035; } /* Comment */
7 
+.highlight .err { color: #F2DDBC; background-color: #66292F } /* Error */
8 
+.highlight .o { color: #A67458 } /* Operator */
9 
+.highlight .cm { color: #6B4035; } /* Comment.Multiline */
10 
+.highlight .cp { color: #6B4035; } /* Comment.Preproc */
11 
+.highlight .c1 { color: #6B4035; } /* Comment.Single */
12 
+.highlight .cs { color: #6B4035; } /* Comment.Special */
13 
+.highlight .gd { color: #BF472C; background-color: #291916 } /* Generic.Deleted */
14 
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
15 
+.highlight .gr { color: #66292F } /* Generic.Error */
16 
+.highlight .gh { color: #F2A766 } /* Generic.Heading */
17 
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
18 
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
19 
+.highlight .go { color: #E0CCAE } /* Generic.Output */
20 
+.highlight .gp { color: #8A4B53 } /* Generic.Prompt */
21 
+.highlight .gu { color: #F2A766 } /* Generic.Subheading */
22 
+.highlight .gt { color: #BF472C } /* Generic.Traceback */
23 
+.highlight .kt { color: #BF472C } /* Keyword.Type */
24 
+.highlight .m { color: #8A4B53 } /* Literal.Number */
25 
+.highlight .s { color: #D47D49 } /* Literal.String */
26 
+.highlight .na { color: #BF472C } /* Name.Attribute */
27 
+.highlight .nb { color: #F2A766 } /* Name.Builtin */
28 
+.highlight .nc { color: #445588 } /* Name.Class */
29 
+.highlight .no { color: #F2DDBC } /* Name.Constant */
30 
+.highlight .ni { color: #a4896f } /* Name.Entity */
31 
+.highlight .ne { color: #990000 } /* Name.Exception */
32 
+.highlight .nf { color: #BF472C } /* Name.Function */
33 
+.highlight .nn { color: #BF472C } /* Name.Namespace */
34 
+.highlight .nt { color: #F2A766 } /* Name.Tag */
35 
+.highlight .nv { color: #A67458 } /* Name.Variable */
36 
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
37 
+.highlight .mf { color: #8A4B53 } /* Literal.Number.Float */
38 
+.highlight .mh { color: #8A4B53 } /* Literal.Number.Hex */
39 
+.highlight .mi { color: #8A4B53 } /* Literal.Number.Integer */
40 
+.highlight .mo { color: #8A4B53 } /* Literal.Number.Oct */
41 
+.highlight .sb { color: #D47D49 } /* Literal.String.Backtick */
42 
+.highlight .sc { color: #D47D49 } /* Literal.String.Char */
43 
+.highlight .sd { color: #D47D49 } /* Literal.String.Doc */
44 
+.highlight .s2 { color: #D47D49 } /* Literal.String.Double */
45 
+.highlight .se { color: #D47D49 } /* Literal.String.Escape */
46 
+.highlight .sh { color: #D47D49 } /* Literal.String.Heredoc */
47 
+.highlight .si { color: #D47D49 } /* Literal.String.Interpol */
48 
+.highlight .sx { color: #D47D49 } /* Literal.String.Other */
49 
+.highlight .sr { color: #D47D49 } /* Literal.String.Regex */
50 
+.highlight .s1 { color: #D47D49 } /* Literal.String.Single */
51 
+.highlight .ss { color: #D47D49 } /* Literal.String.Symbol */
52 
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
53 
+.highlight .vc { color: #A67458 } /* Name.Variable.Class */
54 
+.highlight .vg { color: #A67458 } /* Name.Variable.Global */
55 
+.highlight .vi { color: #A67458 } /* Name.Variable.Instance */
56 
+.highlight .il { color: #8A4B53 } /* Literal.Number.Integer.Long */

+ 4 - 4
index.html
View File 

@@ -49,25 +49,25 @@ title: Tyler Hallada
49 49 
   <div class="row clearfix">
50 50 
     <div class="column fourth mobile-half">
51 51 
       <a href="/blog/" class="no-decoration link-card card">
52 
-        <img src="img/book.png" alt="book"/><br/>
52 
+        <img src="img/book.png" alt="book" class="icon" /><br/>
53 53 
         <span>Blog</span>
54 54 
       </a>
55 55 
     </div>
56 56 
     <div class="column fourth mobile-half">
57 57 
       <a href="/resume.pdf" class="no-decoration link-card card">
58 
-        <img src="img/resume.png" alt="resume"/><br/>
58 
+        <img src="img/resume.png" alt="resume" class="icon" /><br/>
59 59 
         <span>Resume</span>
60 60 
       </a>
61 61 
     </div>
62 62 
     <div class="column fourth mobile-half">
63 63 
       <a href="http://github.com/thallada" rel="me" class="no-decoration link-card card">
64 
-        <img src="img/github.png" alt="github"/><br/>
64 
+        <img src="img/github.png" alt="github" class="icon" /><br/>
65 65 
         <span>Github</span>
66 66 
       </a>
67 67 
     </div>
68 68 
     <div class="column fourth mobile-half">
69 69 
       <a href="https://flic.kr/ps/2Vy25U" rel="me" class="no-decoration link-card card">
70 
-        <img src="img/photos.png" alt="photos"/><br/>
70 
+        <img src="img/photos.png" alt="photos" class="icon" /><br/>
71 71 
         <span>Photos</span>
72 72 
       </a>
73 73 
     </div>