Additions to developer theme docs (#34)

* background-filter warning

* note os accent color and variable overrides

* text-wrap pretty

* support light themed codeblocks

Author: TheCommieAxolotl

.vitepress/config.ts

@@ -142,7 +142,7 @@ const VITEPRESS_CONFIG: UserConfig<DefaultTheme.Config> = {
 
             await shiki.loadLanguage(bdcss);
         },
-        theme: "dark-plus",
+        theme: {dark: "dark-plus", light: "light-plus"},
         config: (md) => {
             md.use(groupIconMdPlugin);
         }

.vitepress/theme/custom.css

@@ -27,6 +27,10 @@ span.line .global-bdapi {
     }
 }
 
+.vp-doc p {
+    text-wrap: pretty;
+}
+
 
 /* TODO: poll this */
 /* .vp-doc a.header-anchor {

docs/themes/intermediate/transparency.md

@@ -24,6 +24,8 @@ You'll see that suddenly you can partially see your desktop through the Discord
 
 You can also consider making just part of your theme see-through by keeping one section completely opaque. It adds an interesting dichotomy and a unique feel to your theme.
 
+Note that using `backdrop-filter` above a transparent window will **not** blur anything behind it. It will only blur the elements within the Discord client itself, and on some platforms may leave some unpleasant rendering artifacts.
+
 ## Builder
 
 If you really just want to make a theme where you have a background image, or to see through to your desktop, don't fire up your editor just yet. A community member has made a theme builder than can take existing BetterDiscord themes and customize them as you see fit, including adding background images or making them see-through to the desktop. For more information check out the website here: [https://bdeditor.dev/](https://bdeditor.dev/)

docs/themes/intermediate/user.md

@@ -12,6 +12,8 @@ Letting users configure your theme to their personal preference is one of the mo
 
 If you weren't already aware, CSS variables (sometimes known as custom properties), are a way to reuse the same values over and over while making them easily changeable later. MDN, of course, has [a great article](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) on this. The best way to use these is to find values that you reuse over and over in your theme and turn them into a custom property you can change later. One of the most common use-cases in a theme is for the theme's main accent color. They're also frequently used for background colors and sizing of different elements. Every theme is a bit different in that regard, but they all follow the same general rule of thumb: If it's something you're doing repeatedly and consistently, making it a variable makes it easy to change later for both the end-users as well as for you.
 
+For example, BetterDiscord already offers a variable that you can use in your themes. It's called `--os-accent-color`. This variable represents the accent color of the user's operating system. This is useful for making your theme feel more native to the user's system. 
+
 ### How can I use them?
 
 Using CSS variables in BetterDiscord is exactly like in regular CSS. Simply declare it somewhere high in the document tree and reuse it in your theme. At a glace it might look something like this:
@@ -40,7 +42,7 @@ h1 {
 }
 ```
 
-It is very important to note that these cannot be used as properties or part of media queries. That is to say, both of these below are invalid.
+It is very important to note that the `var()` syntax cannot be used as properties or part of media queries. That is to say, both of these below are invalid.
 
 ```css
 :root {
@@ -59,6 +61,24 @@ h1 {
 }
 ```
 
+However, you can *override* variables in any selector. This means you can set a variable in `:root` and then override it in descendant selectors. This can be useful for when you want to change a variable for a specific part of the UI.
+
+```css
+:root {
+  --my-variable: red;
+}
+
+h1, h2 {
+  color: var(--my-variable);
+}
+
+h2 {
+  --my-variable: blue;
+}
+```
+
+In this case, `h1` will be red and `h2` will be blue.
+
 ### Special Cases
 
 #### Fallback