Light mode for Bevy website -- draft PR

TODOs.md

@@ -0,0 +1,38 @@
+TODOs for the light mode theme:
+
+- [x] Invert SVGs
+- [x] Invert most images
+- [x] Get body text legible
+- [x] Get all text legible
+- [x] Remove un-necessary `-inverted.svg` files
+- [x] Fix images:
+    - [x] Hamburger menu
+    - [x] /404.html
+    - [x] news
+	      - [x] news/introducing-bevy/
+        - [x] and other instances of `bevy_logo_dark.svg`.
+        - [x] charts on ~~news/bevy-0-2/, 0-3/, 0-4/, 0-5/, 0-6/, 0-8/, 0-12/~~, 
+        - [x] news/community-reflection-on-bevys-third-year/
+   - [x] frontmatter
+       - Rather than individually addressing each image, I simply changed the CSS
+       - [ ] ~~bevy birthday~~
+       - [ ] ~~scaling bevy~~
+       - [ ] ~~webgpu.svg~~
+       - [ ] ~~foundation~~
+- [x] Give the colors another pass; make it look good!
+    - [x] Donate page
+    - [x] Error/Warn/Info boxes
+    - [x] The rest!
+- [x] Merge in from `main`
+- [x] Check new pages:
+    - [x] Bevy fourth birthday
+    - [x] `contributing/`
+    - [x] Generate assets and look through those, too
+        - [x] generate_assets
+        - [x] generate_examples
+        - [x] generate_errors
+- [ ] Update preview
+- [ ] Theme toggle: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
+    - [ ] Make MVP as separate project: Three-state Javascript toggle, defaults to dark, except without JS, defaults to prefers-system color scheme
+    - [ ] Retrofit into existing theme
+- [ ] Ping BD103 on the PR once it's ready:

content/news/2020-08-10-introducing-bevy/index.md

@@ -162,11 +162,11 @@ Bevy ECS does both of these things about as well as it can. According to the pop
 
 #### System Iteration (in nanoseconds, less is better)
 
-![ecs iter performance graph](ecs_iter.svg)
+<img alt="ecs iter performance graph" src="ecs_iter.svg" class="inverted">
 
 #### World Setup (in nanoseconds, less is better)
 
-![ecs iter performance graph](ecs_build.svg)
+<img alt="ecs iter performance graph" src="ecs_build.svg" class="inverted">
 
 Note that `ecs_bench` is a single threaded benchmark, so it doesn't illustrate the multi-threading capabilities of these framework. And as always, please be aware that `ecs_bench` is a micro benchmark and it doesn't illustrate the performance of a complex game. There is a lot of nuance in the ECS performance space and each of the ECS implementations above will perform differently under different workloads.
 
