UX: add support for dark mode (#529)

discourse · Mar 13, 2024 · fc6c3c8 · fc6c3c8
1 parent ea5c386
commit fc6c3c8
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 13 deletions.
diff --git a/app/views/discourse_ai/ai_bot/shared_ai_conversations/show.html.erb b/app/views/discourse_ai/ai_bot/shared_ai_conversations/show.html.erb
@@ -10,8 +10,7 @@
     <meta name="twitter:title" content="<%= @shared_conversation.title %>">
     <meta name="twitter:description" content="<%= @shared_conversation.formatted_excerpt %>">
     <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="<%= share_asset_url("share.css") %>">
-    <link rel="stylesheet" href="<%= share_asset_url("highlight.min.css") %>">
+    <link rel="stylesheet" href="<%= ::UrlHelper.local_cdn_url("/plugins/discourse-ai/ai-share/share.css") %>">
     <script>
       window.hljs_initHighlighting = function() {
         document.querySelectorAll('pre code').forEach((el) => {
@@ -26,13 +25,13 @@
       <a href="https://discourse.org/ai" class="ai-logo">
         <svg xmlns="http://www.w3.org/2000/svg" class="logo" viewBox="0 0 289.09 72.93">
           <path id="d-sparkles" fill="#f15d22" d="M280.75 16.89c-9.26 0-16.79-7.53-16.79-16.79 0-.05-.04-.1-.1-.1s-.1.04-.1.1c0 9.3-7.53 16.86-16.79 16.86-.05 0-.1.04-.1.1v.03c0 .05.04.1.1.1 9.26 0 16.79 7.5 16.79 16.72 0 .05.04.1.1.1s.1-.04.1-.1c0-9.26 7.53-16.79 16.79-16.79.05 0 .1-.04.1-.1v-.03c0-.05-.04-.1-.1-.1ZM289.04 33.73c-4.58 0-8.31-3.73-8.31-8.31 0-.03-.02-.05-.05-.05s-.05.02-.05.05c0 4.6-3.73 8.35-8.31 8.35-.03 0-.05.02-.05.05v.02s.02.05.05.05c4.58 0 8.31 3.71 8.31 8.27 0 .03.02.05.05.05s.05-.02.05-.05c0-4.58 3.73-8.31 8.31-8.31.03 0 .05-.02.05-.05v-.02s-.02-.05-.05-.05Z"/>
-          <path fill="#010101" d="M62.53 29.48c.9 0 1.68.33 2.33.98.65.66.97 1.45.97 2.38s-.32 1.7-.96 2.35c-.64.65-1.41.97-2.3.97s-1.7-.33-2.35-.99c-.65-.66-.97-1.46-.97-2.41s.32-1.68.96-2.32c.64-.64 1.41-.96 2.32-.96Zm-2.58 11.21h5.16v21.49h-5.16V40.69ZM82.38 44.09l-3.19 3.19c-1.3-1.28-2.47-1.93-3.53-1.93-.58 0-1.03.12-1.36.37-.33.25-.49.55-.49.92 0 .28.1.53.31.77.21.23.72.55 1.54.95l1.89.94c1.99.98 3.36 1.98 4.1 3 .74 1.02 1.12 2.22 1.12 3.59 0 1.83-.67 3.35-2.01 4.57-1.34 1.22-3.14 1.83-5.39 1.83-3 0-5.39-1.17-7.18-3.51l3.17-3.46c.6.71 1.31 1.28 2.13 1.71.81.43 1.53.65 2.16.65.68 0 1.23-.16 1.64-.49.42-.33.62-.71.62-1.13 0-.79-.75-1.57-2.25-2.32l-1.74-.87c-3.33-1.67-4.99-3.77-4.99-6.29 0-1.62.63-3.01 1.88-4.17 1.25-1.15 2.86-1.73 4.81-1.73 1.33 0 2.59.29 3.77.88 1.18.59 2.18 1.43 2.99 2.52ZM106.4 45.38l-4.29 2.36c-.81-.84-1.6-1.43-2.39-1.76-.79-.33-1.71-.49-2.77-.49-1.93 0-3.49.58-4.68 1.73-1.19 1.15-1.79 2.62-1.79 4.42s.57 3.18 1.72 4.28c1.15 1.11 2.65 1.66 4.52 1.66 2.31 0 4.1-.79 5.39-2.36l4.07 2.79c-2.2 2.87-5.32 4.3-9.33 4.3-3.61 0-6.45-1.07-8.49-3.21-2.05-2.14-3.07-4.65-3.07-7.52 0-1.99.5-3.82 1.49-5.5.99-1.67 2.38-2.99 4.17-3.95 1.78-.96 3.78-1.44 5.98-1.44 2.04 0 3.87.41 5.5 1.22 1.62.81 2.95 1.97 3.99 3.47ZM119.11 40.69c1.94 0 3.76.49 5.47 1.45 1.71.97 3.04 2.29 4 3.95.96 1.66 1.44 3.46 1.44 5.38s-.48 3.75-1.45 5.44c-.96 1.69-2.28 3.01-3.94 3.96-1.66.95-3.5 1.43-5.5 1.43-2.95 0-5.46-1.05-7.55-3.15-2.08-2.1-3.13-4.64-3.13-7.64 0-3.21 1.18-5.89 3.53-8.03 2.07-1.86 4.44-2.8 7.12-2.8Zm.08 4.86c-1.6 0-2.94.56-4 1.67-1.07 1.11-1.6 2.54-1.6 4.28s.53 3.24 1.58 4.35c1.05 1.11 2.39 1.66 4 1.66s2.96-.56 4.03-1.68c1.07-1.12 1.61-2.56 1.61-4.33s-.53-3.2-1.58-4.3c-1.05-1.1-2.4-1.65-4.04-1.65ZM133.14 41.22h5.22v9.9c0 1.93.13 3.27.4 4.02.27.75.69 1.33 1.28 1.75.59.42 1.31.62 2.17.62s1.59-.2 2.19-.61c.6-.41 1.04-1.01 1.34-1.8.21-.59.32-1.86.32-3.8V41.23h5.16v8.71c0 3.59-.28 6.05-.85 7.37-.69 1.61-1.71 2.85-3.06 3.71-1.35.86-3.06 1.29-5.14 1.29-2.25 0-4.08-.5-5.47-1.51-1.39-1.01-2.37-2.41-2.94-4.21-.4-1.25-.61-3.51-.61-6.8v-8.56ZM154.63 41.22h4.42v2.59c.48-1.02 1.11-1.79 1.91-2.32.79-.53 1.66-.79 2.61-.79.67 0 1.37.18 2.1.53l-1.61 4.44c-.6-.3-1.1-.45-1.49-.45-.79 0-1.46.49-2.01 1.47-.55.98-.82 2.91-.82 5.78l.02 1v8.31h-5.12V41.23ZM180.27 44.09l-3.19 3.19c-1.3-1.28-2.47-1.93-3.53-1.93-.58 0-1.03.12-1.36.37-.33.25-.49.55-.49.92 0 .28.1.53.31.77.21.23.72.55 1.54.95l1.89.94c1.99.98 3.36 1.98 4.1 3 .74 1.02 1.12 2.22 1.12 3.59 0 1.83-.67 3.35-2.01 4.57-1.34 1.22-3.14 1.83-5.39 1.83-3 0-5.39-1.17-7.18-3.51l3.17-3.46c.6.71 1.31 1.28 2.13 1.71.81.43 1.53.65 2.16.65.68 0 1.23-.16 1.64-.49.42-.33.62-.71.62-1.13 0-.79-.75-1.57-2.25-2.32l-1.74-.87c-3.32-1.67-4.99-3.77-4.99-6.29 0-1.62.63-3.01 1.88-4.17 1.25-1.15 2.86-1.73 4.81-1.73 1.33 0 2.59.29 3.77.88 1.18.59 2.18 1.43 2.99 2.52ZM204.77 52.99H188.2c.24 1.46.88 2.62 1.92 3.49 1.04.86 2.36 1.29 3.98 1.29 1.93 0 3.58-.67 4.97-2.02l4.35 2.04c-1.08 1.54-2.38 2.67-3.89 3.41-1.51.74-3.31 1.1-5.38 1.1-3.22 0-5.85-1.02-7.88-3.05-2.03-2.03-3.04-4.58-3.04-7.64s1.01-5.74 3.03-7.81c2.02-2.07 4.56-3.11 7.6-3.11 3.24 0 5.87 1.04 7.9 3.11 2.03 2.07 3.04 4.81 3.04 8.21l-.02.98Zm-5.16-4.06c-.34-1.15-1.01-2.08-2.02-2.8-1-.72-2.17-1.08-3.49-1.08-1.44 0-2.7.4-3.78 1.21-.68.5-1.31 1.39-1.89 2.66h11.18ZM27.63 17.64C12.63 17.64 0 29.8 0 44.8v28.13l27.62-.03c15 0 27.16-12.63 27.16-27.63S42.62 17.64 27.62 17.64Z"/>
+          <path class="d-logo-black" fill="#010101" d="M62.53 29.48c.9 0 1.68.33 2.33.98.65.66.97 1.45.97 2.38s-.32 1.7-.96 2.35c-.64.65-1.41.97-2.3.97s-1.7-.33-2.35-.99c-.65-.66-.97-1.46-.97-2.41s.32-1.68.96-2.32c.64-.64 1.41-.96 2.32-.96Zm-2.58 11.21h5.16v21.49h-5.16V40.69ZM82.38 44.09l-3.19 3.19c-1.3-1.28-2.47-1.93-3.53-1.93-.58 0-1.03.12-1.36.37-.33.25-.49.55-.49.92 0 .28.1.53.31.77.21.23.72.55 1.54.95l1.89.94c1.99.98 3.36 1.98 4.1 3 .74 1.02 1.12 2.22 1.12 3.59 0 1.83-.67 3.35-2.01 4.57-1.34 1.22-3.14 1.83-5.39 1.83-3 0-5.39-1.17-7.18-3.51l3.17-3.46c.6.71 1.31 1.28 2.13 1.71.81.43 1.53.65 2.16.65.68 0 1.23-.16 1.64-.49.42-.33.62-.71.62-1.13 0-.79-.75-1.57-2.25-2.32l-1.74-.87c-3.33-1.67-4.99-3.77-4.99-6.29 0-1.62.63-3.01 1.88-4.17 1.25-1.15 2.86-1.73 4.81-1.73 1.33 0 2.59.29 3.77.88 1.18.59 2.18 1.43 2.99 2.52ZM106.4 45.38l-4.29 2.36c-.81-.84-1.6-1.43-2.39-1.76-.79-.33-1.71-.49-2.77-.49-1.93 0-3.49.58-4.68 1.73-1.19 1.15-1.79 2.62-1.79 4.42s.57 3.18 1.72 4.28c1.15 1.11 2.65 1.66 4.52 1.66 2.31 0 4.1-.79 5.39-2.36l4.07 2.79c-2.2 2.87-5.32 4.3-9.33 4.3-3.61 0-6.45-1.07-8.49-3.21-2.05-2.14-3.07-4.65-3.07-7.52 0-1.99.5-3.82 1.49-5.5.99-1.67 2.38-2.99 4.17-3.95 1.78-.96 3.78-1.44 5.98-1.44 2.04 0 3.87.41 5.5 1.22 1.62.81 2.95 1.97 3.99 3.47ZM119.11 40.69c1.94 0 3.76.49 5.47 1.45 1.71.97 3.04 2.29 4 3.95.96 1.66 1.44 3.46 1.44 5.38s-.48 3.75-1.45 5.44c-.96 1.69-2.28 3.01-3.94 3.96-1.66.95-3.5 1.43-5.5 1.43-2.95 0-5.46-1.05-7.55-3.15-2.08-2.1-3.13-4.64-3.13-7.64 0-3.21 1.18-5.89 3.53-8.03 2.07-1.86 4.44-2.8 7.12-2.8Zm.08 4.86c-1.6 0-2.94.56-4 1.67-1.07 1.11-1.6 2.54-1.6 4.28s.53 3.24 1.58 4.35c1.05 1.11 2.39 1.66 4 1.66s2.96-.56 4.03-1.68c1.07-1.12 1.61-2.56 1.61-4.33s-.53-3.2-1.58-4.3c-1.05-1.1-2.4-1.65-4.04-1.65ZM133.14 41.22h5.22v9.9c0 1.93.13 3.27.4 4.02.27.75.69 1.33 1.28 1.75.59.42 1.31.62 2.17.62s1.59-.2 2.19-.61c.6-.41 1.04-1.01 1.34-1.8.21-.59.32-1.86.32-3.8V41.23h5.16v8.71c0 3.59-.28 6.05-.85 7.37-.69 1.61-1.71 2.85-3.06 3.71-1.35.86-3.06 1.29-5.14 1.29-2.25 0-4.08-.5-5.47-1.51-1.39-1.01-2.37-2.41-2.94-4.21-.4-1.25-.61-3.51-.61-6.8v-8.56ZM154.63 41.22h4.42v2.59c.48-1.02 1.11-1.79 1.91-2.32.79-.53 1.66-.79 2.61-.79.67 0 1.37.18 2.1.53l-1.61 4.44c-.6-.3-1.1-.45-1.49-.45-.79 0-1.46.49-2.01 1.47-.55.98-.82 2.91-.82 5.78l.02 1v8.31h-5.12V41.23ZM180.27 44.09l-3.19 3.19c-1.3-1.28-2.47-1.93-3.53-1.93-.58 0-1.03.12-1.36.37-.33.25-.49.55-.49.92 0 .28.1.53.31.77.21.23.72.55 1.54.95l1.89.94c1.99.98 3.36 1.98 4.1 3 .74 1.02 1.12 2.22 1.12 3.59 0 1.83-.67 3.35-2.01 4.57-1.34 1.22-3.14 1.83-5.39 1.83-3 0-5.39-1.17-7.18-3.51l3.17-3.46c.6.71 1.31 1.28 2.13 1.71.81.43 1.53.65 2.16.65.68 0 1.23-.16 1.64-.49.42-.33.62-.71.62-1.13 0-.79-.75-1.57-2.25-2.32l-1.74-.87c-3.32-1.67-4.99-3.77-4.99-6.29 0-1.62.63-3.01 1.88-4.17 1.25-1.15 2.86-1.73 4.81-1.73 1.33 0 2.59.29 3.77.88 1.18.59 2.18 1.43 2.99 2.52ZM204.77 52.99H188.2c.24 1.46.88 2.62 1.92 3.49 1.04.86 2.36 1.29 3.98 1.29 1.93 0 3.58-.67 4.97-2.02l4.35 2.04c-1.08 1.54-2.38 2.67-3.89 3.41-1.51.74-3.31 1.1-5.38 1.1-3.22 0-5.85-1.02-7.88-3.05-2.03-2.03-3.04-4.58-3.04-7.64s1.01-5.74 3.03-7.81c2.02-2.07 4.56-3.11 7.6-3.11 3.24 0 5.87 1.04 7.9 3.11 2.03 2.07 3.04 4.81 3.04 8.21l-.02.98Zm-5.16-4.06c-.34-1.15-1.01-2.08-2.02-2.8-1-.72-2.17-1.08-3.49-1.08-1.44 0-2.7.4-3.78 1.21-.68.5-1.31 1.39-1.89 2.66h11.18ZM27.63 17.64C12.63 17.64 0 29.8 0 44.8v28.13l27.62-.03c15 0 27.16-12.63 27.16-27.63S42.62 17.64 27.62 17.64Z"/>
           <path fill="#fff9ae" d="M27.89 28.15c-9.3 0-16.84 7.54-16.84 16.84 0 2.91.74 5.64 2.03 8.02l-3.04 9.8 10.94-2.47c2.11.95 4.44 1.48 6.91 1.48 9.3 0 16.84-7.54 16.84-16.84s-7.54-16.84-16.84-16.84Z"/>
           <path fill="#00aeef" d="M41.26 34.75c2.18 2.84 3.47 6.39 3.47 10.24 0 9.3-7.54 16.84-16.84 16.84-2.46 0-4.8-.53-6.91-1.48l-10.94 2.47 11.14-1.32c2 1.16 4.27 1.94 6.71 2.2 9.25.97 17.53-5.74 18.5-14.98.57-5.41-1.49-10.48-5.15-13.96Z"/>
           <path fill="#00a94f" d="M38.15 31.64c2.46 2.59 4.12 5.99 4.52 9.82.97 9.25-5.74 17.53-14.98 18.5-2.45.26-4.83-.03-7.02-.75l-10.62 3.6 10.94-2.47c2.11.95 4.44 1.48 6.91 1.48 9.3 0 16.84-7.54 16.84-16.84 0-5.44-2.58-10.27-6.58-13.35Z"/>
           <path fill="#f15d22" d="M14.1 53.39c-1.04-2.51-1.49-5.3-1.18-8.19.97-9.25 9.26-15.96 18.5-14.98 3.84.4 7.24 2.07 9.84 4.54-3.08-4.01-7.92-6.6-13.36-6.6-9.3 0-16.84 7.54-16.84 16.84 0 2.91.74 5.64 2.03 8.02l-3.04 9.8 4.05-9.43Z"/>
           <path fill="#d0232b" d="M13.09 53.01c-1.3-2.39-2.03-5.12-2.03-8.02 0-9.3 7.54-16.84 16.84-16.84 3.86 0 7.42 1.3 10.26 3.49-3.48-3.67-8.56-5.73-13.98-5.17-9.25.97-15.96 9.26-14.98 18.5.3 2.89 1.32 5.53 2.86 7.77l-2 10.07 3.04-9.8Z"/>
-          <path fill="#231f20" d="M227.73 34.1h5.4l10.75 27.94h-5.53l-2.19-5.76h-11.4l-2.27 5.76h-5.53l10.78-27.94Zm2.73 7.41-3.75 9.59h7.48l-3.73-9.59ZM247.21 34.1h5.28v27.94h-5.28V34.1Z"/>
+          <path class="d-logo-black" fill="#010101" d="M227.73 34.1h5.4l10.75 27.94h-5.53l-2.19-5.76h-11.4l-2.27 5.76h-5.53l10.78-27.94Zm2.73 7.41-3.75 9.59h7.48l-3.73-9.59ZM247.21 34.1h5.28v27.94h-5.28V34.1Z"/>
         </svg>
       </a>
       <a class="site-title" href="<%= Discourse.base_url %>">

diff --git a/public/ai-share/highlight.min.css b/public/ai-share/highlight.min.css
diff --git a/public/ai-share/share.css b/public/ai-share/share.css
@@ -18,6 +18,25 @@
 
   --tertiary: #08c;
 
+  /* colors from the default dark discourse color scheme */
+  @media (prefers-color-scheme: dark) {
+    --primary: #dddddd;
+    --primary-50: #282828;
+    --primary-100: #2c2c2c;
+    --primary-200: #313131;
+    --primary-300: #585858;
+    --primary-400: #7a7a7a;
+    --primary-500: #858585;
+    --primary-600: #909090;
+    --primary-700: #9b9b9b;
+    --primary-800: #a6a6a6;
+    --primary-900: #c7c7c7;
+
+    --secondary: #222222;
+
+    --tertiary: #099dd7;
+  }
+
   --border-radius-large:  1em;
   --border-radius-small:  0.33em;
 
@@ -89,6 +108,12 @@ body {
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  .d-logo-black {
+    fill: var(--primary);
+  }
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .ai-logo:hover #d-sparkles {
     animation: d-rainbow-sparkles 1.5s forwards ease-in-out;
@@ -380,10 +405,98 @@ li, p {
 .lightbox-wrapper .meta svg, .lightbox-wrapper .meta .informations {
   display: none;
 }
+
 .lightbox-wrapper .meta .filename {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
+}
+
+/* 
+   custom code highlighting for dark mode support... 
+   overrides highlightjs (https://highlightjs.org/) CSS colors. 
+*/ 
+
+.hljs{
+  --hljs-red: #c63c1b;
+  --hljs-salmon: #ec8972;
+  --hljs-lime: #4dff4d;
+  --hljs-green: #090;
+  --hljs-sky: #47c2ff;
+
+  @media (prefers-color-scheme: dark) {
+    --hljs-red: #af3719; 
+    --hljs-salmon: #c7705c;
+    --hljs-lime: #3fcf3f;
+    --hljs-green: #048504;
+    --hljs-sky: #379ccf;
+  }
+
+  --hljs-blue: var(--tertiary); /* already has a dark variant at root */
+
+  background:var(--primary-50);
+  color:var(--primary);
+}
+
+pre code.hljs{
+  display:block;
+  overflow-x:auto;
+  padding:1em
+}
+
+code.hljs{
+  padding:3px 5px
+}
+
+.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{
+  font-weight:700
+}
+
+.hljs-emphasis{
+  font-style:italic
+}
+.hljs-strong{
+  font-weight:700
+}
+
+.hljs-comment{
+  color: var(--hljs-comment);
+}
+
+.hljs-punctuation,.hljs-tag{
+  color:var(--primary-900);
+}
+
+.hljs-tag .hljs-attr,.hljs-tag .hljs-name{
+  color:var(--primary-900);
+}
+
+.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{
+  color: var(--hljs-red);
+}
+
+.hljs-section,.hljs-title{
+  color: var(--hljs-red);
+  font-weight:700
+}
+
+.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{
+  color:var(--hljs-salmon);
+}
+
+.hljs-literal{
+  color: var(--hljs-lime);
+}
+
+.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{
+  color:var(--hljs-green);
+}
+
+.hljs-meta{
+  color:var(--hljs-blue);
+}
 
+.hljs-meta .hljs-string{
+  color:var(--hljs-sky);
 }