ui: use Atom One Light on light theme

ghivert · Jul 18, 2024 · 0ecb7bf · 0ecb7bf
1 parent a2321d8
commit 0ecb7bf
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 31 deletions.
diff --git a/apps/frontend/src/frontend/view/types.gleam b/apps/frontend/src/frontend/view/types.gleam
@@ -7,23 +7,23 @@ fn span(text: String, color: String) {
 }
 
 pub fn keyword(text: String) {
-  span(text, "#c678dd")
+  span(text, "var(--hljs-hue-3)")
 }
 
 pub fn fun(text: String) {
-  span(text, "#61afef")
+  span(text, "var(--hljs-hue-2)")
 }
 
 pub fn label(text: String) {
-  span(text, "#e06c75")
+  span(text, "var(--hljs-hue-5)")
 }
 
 pub fn type_(text: String) {
-  span(text, "#e5c07b")
+  span(text, "var(--hljs-hue-6-2)")
 }
 
 pub fn variable(text: String) {
-  span(text, "#98c379")
+  span(text, "var(--hljs-hue-4)")
 }
 
 pub fn dark_white(text: String) {

diff --git a/apps/frontend/src/stylesheets/hljs-theme.css b/apps/frontend/src/stylesheets/hljs-theme.css
@@ -1,29 +1,29 @@
 /*
 
-Atom One Dark by Daniel Gamage
-Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
-
-base:    #1e1e1e
-mono-1:  #abb2bf
-mono-2:  #818896
-mono-3:  #5c6370
-hue-1:   #56b6c2
-hue-2:   #61aeee
-hue-3:   #c678dd
-hue-4:   #98c379
-hue-5:   #e06c75
-hue-5-2: #be5046
-hue-6:   #d19a66
-hue-6-2: #e6c07b
+Atom One Light by Daniel Gamage
+Original One Light Syntax theme from https://github.com/atom/one-light-syntax
+
+base:    #fafafa
+mono-1:  #383a42
+mono-2:  #686b77
+mono-3:  #a0a1a7
+hue-1:   #0184bb
+hue-2:   #4078f2
+hue-3:   #a626a4
+hue-4:   #50a14f
+hue-5:   #e45649
+hue-5-2: #c91243
+hue-6:   #986801
+hue-6-2: #c18401
 
 */
 
 .hljs {
   display: block;
   overflow-x: auto;
   padding: 12px;
-  color: #abb2bf;
-  background: var(--code-background);
+  color: #383a42;
+  background: #fafafa;
   border-radius: 12px;
   border: 1px solid var(--border-color);
   line-height: 1.4;
@@ -32,39 +32,39 @@ hue-6-2: #e6c07b
 
 .hljs-comment,
 .hljs-quote {
-  color: #5c6370;
-  /* font-style: italic; */
+  color: #a0a1a7;
+  font-style: italic;
 }
 
 .hljs-doctag,
 .hljs-keyword,
 .hljs-formula {
-  color: #c678dd;
+  color: #a626a4;
 }
 
 .hljs-section,
 .hljs-name,
 .hljs-selector-tag,
 .hljs-deletion,
 .hljs-subst {
-  color: #e06c75;
+  color: #e45649;
 }
 
 .hljs-literal {
-  color: #56b6c2;
+  color: #0184bb;
 }
 
 .hljs-string,
 .hljs-regexp,
 .hljs-addition,
 .hljs-attribute,
 .hljs-meta-string {
-  color: #98c379;
+  color: #50a14f;
 }
 
 .hljs-built_in,
 .hljs-class .hljs-title {
-  color: #e6c07b;
+  color: #c18401;
 }
 
 .hljs-attr,
@@ -75,7 +75,7 @@ hue-6-2: #e6c07b
 .hljs-selector-attr,
 .hljs-selector-pseudo,
 .hljs-number {
-  color: #d19a66;
+  color: #986801;
 }
 
 .hljs-symbol,
@@ -84,7 +84,7 @@ hue-6-2: #e6c07b
 .hljs-meta,
 .hljs-selector-id,
 .hljs-title {
-  color: #61aeee;
+  color: #4078f2;
 }
 
 .hljs-emphasis {
@@ -99,6 +99,100 @@ hue-6-2: #e6c07b
   text-decoration: underline;
 }
 
+@media (prefers-color-scheme: dark) {
+  .hljs {
+    color: #abb2bf;
+    background: var(--code-background);
+  }
+  /*
+
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+base:    #1e1e1e
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+
+*/
+  .hljs-comment,
+  .hljs-quote {
+    color: #5c6370;
+    /* font-style: italic; */
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #c678dd;
+  }
+
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+    color: #e06c75;
+  }
+
+  .hljs-literal {
+    color: #56b6c2;
+  }
+
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta-string {
+    color: #98c379;
+  }
+
+  .hljs-built_in,
+  .hljs-class .hljs-title {
+    color: #e6c07b;
+  }
+
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #d19a66;
+  }
+
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+    color: #61aeee;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}
+
 .documentation {
   line-height: 1.3;
   font-size: 14px;

diff --git a/apps/frontend/src/stylesheets/main.css b/apps/frontend/src/stylesheets/main.css
@@ -42,6 +42,19 @@ body {
   --hljs-blue: rgba(0, 93, 232, 0.99);
   --hljs-yellow: rgb(219, 168, 0);
   --hljs-green: rgb(0, 168, 8);
+
+  --hljs-base: #fafafa;
+  --hljs-mono-1: #383a42;
+  --hljs-mono-2: #686b77;
+  --hljs-mono-3: #a0a1a7;
+  --hljs-hue-1: #0184bb;
+  --hljs-hue-2: #4078f2;
+  --hljs-hue-3: #a626a4;
+  --hljs-hue-4: #50a14f;
+  --hljs-hue-5: #e45649;
+  --hljs-hue-5-2: #c91243;
+  --hljs-hue-6: #986801;
+  --hljs-hue-6-2: #c18401;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -61,6 +74,19 @@ body {
     --disabled: #444;
     --text-disabled: #555;
     --secondary: #fffbe8;
+
+    --hljs-base: #1e1e1e;
+    --hljs-mono-1: #abb2bf;
+    --hljs-mono-2: #818896;
+    --hljs-mono-3: #5c6370;
+    --hljs-hue-1: #56b6c2;
+    --hljs-hue-2: #61aeee;
+    --hljs-hue-3: #c678dd;
+    --hljs-hue-4: #98c379;
+    --hljs-hue-5: #e06c75;
+    --hljs-hue-5-2: #be5046;
+    --hljs-hue-6: #d19a66;
+    --hljs-hue-6-2: #e6c07b;
   }
 }