README

tempestphp · Mar 27, 2024 · 12fe5e1 · 12fe5e1
1 parent d78ba50
commit 12fe5e1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -52,70 +52,10 @@ For HTML rendering, you can use one of the provided themes that comes with this
 
 ```css
 @import "../vendor/tempest/highlight/src/Themes/highlight-light-lite.css";
+@import "../vendor/tempest/highlight/src/Themes/highlight-dark-lite.css";
 ```
 
-You can build your own CSS theme with just a couple of classes:
-
-```css
-.hl-keyword {
-    color: #4F95D1;
-}
-
-.hl-property {
-    color: #46b98d;
-}
-
-.hl-attribute {
-    font-style: italic;
-}
-
-.hl-type {
-    color: #D14F57;
-}
-
-.hl-generic {
-    color: #9D3AF6;
-}
-
-.hl-value {
-  color: #000;
-}
-
-.hl-variable {
-  color: #000;
-}
-
-.hl-comment span,
-.hl-comment {
-    color: #888888;
-}
-
-.hl-blur {
-    filter: blur(2px);
-}
-
-.hl-strong {
-    font-weight: bold;
-}
-
-.hl-em {
-    font-style: italic;
-}
-
-.hl-addition {
-    display: inline-block;
-    min-width: 100%;
-    background-color: #00FF0033;
-}
-
-.hl-deletion {
-    display: inline-block;
-    min-width: 100%;
-    background-color: #FF000022;
-}
-```
-
-Note that `pre` tag styling isn't included in this package.
+You can build your own CSS theme with just a couple of classes, copy over [the base stylesheet](./src/Themes/highlight-light-lite.css), and make adjustments however you like. Note that `pre` tag styling isn't included in this package.
 
 ### For the terminal
 

diff --git a/src/Themes/highlight-light-lite.css b/src/Themes/highlight-light-lite.css
@@ -1,46 +1,39 @@
-:root {
-    --background-color: #f3f3f3;
-    --text-color: #000;
-    --keyword-color: #4285F4;
-    --property-color: #34A853;
-    --type-color: #EA4334;
-    --generic-color: #9d3af6;
-    --value-color: #000;
-    --variable-color: #000;
-    --comment-color: #888888;
+pre, code {
+    color: #000;
+    background-color: #f3f3f3;
 }
 
 .hl-keyword {
-    color: var(--keyword-color);
+    color: #4285F4;
 }
 
 .hl-property {
-    color: var(--property-color);
+    color: #34A853;
 }
 
 .hl-attribute {
-    font-family: "Radon", inherit, monospace;
+    font-style: italic;
 }
 
 .hl-type {
-    color: var(--type-color);
+    color: #EA4334;
 }
 
 .hl-generic {
-    color: var(--generic-color);
+    color: #9d3af6;
 }
 
 .hl-value {
-    color: var(--value-color);
+    color: #000;
 }
 
 .hl-variable {
-    color: var(--variable-color);
+    color: #000;
 }
 
 .hl-comment span,
 .hl-comment {
-    color: var(--comment-color);
+    color: #888888;
 }
 
 .hl-blur {

diff --git a/tests/index.php b/tests/index.php
@@ -46,20 +46,17 @@
             overflow-x: scroll;
             line-height: 1.8em;
             font-family: "JetBrains Mono", monospace;
+            padding: .1em;
         }
 
         .hl {
             margin: 3em auto;
             box-shadow: 0 0 10px 0 #00000044;
             padding: 1em 2em;
             /*background-color: #fafafa;*/
-            background-color: var(--background-color);
-            color: var(--text-color);
             border-radius: 3px;
-        }
-
-        .hl-injection {
-            /*background-color: #00ffff22;*/
+            color: #000;
+            background-color: #f3f3f3;
         }
 
         .container {