Merge pull request #1949 from OffchainLabs/dl/invert

inverts images wrapped in div with calss invert-on-dark

Author: pete-vielhaber

arbitrum-docs/how-arbitrum-works/02-transaction-lifecycle.mdx

@@ -43,15 +43,17 @@ The Sequencer Endpoint is the most direct method for users looking to minimize d
 
 The diagram below shows different ways to submit transactions to the sequencer:
 
-![submit-transaction-to-sequencer](../assets/submit-tx-to-sequencer.png)
+<div class="invert-on-dark">
+  ![submit-transaction-to-sequencer](../assets/submit-tx-to-sequencer.png)
+</div>
 
 ## Bypassing the Sequencer
 
 This section delves into an alternative method for submitting transactions to the Arbitrum chain, bypassing the sequencer. This page focuses on how users can send their transactions directly to the delayed inbox contract on the parent chain rather than through the sequencer. This method offers two distinct paths a transaction can take, with each route interacting with the network differently to achieve transaction inclusion. This approach provides users with greater flexibility and ensures that transactions can still be processed if the sequencer is unavailable or if users choose not to depend on it. This section highlights these alternative submission mechanisms and underscores the robustness and decentralization features inherent in the Arbitrum network.
 
 In **Diagram 3**, we demonstrate how users can submit their transactions using the delayed inbox contract to bypass the sequencer. As illustrated in the diagram, there are two possible paths for transaction handling. When a transaction is submitted to the delayed inbox, the sequencer may automatically pick it up, include it as an ordered transaction, and send it to the sequencer feed. However, if the sequencer does not process the transaction within 24 hours, users have the reliable option to call the `forceInclude` function on the sequencer inbox contract. This action ensures that the sequencer to picks up the transaction and includes it in the ordered transaction list, providing users with a sense of security about their transactions.
 
