From 8a91886d68b4a184d449ead2a24b3ccc67c01af5 Mon Sep 17 00:00:00 2001 From: Parker TenBroeck <51721964+ParkerTenBroeck@users.noreply.github.com> Date: Thu, 22 Jan 2026 19:43:46 -0500 Subject: [PATCH] updated how light/dark mode is handled --- config.toml | 5 +- content/blog/projects/generators.md | 3 +- sass/style.scss | 9 ++- sass/theme.scss | 68 ++++++++++++++++++--- static/giallo.css | 91 ----------------------------- templates/base.html | 13 ++--- 6 files changed, 75 insertions(+), 114 deletions(-) delete mode 100644 static/giallo.css diff --git a/config.toml b/config.toml index d44af96..931a028 100644 --- a/config.toml +++ b/config.toml @@ -39,6 +39,7 @@ github_alerts = true [markdown.highlighting] -theme = "github-dark" -style = "class" +light_theme = "github-light-high-contrast" +dark_theme = "github-dark-high-contrast" +style = "inline" error_on_missing_language = true \ No newline at end of file diff --git a/content/blog/projects/generators.md b/content/blog/projects/generators.md index c6706fd..c058cf4 100644 --- a/content/blog/projects/generators.md +++ b/content/blog/projects/generators.md @@ -8,10 +8,9 @@ tags = ["java", "bytecode"] category = ["project"] +++ - Take a look at the [GitHub](https://github.com/ParkerTenBroeck/generators) -```java +```java,linenos public static Future echo(@Cancellation("close") Socket socket) throws IOException { try(socket){ var buffer = ByteBuffer.allocate(4096*2); diff --git a/sass/style.scss b/sass/style.scss index c901e27..a4affc0 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -13,12 +13,18 @@ body { background: var(--bg-0); color: var(--fg-1); + font-size: 16px; line-height: 1.6em; letter-spacing: .5px; } +::selection { + background: var(--text-highlight); + color: var(--fg-0); +} + .content { margin-bottom: 4em; margin-left: auto; @@ -87,10 +93,9 @@ h6 { font-size: 1rem; } -code { +code:not([data-lang]) { background: var(--grey-dark); border-radius: 3px; - font-family: 'Berkeley Mono'; padding: .15rem .3rem; } diff --git a/sass/theme.scss b/sass/theme.scss index 32f62a9..5448964 100644 --- a/sass/theme.scss +++ b/sass/theme.scss @@ -1,15 +1,65 @@ +@media (prefers-color-scheme: dark) { + * { + color-scheme: dark!important; + } +} +:root[data-theme="dark"] { + * { + color-scheme: dark!important; + } +} +@media (prefers-color-scheme: light) { + * { + color-scheme: light!important; + } +} +:root[data-theme="light"] { + * { + color-scheme: light!important; + } +} + +* { + transition: color linear 0.25s; + transition: background-color linear 0.25s; +} + +.giallo{ + background-color: var(--bg-1)!important; + overflow: auto; + border-radius: 5px; +} + +.giallo-l { + display: inline-block; + min-height: 1lh; + width: 100%; +} +.giallo-ln { + display: inline-block; + user-select: none; + margin-right: 0.4em; + min-width: 3ch; + border-right: solid var(--grey-light) 1px; + text-align: right; + opacity: 0.8; +} :root { - --bg-0: #1d1d1d; - --bg-1: #131313; + --bg-0: light-dark(#fff, #1d1d1d); + --bg-1: light-dark(#eee, #131313); - --grey-light: #777; - --grey-dark: #24292E; + --grey-light: light-dark(#a4a4a4, #777); + --grey-dark: light-dark(#969696, #24292E); - --fg-0: #eee; - --fg-1: #ccc; - --fg-2: #999; + --fg-0: light-dark(#111, #eee); + --fg-1: light-dark(#333, #ccc); + --fg-2: light-dark(#555, #999); + + --primary: light-dark(#ffd979, #daa520); + --text-highlight: color-mix(in srgb-linear, var(--primary) 50%, transparent); +} + + - --primary: #daa520 -} \ No newline at end of file diff --git a/static/giallo.css b/static/giallo.css deleted file mode 100644 index 783c850..0000000 --- a/static/giallo.css +++ /dev/null @@ -1,91 +0,0 @@ -/* - * theme "github-dark" generated by giallo - */ - -.z-code { - color: #E1E4E8; - background-color: #24292E; -} - -.z-hl { - background-color: #2B3036; -} - -.giallo-ln { - color: #444D56; -} - -.z-comment { color: #6A737D; } -.z-constant { color: #79B8FF; } -.z-entity { color: #B392F0; } -.z-keyword { color: #F97583; } -.z-storage { color: #F97583; } -.z-string { color: #9ECBFF; } -.z-support { color: #79B8FF; } -.z-variable { color: #FFAB70; } -.z-carriage-return { color: #24292E; background-color: #F97583; font-style: italic;text-decoration: underline; } -.z-variable { color: #79B8FF; } -.z-source { color: #9ECBFF; } -.z-string.z-comment { color: #6A737D; } -.z-variable.z-language { color: #79B8FF; } -.z-entity.z-name { color: #B392F0; } -.z-storage.z-type { color: #F97583; } -.z-meta.z-property-name { color: #79B8FF; } -.z-variable.z-other { color: #E1E4E8; } -.z-invalid.z-broken { color: #FDAEB7; font-style: italic; } -.z-invalid.z-deprecated { color: #FDAEB7; font-style: italic; } -.z-invalid.z-illegal { color: #FDAEB7; font-style: italic; } -.z-invalid.z-unimplemented { color: #FDAEB7; font-style: italic; } -.z-message.z-error { color: #FDAEB7; } -.z-source.z-regexp { color: #DBEDFF; } -.z-string.z-regexp { color: #DBEDFF; } -.z-support.z-constant { color: #79B8FF; } -.z-support.z-variable { color: #79B8FF; } -.z-meta.z-module-reference { color: #79B8FF; } -.z-markup.z-heading { color: #79B8FF; font-weight: bold; } -.z-markup.z-quote { color: #85E89D; } -.z-markup.z-italic { color: #E1E4E8; font-style: italic; } -.z-markup.z-bold { color: #E1E4E8; font-weight: bold; } -.z-markup.z-underline { text-decoration: underline; } -.z-markup.z-strikethrough { text-decoration: line-through; } -.z-markup.z-deleted { color: #FDAEB7; background-color: #86181D; } -.z-markup.z-inserted { color: #85E89D; background-color: #144620; } -.z-markup.z-changed { color: #FFAB70; background-color: #C24E00; } -.z-markup.z-ignored { color: #2F363D; background-color: #79B8FF; } -.z-markup.z-untracked { color: #2F363D; background-color: #79B8FF; } -.z-meta.z-separator { color: #79B8FF; font-weight: bold; } -.z-meta.z-output { color: #79B8FF; } -.z-brackethighlighter.z-tag { color: #D1D5DA; } -.z-brackethighlighter.z-curly { color: #D1D5DA; } -.z-brackethighlighter.z-round { color: #D1D5DA; } -.z-brackethighlighter.z-square { color: #D1D5DA; } -.z-brackethighlighter.z-angle { color: #D1D5DA; } -.z-brackethighlighter.z-quote { color: #D1D5DA; } -.z-brackethighlighter.z-unmatched { color: #FDAEB7; } -.z-entity.z-name { color: #79B8FF; font-weight: bold; } -.z-punctuation.z-definition.z-comment { color: #6A737D; } -.z-entity.z-name.z-constant { color: #79B8FF; } -.z-variable.z-other.z-constant { color: #79B8FF; } -.z-variable.z-other.z-enummember { color: #79B8FF; } -.z-variable.z-parameter.z-function { color: #E1E4E8; } -.z-entity.z-name.z-tag { color: #85E89D; } -.z-storage.z-modifier.z-package { color: #E1E4E8; } -.z-storage.z-modifier.z-import { color: #E1E4E8; } -.z-storage.z-type.z-java { color: #E1E4E8; } -.z-punctuation.z-definition.z-string { color: #9ECBFF; } -.z-string.z-regexp.z-character-class { color: #DBEDFF; } -.z-markup.z-inline.z-raw { color: #79B8FF; } -.z-punctuation.z-definition.z-deleted { color: #FDAEB7; background-color: #86181D; } -.z-punctuation.z-definition.z-inserted { color: #85E89D; background-color: #144620; } -.z-punctuation.z-definition.z-changed { color: #FFAB70; background-color: #C24E00; } -.z-meta.z-diff.z-range { color: #B392F0; font-weight: bold; } -.z-meta.z-diff.z-header { color: #79B8FF; } -.z-string.z-other.z-link { color: #DBEDFF; text-decoration: underline; } -.z-constant.z-character.z-escape { color: #DBEDFF; } -.z-source.z-ruby.z-embedded { color: #DBEDFF; } -.z-string.z-regexp.z-arbitrary-repitition { color: #DBEDFF; } -.z-constant.z-character.z-escape { color: #85E89D; font-weight: bold; } -.z-meta.z-diff.z-header.z-from-file { color: #FDAEB7; background-color: #86181D; } -.z-meta.z-diff.z-header.z-to-file { color: #85E89D; background-color: #144620; } -.z-constant.z-other.z-reference.z-link { color: #DBEDFF; text-decoration: underline; } -.z-punctuation.z-definition.z-list.z-begin.z-markdown { color: #FFAB70; } diff --git a/templates/base.html b/templates/base.html index 43345aa..e7c63eb 100644 --- a/templates/base.html +++ b/templates/base.html @@ -24,7 +24,6 @@ {% endif %} - {%- if page.extra.stylesheets or section.extra.stylesheets %} {%- for stylesheet in page.extra.stylesheets | default(value=section.extra.stylesheets) %} @@ -81,8 +80,6 @@ {%- endif %} {%- endblock %} - - {%- if page.description -%} @@ -118,7 +115,7 @@ - +
{% filter indent -%}{%- filter indent -%} @@ -139,10 +136,10 @@
-