update theme colors and add aside shortcode!

themes/gokarna/assets/css/dark.css

@@ -1,24 +1,69 @@
 :root {
-  --dark-primary-color: 34, 34, 34;        /* Kimber base00 #222222 */
-  --dark-secondary-color: #313131;         /* Kimber base01 */
-  --dark-tertiary-color: #555D55;          /* Kimber base02 */
-  --dark-text-color: #DEDEE7;              /* Kimber base05 */
-  --dark-muted-color: #C3C3B4;             /* Kimber base06 dates/blockquotes */
-  --dark-shadow-color: 49, 49, 49;         /* Kimber base01 as RGB triplet */
+  /* Kimber base00 #222222 */
+  /* Kimber base01 */
+  /* Kimber base02 */
+  /* Kimber base05 */
+  /* Kimber base06 dates/blockquotes */
+  /* Kimber base01 as RGB triplet */
+
+  /* Slightly dimmed vs base05 #DEDEE7 text */
+
+  /* Kimber base00 background */
+  --color-00: #222222;
+  --dark-background-color: #222222;
+  /* Kimber base01 borders/dividers */
+  --color-01: #313131;
+  --dark-secondary-color: #313131;
+  --dark-shadow-color: #313131;
+  /* Kimber base 02 */
+  --color-02: #555d55;
+  --dark-tertiary-color: #555D55;
+  /* Kimber base 03 */
+  --color-03: #644646;
+  /* Kimber base04 */
+  --color-04: #5a5a5a;
+  /* Kimber base05 text/code */
+  --color-05: #dedee7;
+  --dark-text-color: #DEDEE7;
+  /* Kimber base06 */
+  --color-06: #c3c3b4;
+  --dark-muted-color: #C3C3B4;
+  /* --link-color: #c3c3b4; */
+  --link-font-weight: 500;
+  /*Kimber base07 */
+  --color-07: #ffffe6;
+  /*Kimber base08 */
+  --color-08: #c88c8c;
+  /*Kimber base09 */
+  --color-09: #476c88;
+  /*Kimber base0A */
+  --color-0A: #d8b56d;
+  /*Kimber base0B */
+  --color-0B: #99c899;
+  /*Kimber base0C */
+  --color-0C: #78b4b4;
+  /*Kimber base0D */
+  --color-0D: #537c9c;
+  --link-color-dark: #537c9c;
+  /*Kimber base0E */
+  --color-0E: #86cacd;
+  /*Kimber base0F */
+  --color-0F: #704f4f;
+  --aside-block-highlight: #704f4f;
 }
 
 html {
-  background-color: rgb(var(--dark-primary-color));
+  background-color: var(--dark-background-color);
   color: var(--dark-text-color);
   fill: var(--dark-text-color);
 }
 
 .header {
-  background-color: rgba(var(--dark-primary-color), 0.95);
+  background-color: var(--dark-background-color);
 }
 
 .nav-hamburger-list {
-  background: rgba(var(--dark-primary-color), 1);
+  background: var(--dark-background-color);
 }
 
 .nav-links .nav-icons-divider {
@@ -31,7 +76,7 @@ a:hover .feather-moon {
 }
 
 .gk-social-icons-list .gk-social-icon,
-.gk-social-icons-list .gk-social-icon a:visited  {
+.gk-social-icons-list .gk-social-icon a:visited {
   fill: var(--dark-text-color);
 }
 
@@ -41,16 +86,17 @@ a:hover .feather-moon {
 
 .post-tags .post-tag:hover {
   background-color: var(--dark-text-color);
-  color: rgb(var(--dark-primary-color));
+  color: var(--dark-background-color);
 }
 
 .post-title-tag {
   border-color: var(--dark-tertiary-color);
   color: var(--dark-muted-color);
 }
+
 .post-title-tag:hover {
   background-color: var(--dark-text-color);
-  color: rgb(var(--dark-primary-color));
+  color: var(--dark-background-color);
   border-color: var(--dark-text-color);
 }
 
@@ -60,7 +106,7 @@ a:hover .feather-moon {
 
 .tags-list .post-tags .post-tag:hover a .tag-posts-count {
   background-color: var(--dark-text-color);
-  color: rgb(var(--dark-primary-color));
+  color: var(--dark-background-color);
 }
 
 .footer {
@@ -90,16 +136,18 @@ pre {
   background-color: var(--dark-secondary-color) !important;
 }
 
-:not(pre) > code {
+:not(pre)>code {
   background-color: var(--dark-tertiary-color) !important;
   color: var(--dark-text-color);
 }
 
 .header-shadow {
-  box-shadow: rgb(var(--dark-shadow-color)) 0px -1px 0px 0px inset;
+  box-shadow: var(--dark-shadow-color) 0px -1px 0px 0px inset;
 }
 
-.post .post-date, .prev-post-date, .next-post-date {
+.post .post-date,
+.prev-post-date,
+.next-post-date {
   color: var(--dark-muted-color);
 }
 
@@ -125,10 +173,32 @@ pre {
 }
 
 /* TODO: Check if this is needed or not */
+
+/* Content links: dark mode color override */
+.post-content a:not(.post-tag):not(.post-title-tag),
+.markdown-content a {
+  color: var(--link-color-dark);
+}
+
+.post-content a:not(.post-tag):not(.post-title-tag):hover,
+.markdown-content a:hover {
+  color: var(--accent-color);
+}
+
+/* Aside blocks: dark mode overrides */
+.aside-block {
+  background-color: var(--dark-secondary-color);
+  border-color: var(--aside-block-highlight);
+}
+
+.aside-caption {
+  color: var(--dark-background-color);
+}
+
 /*
 img,
 video {
   filter: hue-rotate(180deg) contrast(100%) invert(100%);
   -webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%);
 }
-*/
+*/