diff --git a/README.md b/README.md
index b220b14..90ef4cd 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,8 @@ To see more, [check out my blog which is rendered with this theme](http://jnjosh
- [Defining Yourself as the Author](#defining-yourself-as-the-author)
- [Customizing the Bio Section, 404 Page, Javascript, or Stylesheets](#customizing-the-bio-section-404-page-javascript-or-stylesheets)
- [Creating a Link Post](#creating-a-link-post)
+ - [Specifying a Featured Image for Social Media](#specifying-a-featured-image-for-social-media)
+ - [Preferred Dark Appearance](#preferred-dark-appearance)
- [Variables](#variables)
- [Overrides](#overrides)
- [Contributing](#contributing)
@@ -137,6 +139,10 @@ Sometimes you want to feature an image as your featured image that will display
feature: "assets/posts/20240219/image.jpg"
```
+#### Preferred Dark Appearance
+
+If you want to enable a dark appearance, there is limited support for that. Currently, setting the `EnablePreferredDarkAppearance` param to true in your config.toml file will enable it in an automatic state—if the system is using dark mode.
+
### Variables
| Variable | What value? | Required |
@@ -152,6 +158,7 @@ feature: "assets/posts/20240219/image.jpg"
| `[author]` - `FlickrID` | `Your Flickr ID` | No. The footer shows your photo stream from flickr. If you don't set it, nothing will be displayed. |
| `[params]` - `Description` | `Describe your site` | No. If set, this is added to your pages metadata. |
| `[params]` - `ShowCopyright` | `true` or `false` | No. If true, Copyright text will be added to the footer. |
+| `[params]` - `EnablePreferredDarkAppearance` | `true` or `false` | No. If true, The viewers system dark mode is respected switching to a dark appearance. |
| `[params]` - `RSSEnabled` | `true` or `false` | No. If true, RSS pages will be generated. |
| `[params]` - `RSSSections` | `[ "Posts", "Microposts", "Photos" ]` | If you want RSS links in the menu, yes. These strings need to be the display name of the section where you want to have an RSS icon displayed.  |
| `[params]` - `RSSMicropostTitles` | `true` or `false` | No. If false, Microposts RSS feeds will not have the title in included posts. If not present or true, nothing happens. |
diff --git a/images/linkpost.png b/images/linkpost.png
index f33ab19..9e689df 100644
Binary files a/images/linkpost.png and b/images/linkpost.png differ
diff --git a/images/posts.png b/images/posts.png
index 87955c1..728659e 100644
Binary files a/images/posts.png and b/images/posts.png differ
diff --git a/images/screenshot.png b/images/screenshot.png
index 84d2939..94ad79e 100644
Binary files a/images/screenshot.png and b/images/screenshot.png differ
diff --git a/layouts/partials/site_header.html b/layouts/partials/site_header.html
index 392441f..ef8792a 100644
--- a/layouts/partials/site_header.html
+++ b/layouts/partials/site_header.html
@@ -20,6 +20,12 @@
{{ $.Scratch.Add "title" .Site.Title }}
{{ with .Title }}{{ if ne . ($.Scratch.Get "title") }}{{ . }} · {{ end }}{{ end }}@{{ .Site.Author.handle }}’s {{ .Site.Title }}
+
+
+ {{ if .Site.Params.EnablePreferredDarkAppearance }}
+
+ {{ end }}
+
diff --git a/static/css/joshin-color-dark.css b/static/css/joshin-color-dark.css
new file mode 100644
index 0000000..e1d0c41
--- /dev/null
+++ b/static/css/joshin-color-dark.css
@@ -0,0 +1,28 @@
+/* Dark Color Appearance */
+@media (prefers-color-scheme: dark) {
+ :root {
+ /* semantic colors */
+ --joshin-accent-color-100: var(--joshin-color-denim-200);
+
+ --joshin-primary-color-100: var(--joshin-color-grey-1200);
+ --joshin-primary-color-200: var(--joshin-color-grey-200);
+ --joshin-primary-color-300: var(--joshin-color-grey-400);
+ --joshin-primary-color-400: var(--joshin-color-grey-400);
+ --joshin-primary-color-500: var(--joshin-color-grey-200);
+ --joshin-primary-color-600: var(--joshin-color-grey-400);
+ --joshin-primary-color-700: var(--joshin-color-grey-300);
+ --joshin-primary-color-800: var(--joshin-color-grey-200);
+ --joshin-primary-color-900: var(--joshin-color-grey-100);
+
+ /* elevations */
+ --joshin-elevation-0: var(--joshin-color-grey-1100);
+ --joshin-elevation-1: var(--joshin-color-grey-1000);
+ --joshin-elevation-2: var(--joshin-color-grey-1100);
+ --joshin-elevation-3: var(--joshin-color-grey-1200);
+ --joshin-elevation-4: var(--joshin-color-grey-1200);
+
+ /* components */
+ /* link */
+ --joshin-component-link-color-default: var(--joshin-accent-color-100);
+ }
+}
\ No newline at end of file
diff --git a/static/css/joshin-color-light.css b/static/css/joshin-color-light.css
new file mode 100644
index 0000000..052fcd4
--- /dev/null
+++ b/static/css/joshin-color-light.css
@@ -0,0 +1,26 @@
+/* Light Color Appearance */
+:root {
+ /* semantic colors */
+ --joshin-accent-color-100: var(--joshin-color-denim-500);
+
+ --joshin-primary-color-100: var(--joshin-color-grey-200);
+ --joshin-primary-color-200: var(--joshin-color-grey-400);
+ --joshin-primary-color-300: var(--joshin-color-grey-500);
+ --joshin-primary-color-400: var(--joshin-color-grey-600);
+ --joshin-primary-color-500: var(--joshin-color-grey-800);
+ --joshin-primary-color-600: var(--joshin-color-grey-900);
+ --joshin-primary-color-700: var(--joshin-color-grey-1000);
+ --joshin-primary-color-800: var(--joshin-color-grey-1100);
+ --joshin-primary-color-900: var(--joshin-color-grey-1200);
+
+ /* elevations */
+ --joshin-elevation-0: var(--joshin-color-grey-100);
+ --joshin-elevation-1: var(--joshin-color-grey-200);
+ --joshin-elevation-2: var(--joshin-color-grey-500);
+ --joshin-elevation-3: var(--joshin-color-grey-900);
+ --joshin-elevation-4: var(--joshin-color-grey-1200);
+
+ /* components */
+ /* link */
+ --joshin-component-link-color-default: var(--joshin-accent-color-100);
+}
diff --git a/static/css/joshin-color-palette.css b/static/css/joshin-color-palette.css
new file mode 100644
index 0000000..fa8ff78
--- /dev/null
+++ b/static/css/joshin-color-palette.css
@@ -0,0 +1,30 @@
+:root {
+ /* Common Colors */
+ --joshin-color-white: #ffffff;
+ --joshin-color-black: #000000;
+
+ /* Greys */
+ --joshin-color-grey-100: hsl(0, 0%, 98.82%);
+ --joshin-color-grey-200: hsl(0, 0%, 90.59%);
+ --joshin-color-grey-300: hsl(0, 0%, 81.96%);
+ --joshin-color-grey-400: hsl(0, 0%, 74.12%);
+ --joshin-color-grey-500: hsl(0, 0%, 65.88%);
+ --joshin-color-grey-600: hsl(0, 0%, 58.43%);
+ --joshin-color-grey-700: hsl(0, 0%, 50.59%);
+ --joshin-color-grey-800: hsl(0, 0%, 43.14%);
+ --joshin-color-grey-900: hsl(0, 0%, 36.08%);
+ --joshin-color-grey-1000: hsl(0, 0%, 29.02%);
+ --joshin-color-grey-1100: hsl(0, 0%, 22.35%);
+ --joshin-color-grey-1200: hsl(0, 0%, 16.08%);
+
+ /* Denim */
+ --joshin-color-denim-100: #E1EFF8;
+ --joshin-color-denim-200: #C5DEF2;
+ --joshin-color-denim-300: #9DBCDA;
+ --joshin-color-denim-400: #7694B6;
+ --joshin-color-denim-500: #476286;
+ --joshin-color-denim-600: #334C73;
+ --joshin-color-denim-700: #233860;
+ --joshin-color-denim-800: #16274D;
+ --joshin-color-denim-900: #0D1A40;
+}
\ No newline at end of file
diff --git a/static/css/weblog.css b/static/css/weblog.css
index 3fac6da..ae121ff 100644
--- a/static/css/weblog.css
+++ b/static/css/weblog.css
@@ -1,13 +1,17 @@
+/* @import url(./joshin-color-palette.css);
+@import url(./joshin-color-light.css);
+@import url(./joshin-color-dark.css); */
/* Page */
body {
font: 16px/24px "Avenir Next", "Helvetica Neue", Arial, Helvetica, sans-serif;
line-height: 24px;
+ background-color: var(--joshin-elevation-0);
}
a[href] {
- color: #476286;
+ color: var(--joshin-component-link-color-default);
text-decoration: none;
}
@@ -16,7 +20,7 @@ a:hover {
}
h1, h2, h3, h4 {
- color: #666666;
+ color: var(--joshin-primary-color-500);
}
img {
@@ -24,8 +28,8 @@ img {
}
blockquote {
- background-color: #F0F2F5;
- color: #999999;
+ background-color: var(--joshin-elevation-1);
+ color: var(--joshin-primary-color-500);
padding: 5px;
}
@@ -37,7 +41,6 @@ blockquote p {
blockquote p:last-child {
font-style: normal;
padding-left: 30px;
-
}
.site {
@@ -65,13 +68,13 @@ header h1 {
margin: 0 auto;
padding: 10px 10px 0 10px;
max-width: 720px;
- color: #5B636E;
+ color: var(--joshin-primary-color-400);
}
article > ul > li {
font-size: 18px;
line-height: 28px;
- color: #5B636E;
+ color: var(--joshin-primary-color-500);
}
/* Navigation */
@@ -108,38 +111,18 @@ nav ul > li {
}
.pagination span {
- color: #dddddd;
+ color: var(--joshin-secondary-color-500);
}
-/* Articles */
-
-article.micropost {
- margin: 8px auto;
-}
-
-.micropost {
- background-color: #f8f8f8;
- margin: 40px auto;
- padding: 20px;
- max-width: 780px;
- border-radius: 14px;
-}
+/* Articles, general */
.post, .page, .post-groups {
margin: 40px auto;
max-width: 780px;
}
-.micropost > p {
- color: #606060;
- font-size: 16px;
- line-height: 24px;
- margin: 0 0 10px;
- text-align: justify;
-}
-
.post > p, .page > p {
- color: #666666;
+ color: var(--joshin-primary-color-500);
font-size: 18px;
line-height: 28px;
margin: 0;
@@ -150,9 +133,43 @@ article.micropost {
margin: 20px auto;
}
+.post h2 {
+ margin: 0;
+ line-height: 32px;
+}
+
+article .postmeta {
+ line-height: 22px;
+ color: var(--joshin-primary-color-400);
+ margin: 0 auto;
+ padding: 5px 0 0 0;
+}
+
+/* Microposts */
+
+article.micropost {
+ margin: 8px auto;
+}
+
+.micropost {
+ background-color: var(--joshin-elevation-1);
+ margin: 40px auto;
+ padding: 20px;
+ max-width: 780px;
+ border-radius: 14px;
+}
+
+.micropost > p {
+ color: var(--joshin-primary-color-700);
+ font-size: 16px;
+ line-height: 24px;
+ margin: 0 0 10px;
+ text-align: justify;
+}
+
.micropost > a {
font-size: 12px;
- color: #888888;
+ color: var(--joshin-primary-color-400);
margin: 0;
}
@@ -160,13 +177,10 @@ article.micropost {
text-decoration: underline;
}
-.post h2 {
- margin: 0;
- line-height: 32px;
-}
+/* Photo Posts */
article.photo {
- border-radius: 5px;
+ border-radius: 14px;
margin: 40px auto;
max-width: 780px;
overflow: hidden;
@@ -174,7 +188,6 @@ article.photo {
}
article.photo div {
- color: #ffffff;
padding: 0;
margin: 0;
text-align: left;
@@ -182,13 +195,13 @@ article.photo div {
}
article.photo .title {
- background-color: #476286;
+ background-color: var(--joshin-accent-color-100);
font-size: 18pt;
padding: 15px;
}
article.photo a {
- color: #ffffff;
+ color: var(--joshin-primary-color-100);
display: block;
overflow: hidden;
}
@@ -212,12 +225,7 @@ article.photo img:hover {
transform: scale3d(1.1, 1.1, 1.1) rotate(-2deg);
}
-article .postmeta {
- line-height: 22px;
- color: #999999;
- margin: 0 auto;
- padding: 5px 0 0 0;
-}
+/* Post Grouping */
.post-group {
display: flex;
@@ -227,22 +235,24 @@ article .postmeta {
.post-group-item {
flex: auto;
- width: 40%;
+ width: 45%;
margin: 5px;
+ padding: 8px;
font-size: 10pt;
- color: #999999;
+ border-radius: 14px;
+ color: var(--joshin-primary-color-600);
}
.post-group-item:hover {
- background-color: #f6f6f6;
+ background-color: var(--joshin-elevation-1);
}
.post-group-item h3 {
- color: #999999;
- font-size: 16pt;
+ color: var(--joshin-primary-color-400);
+ font-size: 15pt;
margin: 0;
padding: 6px 0 0 6px;
- font-weight: normal;
+ font-weight: bold;
}
.post-group-item ul {
@@ -254,8 +264,8 @@ article .postmeta {
/* Footer */
footer {
- background-color: #545454;
- color: #ffffff;
+ background-color: var(--joshin-elevation-3);
+ color: var(--joshin-primary-color-200);
margin: 0;
}
@@ -267,11 +277,11 @@ footer {
}
.footer_text h3 {
- color: #cccccc;
+ color: var(--joshin-primary-color-200);
}
.footer_text a {
- color: #cccccc;
+ color: var(--joshin-primary-color-60);
}
.footer_text > div {
@@ -313,7 +323,7 @@ footer {
}
.footer_copyright {
- color: #999999;
+ color: var(--joshin-primary-color-50);
font: 12px/20px "Avenir Next", "Helvetica Neue", Arial, Helvetica, sans-serif;
margin: auto;
padding: 10px 0;
@@ -321,7 +331,7 @@ footer {
}
.footer_copyright a {
- color: #cccccc;
+ color: var(--joshin-primary-color-60);
}
@media screen
@@ -362,16 +372,16 @@ and (max-width: 780px) {
}
nav ul > li {
- background-color: #fafafa;
+ background-color: var(--joshin-elevation-2);
display:list-item;
float: none;
margin: 0;
padding: 10px;
- border-bottom: #f2f2f2 1px solid;
+ border-bottom: var(--joshin-elevation-1) 2px solid;
}
nav ul:first-child {
- border-top: #f2f2f2 1px solid;
+ border-top: var(--joshin-elevation-1) 2px solid;
}
.post-group-item {