docs: improve css examples (#1823)

scalar · May 22, 2024 · 49e2c3f · 49e2c3f
1 parent 3b09344
commit 49e2c3f
Showing 1 changed file with 59 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -611,10 +611,12 @@ You can pretty much style everything you see.
 
 To get started, overwrite our CSS variables. We won’t judge.
 
-```
-:root {
-  --scalar-font: 'Comic Sans MS', 'Comic Sans', cursive;
-}
+```html
+<style>
+  :root {
+    --scalar-font: 'Comic Sans MS', 'Comic Sans', cursive;
+  }
+</style>
 ```
 
 > [!NOTE]\
@@ -630,61 +632,65 @@ Here are some basic variables to get you started:
 
 ![basic-scalar-variables](https://github.com/scalar/scalar/assets/6374090/f49256c4-4623-4797-87a1-24bdbc9b17fd)
 
-```
-.light-mode {
-  --scalar-color-1: #121212;
-  --scalar-color-2: rgba(0, 0, 0, 0.6);
-  --scalar-color-3: rgba(0, 0, 0, 0.4);
-  --scalar-color-accent: #0a85d1;
-  --scalar-background-1: #fff;
-  --scalar-background-2: #f6f5f4;
-  --scalar-background-3: #f1ede9;
-  --scalar-background-accent: #5369d20f;
-  --scalar-border-color: rgba(0, 0, 0, 0.08);
-}
-.dark-mode {
-  --scalar-color-1: rgba(255, 255, 255, 0.81);
-  --scalar-color-2: rgba(255, 255, 255, 0.443);
-  --scalar-color-3: rgba(255, 255, 255, 0.282);
-  --scalar-color-accent: #8ab4f8;
-  --scalar-background-1: #202020;
-  --scalar-background-2: #272727;
-  --scalar-background-3: #333333;
-  --scalar-background-accent: #8ab4f81f;
-}
+```html
+<style>
+  .light-mode {
+    --scalar-color-1: #121212;
+    --scalar-color-2: rgba(0, 0, 0, 0.6);
+    --scalar-color-3: rgba(0, 0, 0, 0.4);
+    --scalar-color-accent: #0a85d1;
+    --scalar-background-1: #fff;
+    --scalar-background-2: #f6f5f4;
+    --scalar-background-3: #f1ede9;
+    --scalar-background-accent: #5369d20f;
+    --scalar-border-color: rgba(0, 0, 0, 0.08);
+  }
+  .dark-mode {
+    --scalar-color-1: rgba(255, 255, 255, 0.81);
+    --scalar-color-2: rgba(255, 255, 255, 0.443);
+    --scalar-color-3: rgba(255, 255, 255, 0.282);
+    --scalar-color-accent: #8ab4f8;
+    --scalar-background-1: #202020;
+    --scalar-background-2: #272727;
+    --scalar-background-3: #333333;
+    --scalar-background-accent: #8ab4f81f;
+  }
+</style>
 ```
 
 Or get more advanced by styling our sidebar!
 
 ![scalar-sidebar-variables](https://github.com/scalar/scalar/assets/6374090/5b1f0211-5c09-4092-a882-03d8241ad428)
 
-```
-.light-mode .sidebar {
-  --scalar-sidebar-background-1: var(--scalar-background-1);
-  --scalar-sidebar-item-hover-color: currentColor;
-  --scalar-sidebar-item-hover-background: var(--scalar-background-2);
-  --scalar-sidebar-item-active-background: var(--scalar-background-2);
-  --scalar-sidebar-border-color: var(--scalar-border-color);
-  --scalar-sidebar-color-1: var(--scalar-color-1);
-  --scalar-sidebar-color-2: var(--scalar-color-2);
-  --scalar-sidebar-color-active: var(--scalar-color-2);
-  --scalar-sidebar-search-background: var(--scalar-background-2);
-  --scalar-sidebar-search-border-color: var(--scalar-border-color);
-  --scalar-sidebar-search-color: var(--scalar-color-3);
-}
-.dark-mode .sidebar {
-  --scalar-sidebar-background-1: var(--scalar-background-1);
-  --scalar-sidebar-item-hover-color: currentColor;
-  --scalar-sidebar-item-hover-background: var(--scalar-background-2);
-  --scalar-sidebar-item-active-background: var(--scalar-background-2);
-  --scalar-sidebar-border-color: var(--scalar-border-color);
-  --scalar-sidebar-color-1: var(--scalar-color-1);
-  --scalar-sidebar-color-2: var(--scalar-color-2);
-  --scalar-sidebar-color-active: var(--scalar-color-2);
-  --scalar-sidebar-search-background: var(--scalar-background-2);
-  --scalar-sidebar-search-border-color: var(--scalar-border-color);
-  --scalar-sidebar-search-color: var(--scalar-color-3);
-}
+```html
+<style>
+  .light-mode .sidebar {
+    --scalar-sidebar-background-1: var(--scalar-background-1);
+    --scalar-sidebar-item-hover-color: currentColor;
+    --scalar-sidebar-item-hover-background: var(--scalar-background-2);
+    --scalar-sidebar-item-active-background: var(--scalar-background-2);
+    --scalar-sidebar-border-color: var(--scalar-border-color);
+    --scalar-sidebar-color-1: var(--scalar-color-1);
+    --scalar-sidebar-color-2: var(--scalar-color-2);
+    --scalar-sidebar-color-active: var(--scalar-color-2);
+    --scalar-sidebar-search-background: var(--scalar-background-2);
+    --scalar-sidebar-search-border-color: var(--scalar-border-color);
+    --scalar-sidebar-search-color: var(--scalar-color-3);
+  }
+  .dark-mode .sidebar {
+    --scalar-sidebar-background-1: var(--scalar-background-1);
+    --scalar-sidebar-item-hover-color: currentColor;
+    --scalar-sidebar-item-hover-background: var(--scalar-background-2);
+    --scalar-sidebar-item-active-background: var(--scalar-background-2);
+    --scalar-sidebar-border-color: var(--scalar-border-color);
+    --scalar-sidebar-color-1: var(--scalar-color-1);
+    --scalar-sidebar-color-2: var(--scalar-color-2);
+    --scalar-sidebar-color-active: var(--scalar-color-2);
+    --scalar-sidebar-search-background: var(--scalar-background-2);
+    --scalar-sidebar-search-border-color: var(--scalar-border-color);
+    --scalar-sidebar-search-color: var(--scalar-color-3);
+  }
+</style>
 ```
 
 #### Theme Prefix Changes