updated how light/dark mode is handled

config.toml

@@ -39,6 +39,7 @@ github_alerts = true
 
 
 [markdown.highlighting]
-theme = "github-dark"
+light_theme = "github-light-high-contrast"     
-style = "class"
+dark_theme = "github-dark-high-contrast"     
+style = "inline"
 error_on_missing_language = true

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<Void, IOException> echo(@Cancellation("close") Socket socket) throws IOException {
     try(socket){
         var buffer = ByteBuffer.allocate(4096*2);

sass/style.scss

@@ -14,11 +14,17 @@ 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;
 }
 

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-0: light-dark(#fff, #1d1d1d);
-    --bg-1: #131313;
+    --bg-1: light-dark(#eee, #131313);
 
-    --grey-light: #777;
+    --grey-light: light-dark(#a4a4a4, #777);
-    --grey-dark: #24292E;
+    --grey-dark: light-dark(#969696, #24292E);
     
-    --fg-0: #eee;
+    --fg-0: light-dark(#111, #eee);
-    --fg-1: #ccc;
+    --fg-1: light-dark(#333, #ccc);
-    --fg-2: #999;
+    --fg-2: light-dark(#555, #999);
 
-    --primary: #daa520
+    --primary: light-dark(#ffd979, #daa520);
+    --text-highlight:  color-mix(in srgb-linear, var(--primary) 50%, transparent);
 }
+
+
+

static/giallo.css

@@ -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; }

templates/base.html

@@ -24,7 +24,6 @@
     {% endif %}
 
     <link rel="stylesheet" href="{{ get_url(path='style.css', cachebust=true) }}">
-    <link rel="stylesheet" href="{{ get_url(path='giallo.css') }}">
     
     {%- 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 %}
 
-    <meta name="color-scheme" content="dark">
-
 
     {%- if page.description -%}
         <meta property="og:description" content="{{ page.description | markdown(inline=true) | striptags }}">
@@ -118,7 +115,7 @@
 </head>
 
 
-<body data-theme="dark">
+<body>
     <div class="content">
         <header class="header">
             {% filter indent -%}{%- filter indent -%}
@@ -139,10 +136,10 @@
         </footer>
     </div>
 
-    <div id="lightbox" class="lightbox" aria-hidden="true" role="dialog" aria-label="Media viewer">
+    <div id="lightbox" class="lightbox" aria-hidden="true" role="dialog" aria-label="Image viewer">
-        <div class="lightbox__stage" id="lightbox-stage">
+    <div class="lightbox__stage">
-            <img id="lightbox-img" class="lightbox__img" alt="">
+        <img id="lightbox-img" class="lightbox__img" alt="">
-        </div>
+    </div>
     </div>
 </body>
 <script src="{{ get_url(path='/js/script.js') }}"></script>