-![bypassing-the-sequencer](../assets/bypassing-the-sequencer.png)
+<div class="invert-on-dark">![bypassing-the-sequencer](../assets/bypassing-the-sequencer.png)</div>
 
 To send a transaction to the delayed inbox instead of submitting it to the sequencer, users can construct their transaction and then call the [`sendL2Message`](https://github.com/OffchainLabs/nitro-contracts/blob/fbbcef09c95f69decabaced3da683f987902f3e2/src/bridge/AbsInbox.sol#L150) function, passing the data of the serialized signed transaction as an argument. This function allows users to send a generic L2 message to the chain, suitable for any message that does not require L1 validation.
 

arbitrum-docs/how-arbitrum-works/03-sequencer.mdx

@@ -9,7 +9,7 @@ content_type: get-started
 
 The <a data-quicklook-from="sequencer">Sequencer</a> is a pivotal component of the <a data-quicklook-from="arbitrum">Arbitrum</a> network and is responsible for efficiently ordering and processing transactions. It plays a crucial role in providing users with fast <a data-quicklook-from="transaction">Transaction</a> confirmations while maintaining the security and integrity of the <a data-quicklook-from="blockchain">Blockchain</a>. In Arbitrum, the Sequencer orders incoming transactions and manages the batching, compression, and posting of transaction data to <a data-quicklook-from="parent-chain">Parent chain</a>, optimizing costs and performance.
 
-![sequencer-operations](../assets/sequencer-operations.png)
+<div class="invert-on-dark">![sequencer-operations](../assets/sequencer-operations.png)</div>
 
 In this section, we will explore the operation of the Sequencer in detail. The topics covered include:
 
@@ -33,7 +33,7 @@ The Sequencer communicates the transaction sequence through two primary channels
 1. **Real-Time Sequencer Feed**: A live broadcast that publishes transactions instantly as they are sequenced. Nodes and clients subscribed to this feed receive immediate notifications, allowing them to process transactions without delay.
 2. **Batches Posted on the Parent Chain**: At regular intervals, the Sequencer aggregates transactions and posts them to the parent chain for finality. (Refer to the <a data-quicklook-from="batch">Batch</a>-Posting section for detailed information on this process.)
 
-![sequencer-feed](../assets/sequencer-feed.png)
+<div class="invert-on-dark">![sequencer-feed](../assets/sequencer-feed.png)</div>
 
 ### Real-Time Sequencer Feed
 
@@ -75,7 +75,7 @@ Developers and users should design their applications and interactions with thes
 
 ### **Delayed Messages on the Sequencer Feed**
 
-As illustrated in the diagram, the Sequencer feed not only sends <a data-quicklook-from="child-chain">Child chain</a> transactions posted directly to the Sequencer but also incorporates parent chain-submitted child chain transactions. These include L2 messages submitted on L1 and retryable transactions. The Sequencer agent monitors the finalized messages submitted to the parent chain’s <a data-quicklook-from="delayed-inbox">Delayed Inbox</a> Contract. Once finalized, it processes them as incoming messages to the feed, ensuring they are added as ordered transactions.
+As illustrated in the diagram, the Sequencer feed not only sends <a data-quicklook-from="child-chain">Child chain</a> transactions posted directly to the Sequencer but also incorporates parent chain-submitted child chain transactions. These include L2 messages submitted on L1 and retryable transactions. The Sequencer agent monitors the finalized messages submitted to the parent chain's <a data-quicklook-from="delayed-inbox">Delayed Inbox</a> Contract. Once finalized, it processes them as incoming messages to the feed, ensuring they are added as ordered transactions.
 
 It is important to note that the Nitro node can be configured to add delayed inbox transactions immediately after their submission to the parent chain, even before finalization. However, this approach introduces a risk of child chain reorganization if the transaction fails to finalize on the parent chain. To mitigate this risk, on <a data-quicklook-from="arbitrum-one">Arbitrum One</a> and Nova, the Sequencer only includes these transactions in the feed once they are finalized on the Ethereum chain.
 
@@ -97,7 +97,7 @@ Understanding Batch-Posting is essential for grasping how Arbitrum achieves scal
 
 The Sequencer in Arbitrum is critical in collecting and organizing child chain transactions before posting them to the parent chain. The batching process is designed to optimize for both cost efficiency and timely transaction inclusion.
 
-![batching](../assets/batching.png)
+<div class="invert-on-dark">![batching](../assets/batching.png)</div>
 
 **Transaction Collection and Ordering:**
 
@@ -122,7 +122,7 @@ This batching mechanism allows the Sequencer to efficiently manage transactions
 
 The Sequencer employs compression when forming transaction batches to optimize the data and cost of batches posted to the parent chain. Arbitrum uses the Brotli compression algorithm due to its high compression ratio and efficiency, crucial for reducing parent chain posting costs.
 
-![compression](../assets/compression.png)
+<div class="invert-on-dark">![compression](../assets/compression.png)</div>
 
 ### Compression level in the Brotli algorithm
 
@@ -147,7 +147,9 @@ After batching and compressing transactions, the Sequencer posts these batches t
 
 There are two primary methods the Sequencer uses to send batches to the parent chain, depending on whether the chain supports EIP-4844 (Proto-Danksharding) and the current network conditions:
 
-![submit-to-sequencer-inbox](../assets/submit-to-sequencer-inbox.png)
+<div class="invert-on-dark">
+  ![submit-to-sequencer-inbox](../assets/submit-to-sequencer-inbox.png)
+</div>
 
 ### 1. Using Blobs with `addSequencerL2BatchFromBlobs`
 

website/src/css/partials/_darkmode.scss

@@ -64,6 +64,11 @@
       color: white;
     }
   }
+
+  // Invert images wrapped in divs with invert-on-dark class when in dark mode
+  .invert-on-dark img {
+    filter: invert(1);
+  }
 }
 
 [data-theme='light'] {