diff --git a/docs/docs/guides/FRAME_PROCESSORS_CREATE_OVERVIEW.mdx b/docs/docs/guides/FRAME_PROCESSORS_CREATE_OVERVIEW.mdx
index 4eea187..fb362b1 100644
--- a/docs/docs/guides/FRAME_PROCESSORS_CREATE_OVERVIEW.mdx
+++ b/docs/docs/guides/FRAME_PROCESSORS_CREATE_OVERVIEW.mdx
@@ -14,10 +14,11 @@ Frame Processor Plugins are **native functions** which can be directly called fr
 
 They receive a frame from the Camera as an input and can return any kind of output. For example, a `detectFaces` function returns an array of detected faces in the frame:
 
-```tsx {4-5}
+```tsx
 function App() {
   const frameProcessor = useFrameProcessor((frame) => {
     'worklet'
+    // highlight-next-line
     const faces = detectFaces(frame)
     console.log(`Faces in Frame: ${faces}`)
   }, [])
diff --git a/docs/docs/guides/FRAME_PROCESSOR_CREATE_FINAL.mdx b/docs/docs/guides/FRAME_PROCESSOR_CREATE_FINAL.mdx
index 1acbdeb..c8ad4f6 100644
--- a/docs/docs/guides/FRAME_PROCESSOR_CREATE_FINAL.mdx
+++ b/docs/docs/guides/FRAME_PROCESSOR_CREATE_FINAL.mdx
@@ -26,10 +26,11 @@ export function scanFaces(frame: Frame): object {
 
 Simply call the wrapper Worklet in your Frame Processor:
 
-```tsx {4}
+```tsx
 function App() {
   const frameProcessor = useFrameProcessor((frame) => {
     'worklet'
+    // highlight-next-line
     const faces = scanFaces(frame)
     console.log(`Faces in Frame: ${faces}`)
   }, [])
diff --git a/docs/docs/guides/FRAME_PROCESSOR_CREATE_PLUGIN_ANDROID.mdx b/docs/docs/guides/FRAME_PROCESSOR_CREATE_PLUGIN_ANDROID.mdx
index cdd9fd8..2cd3b67 100644
--- a/docs/docs/guides/FRAME_PROCESSOR_CREATE_PLUGIN_ANDROID.mdx
+++ b/docs/docs/guides/FRAME_PROCESSOR_CREATE_PLUGIN_ANDROID.mdx
@@ -29,12 +29,13 @@ For reference see the [CLI's docs](https://github.com/mateusz1913/vision-camera-
 
 2. Register the package in MainApplication.java
 
-```java {6}
+```java
         @Override
         protected List<ReactPackage> getPackages() {
           @SuppressWarnings("UnnecessaryLocalVariable")
           List<ReactPackage> packages = new PackageList(this).getPackages();
           ...
+          // highlight-next-line
           packages.add(new FaceDetectorFrameProcessorPluginPackage()); // <- add
           return packages;
         }
@@ -54,7 +55,7 @@ For reference see the [CLI's docs](https://github.com/mateusz1913/vision-camera-
 2. Create a Java source file, for the Face Detector Plugin this will be called `FaceDetectorFrameProcessorPlugin.java`.
 3. Add the following code:
 
-```java {8}
+```java
 import com.mrousavy.camera.frameprocessor.Frame;
 import com.mrousavy.camera.frameprocessor.FrameProcessorPlugin;
 
@@ -75,7 +76,7 @@ The Frame Processor Plugin will be exposed to JS through the `VisionCameraProxy`
 4. **Implement your Frame Processing.** See the [Example Plugin (Java)](https://github.com/mrousavy/react-native-vision-camera/blob/main/package/example/android/app/src/main/java/com/mrousavy/camera/example/ExampleFrameProcessorPlugin.java) for reference.
 5. Create a new Java file which registers the Frame Processor Plugin in a React Package, for the Face Detector plugin this file will be called `FaceDetectorFrameProcessorPluginPackage.java`:
 
-```java {13}
+```java
 import com.facebook.react.ReactPackage;
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
@@ -85,10 +86,15 @@ import com.mrousavy.camera.frameprocessor.FrameProcessorPluginRegistry;
 import javax.annotation.Nonnull;
 
 public class FaceDetectorFrameProcessorPluginPackage implements ReactPackage {
+  FaceDetectorFrameProcessorPluginPackage() {
+    // highlight-start
+    FrameProcessorPluginRegistry.addFrameProcessorPlugin("detectFaces", options -> new FaceDetectorFrameProcessorPlugin());
+    // highlight-end
+  }
+
   @NonNull
   @Override
   public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
-    FrameProcessorPluginRegistry.addFrameProcessorPlugin("detectFaces", options -> new FaceDetectorFrameProcessorPlugin());
     return Collections.emptyList();
   }
 
@@ -102,12 +108,13 @@ public class FaceDetectorFrameProcessorPluginPackage implements ReactPackage {
 
 6. Register the package in MainApplication.java
 
-```java {6}
+```java
         @Override
         protected List<ReactPackage> getPackages() {
           @SuppressWarnings("UnnecessaryLocalVariable")
           List<ReactPackage> packages = new PackageList(this).getPackages();
           ...
+          // highlight-next-line
           packages.add(new FaceDetectorFrameProcessorPluginPackage()); // <- add
           return packages;
         }
@@ -120,7 +127,7 @@ public class FaceDetectorFrameProcessorPluginPackage implements ReactPackage {
 2. Create a Kotlin source file, for the Face Detector Plugin this will be called `FaceDetectorFrameProcessorPlugin.kt`.
 3. Add the following code:
 
-```kotlin {7}
+```kotlin
 import com.mrousavy.camera.frameprocessor.Frame
 import com.mrousavy.camera.frameprocessor.FrameProcessorPlugin
 
@@ -140,7 +147,7 @@ The Frame Processor Plugin will be exposed to JS through the `VisionCameraProxy`
 4. **Implement your Frame Processing.** See the [Example Plugin (Java)](https://github.com/mrousavy/react-native-vision-camera/blob/main/package/example/android/app/src/main/java/com/mrousavy/camera/example/ExampleFrameProcessorPlugin.java) for reference.
 5. Create a new Kotlin file which registers the Frame Processor Plugin in a React Package, for the Face Detector plugin this file will be called `FaceDetectorFrameProcessorPluginPackage.kt`:
 
-```kotlin {9-11}
+```kotlin
 import com.facebook.react.ReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
@@ -148,10 +155,15 @@ import com.facebook.react.uimanager.ViewManager
 import com.mrousavy.camera.frameprocessor.FrameProcessorPlugin
 
 class FaceDetectorFrameProcessorPluginPackage : ReactPackage {
-  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+  init {
+    // highlight-start
     FrameProcessorPluginRegistry.addFrameProcessorPlugin("detectFaces") { options ->
       FaceDetectorFrameProcessorPlugin()
     }
+    // highlight-end
+  }
+
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
     return emptyList()
   }
 
@@ -163,12 +175,13 @@ class FaceDetectorFrameProcessorPluginPackage : ReactPackage {
 
 6. Register the package in MainApplication.java
 
-```java {6}
+```java
         @Override
         protected List<ReactPackage> getPackages() {
           @SuppressWarnings("UnnecessaryLocalVariable")
           List<ReactPackage> packages = new PackageList(this).getPackages();
           ...
+          // highlight-next-line
           packages.add(new FaceDetectorFrameProcessorPluginPackage()); // <- add
           return packages;
         }
diff --git a/docs/docs/guides/FRAME_PROCESSOR_CREATE_PLUGIN_IOS.mdx b/docs/docs/guides/FRAME_PROCESSOR_CREATE_PLUGIN_IOS.mdx
index 5097c05..be5a7a4 100644
--- a/docs/docs/guides/FRAME_PROCESSOR_CREATE_PLUGIN_IOS.mdx
+++ b/docs/docs/guides/FRAME_PROCESSOR_CREATE_PLUGIN_IOS.mdx
@@ -118,15 +118,17 @@ public class FaceDetectorFrameProcessorPlugin: FrameProcessorPlugin {
 
 6. In your `AppDelegate.m`, add the following code to `application:didFinishLaunchingWithOptions:`:
 
-```objc {5-8}
+```objc
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  ...
+  // ...
 
+  // hightlight-start
   [FrameProcessorPluginRegistry addFrameProcessorPlugin:@"detectFaces"
                                         withInitializer:^FrameProcessorPlugin*(NSDictionary* options) {
     return [[FaceDetectorFrameProcessorPlugin alloc] initWithOptions:options];
   }];
+  // hightlight-end
 
   return [super application:application didFinishLaunchingWithOptions:launchOptions];
 }
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 3fad956..119069b 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -7,17 +7,16 @@
 
 /* You can override the default Infima variables here. */
 :root {
+  --docusaurus-highlighted-code-line-bg: rgb(229, 229, 232);
   --ifm-color-primary: rgb(132, 170, 124);
   --ifm-link-color: rgb(62, 166, 41);
   --ifm-code-font-size: 95%;
   --highlight-color: rgb(118, 228, 97);
 }
 
-.docusaurus-highlight-code-line {
-  background-color: rgb(72, 77, 91);
-  display: flex;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
+[data-theme='dark'] {
+  /* Color which works with dark mode syntax highlighting theme */
+  --docusaurus-highlighted-code-line-bg: rgb(61, 63, 67);
 }
 
 img {