@@ -1198,4 +1198,4 @@ If any of this sounds interesting to you, I encourage you to check out [Bevy on
 
 I want Bevy to become a vibrant developer community ... thats actually why I chose the name! A Bevy is a group of birds, just like we are a group of game developers. Join the Bevy!
 
-<img src="/assets/bevy_logo_dark.svg" style="height: 4.0rem; margin-top: 2.0rem" />
+<img src="/assets/bevy_logo_dark.svg" style="height: 4.0rem; margin-top: 2.0rem" class="inverted"/>

content/news/2020-09-19-bevy-0.2/index.md

@@ -32,11 +32,11 @@ We decided to resolve this problem by building a custom async-friendly task syst
 
 ### Total Combined Percent CPU Usage - 8 Core Machine (smaller is better)
 
-![threading cpu usage 8 core](bevy_tasks_1.svg)
+<img alt="threading cpu usage 8 core" src="bevy_tasks_1.svg" class="inverted">
 
 ### Total Combined Percent CPU Usage - 32 Core Machine (smaller is better)
 
-![threading cpu usage 32 core](bevy_tasks_2.svg)
+<img alt="threading cpu usage 32 core" src="bevy_tasks_2.svg" class="inverted">
 
 ## Initial Web Platform Support
 

content/news/2020-11-03-bevy-0.3/index.md

@@ -279,7 +279,7 @@ Bevy had a number of nice performance improvements this release:
 
 Note: these numbers are for getting a component 100,000 times, not for an individual component lookup
 
-![getting an entity's component](ecs_get_component.svg)
+<img alt="getting an entity's component" src="ecs_get_component.svg" class="inverted">
 
 This is where the big wins were. By removing locks and safety checks from Query systems, we were able to _significantly_ reduce the cost of retrieving a specific entity's component from within a system.
 
@@ -300,15 +300,15 @@ Additionally, here are some relevant [ecs_bench_suite](https://github.com/rust-g
 
 #### Component Insertion (in microseconds, smaller is better)
 
-![component insertion](ecs_simple_insert.svg)
+<img alt="component insertion" src="ecs_simple_insert.svg" class="inverted">
 
 #### Component Add/Remove (in milliseconds, smaller is better)
 
-![component add/remove](ecs_add_remove.svg)
+<img alt="component add/remove" src="ecs_add_remove.svg" class="inverted">
 
 #### Fragmented Iteration (in nanoseconds, smaller is better)
 
-![fragmented iteration](ecs_frag_iter.svg)
+<img alt="fragmented iteration" src="ecs_frag_iter.svg" class="inverted">
 
 ### Thread Local Resources
 

content/news/2020-12-19-bevy-0.4/index.md

@@ -463,7 +463,7 @@ This _significantly_ reduces iterative compile times. Check out how long it take
 
 ### Time To Compile Change To 3d_scene Example (in seconds, less is better)
 
-![fast_compiles](fast_compiles.svg)
+<img alt="fast_compiles" src="fast_compiles.svg" class="inverted">
 
 We added a cargo feature to easily enable dynamic linking during development
 
@@ -513,19 +513,19 @@ For the first optimization round, I incrementalized as much as I could:
 
 #### Frame Time to Draw 10,000 Static Sprites (in milliseconds, less is better)
 
-![bevy_round1_static](bevy_round1_static.svg)
+<img alt="bevy_round1_static" src="bevy_round1_static.svg" class="inverted">
 
 #### Frame Time to Draw 10,000 Moving Sprites (in milliseconds, less is better)
 
-![bevy_round1_dynamic](bevy_round1_dynamic.svg)
+<img alt="bevy_round1_dynamic" src="bevy_round1_dynamic.svg" class="inverted">
 
 ### Optimize Text Rendering (and other immediate rendering)
 
 Text Rendering (and anything else that used the `SharedBuffers` immediate-rendering abstraction) was _extremely_ slow in prior Bevy releases. This was because the `SharedBuffers` abstraction was a placeholder implementation that didn't actually share buffers. By implementing the "real" `SharedBuffers` abstraction, we got a pretty significant text rendering speed boost.
 
 #### Frame Time to Draw "text_debug" Example  (in milliseconds, less is better)
 
-![text_rendering](text_rendering.svg)
+<img alt="text_rendering" src="text_rendering.svg" class="inverted">
 
 ### Mailbox Vsync
 

content/news/2021-04-06-bevy-0.5/index.md

@@ -147,7 +147,7 @@ app.register_component(
 
 This benchmark illustrates adding and removing a single 4x4 matrix component 10,000 times from an entity that has 5 other 4x4 matrix components. The "other" components are included to help illustrate the cost of "table storage" (used by Bevy 0.4, Bevy 0.5 (Table), and Legion), which requires moving the "other" components to a new table.
 
-![component add/remove](add_remove_big.svg)
+<img alt="component add/remove" src="add_remove_big.svg" class="inverted">
 
 You may have noticed that **Bevy 0.5 (Table)** is also _way_ faster than **Bevy 0.4**, even though they both use "table storage". This is largely a result of the new [Archetype Graph](https://github.com/bevyengine/bevy/pull/1525), which significantly cuts the cost of archetype changes.
 
@@ -181,15 +181,15 @@ We have achieved some pretty significant performance wins as a result of the new
 
 This benchmark runs a query that matches 5 entities within a single archetype and _doesn't_ match 100 other archetypes. This is a reasonable test of "real world" queries in games, which generally have many different entity "types", most of which _don't_ match a given query. This test uses "table storage" across the board.
 
-![sparse_frag_iter](sparse_frag_iter.svg)
+<img alt="sparse_frag_iter" src="sparse_frag_iter.svg" class="inverted">
 
 **Bevy 0.5** marks a huge improvement for cases like this, thanks to the new "stateful queries". **Bevy 0.4** needs to check every archetype each time the iterator is run, whereas **Bevy 0.5** amortizes that cost to zero.
 
 #### Fragmented Iterator Benchmark (in milliseconds, less is better)
 
 This is the [ecs_bench_suite](https://github.com/rust-gamedev/ecs_bench_suite) `frag_iter` benchmark. It runs a query on 27 archetypes with 20 entities each. However unlike the "Sparse Fragmented Iterator Benchmark", there are no "unmatched" archetypes. This test uses "table storage" across the board.
 
-![frag_iter](frag_iter.svg)
+<img alt="frag_iter" src="frag_iter.svg" class="inverted">
 
 The gains here compared to the last benchmark are smaller because there aren't any unmatched archetypes. However **Bevy 0.5** still gets a nice boost due to better iterator/query impls, amortizing the cost of matched archetypes to zero, and for_each iterators.
 

content/news/2022-01-08-bevy-0.6/index.md

@@ -105,7 +105,7 @@ As a quick callout, pipelined rendering doesn't _actually_ happen in parallel ye
 
 <div class="release-feature-authors">authors: @cart</div>
 
-![render graph](render_graph.svg)
+<img alt="render graph" src="render_graph.svg" class="inverted">
 
 The New Bevy Renderer has a Render Graph, [much like the old Bevy renderer](/news/introducing-bevy/#render-graph). Render Graphs are a way to logically model GPU command construction in a modular way. Graph Nodes pass GPU resources like Textures and Buffers (and sometimes Entities) to each other, forming a directed acyclic graph. When a Graph Node runs, it uses its graph inputs and the Render World to construct GPU command lists.
 
@@ -215,7 +215,7 @@ We also have big plans to make [`Material`] even better:
 
 <div class="release-feature-authors">authors: Rob Swain (@superdump)</div>
 
-[![view frustum](ViewFrustum.svg)](https://en.wikipedia.org/wiki/Viewing_frustum#/media/File:ViewFrustum.svg)
+[<img alt="view frustum" src="ViewFrustum.svg" class="inverted">](https://en.wikipedia.org/wiki/Viewing_frustum#/media/File:ViewFrustum.svg)
 
 Drawing things is expensive! It requires writing data from the CPU to the GPU, constructing draw calls, and running shaders. We can save a lot of time by _not_ drawing things that the camera can't see. "Frustum culling" is the act of excluding objects that are outside the bounds of the camera's "view frustum", to avoid wasting work drawing them. For large scenes, this can be the difference between a crisp 60 frames per second and chugging to a grinding halt.
 

content/news/2022-07-30-bevy-0.8/index.md

@@ -542,7 +542,7 @@ When possible, **Bevy 0.8** now uses "unstable sorts" (currently "radix sort"),
 
 ### many_cubes stress test "opaque phase" sort times (in milliseconds, less is better)
 
-![unstable sort](unstable_sort.svg)
+<img alt="unstable sort" src="unstable_sort.svg" class="inverted">
 
 ## Vertex Colors
 
@@ -744,7 +744,7 @@ This new representation sped up schedule construction by ~30%!
 
 ### time to prepare and compute schedule with 100 systems (in milliseconds, less is better)
 
-![label bench](label_bench.svg)
+<img alt="label bench" src="label_bench.svg" class="inverted">
 
 This change also removed a number of trait requirements from our label derives:
 

content/news/2023-09-21-community-reflection-on-bevys-third-year/index.md

@@ -57,4 +57,4 @@ Here is to another year of Bevy!
 
 \- [@cart](https://github.com/cart/)
 
-<img src="/assets/bevy_logo_dark.svg" style="height: 4.0rem; margin-top: 1.5rem" />
+<img src="/assets/bevy_logo_dark.svg" style="height: 4.0rem; margin-top: 1.5rem" class="inverted"/>

content/news/2023-11-04-bevy-0.12/index.md

@@ -202,7 +202,7 @@ Most existing user-facing asset code will either require no changes at all, or m
 
 ### Asset Preprocessing
 
-![image process diagram](image_process.png)
+<img alt="image process diagram" src="image_process.png" class="inverted">
 
 Asset preprocessing is the ability to take an input asset of a given type, process it in some way (generally during development time), and then use the result as the final asset in your application. Think of it as an "asset compiler".
 

sass/_mixins.scss

@@ -3,11 +3,11 @@
   overflow: hidden;
   border-radius: $border-radius;
   border: 2px solid #383838;
-  background-color: $syntax-theme-background;
+  background-color: var(--alt-syntax-theme-background);
   text-decoration: none;
 
   &:hover {
-    background-color: $card-hover-background;
+    background-color: var(--card-hover-background);
     border: 2px solid #6b6b6b;
   }
 }
@@ -55,7 +55,7 @@
 
 @mixin scrollbar-v {
   $track-width: 4px;
-  $thumb-color: rgba($color-white, 0.2);
+  $thumb-color: rgba(var(--color-white), 0.2);
 
   scrollbar-width: thin;
   scrollbar-color: $thumb-color transparent;