diff --git a/resources/views/head.blade.php b/resources/views/head.blade.php
index b2db258..30d8100 100644
--- a/resources/views/head.blade.php
+++ b/resources/views/head.blade.php
@@ -1,7 +1,12 @@
 
 <!-- Start of Telescope Toolbar assets !-->
 <script src="{{ route('telescope-toolbar.baseJs') }}?{{ $assetVersion }}"></script>
-<link href="{{ route('telescope-toolbar.styling') }}?{{ $assetVersion }}&lightMode={{ $lightMode }}" rel="stylesheet">
+@if ($lightMode !== 'auto')
+    <link href="{{ route('telescope-toolbar.styling') }}?{{ $assetVersion }}&lightMode={{ $lightMode }}" rel="stylesheet">
+@else
+    <link href="{{ route('telescope-toolbar.styling') }}?{{ $assetVersion }}&lightMode=1" rel="stylesheet">
+    <link href="{{ route('telescope-toolbar.styling') }}?{{ $assetVersion }}&lightMode=0" media="(prefers-color-scheme: dark)" rel="stylesheet">
+@endif
 <script @if(isset($csp_script_nonce) && $csp_script_nonce) nonce="{{ $csp_script_nonce }}" @endif>/*<![CDATA[*/
     (function () {
         @foreach ($requestStack as $request)
diff --git a/src/Toolbar.php b/src/Toolbar.php
index d729236..db46fa8 100644
--- a/src/Toolbar.php
+++ b/src/Toolbar.php
@@ -128,7 +128,8 @@ private function injectToolbar($request, $response)
 
         $head = View::make('telescope-toolbar::head', [
             'assetVersion' => static::ASSET_VERSION,
-            'lightMode' => config('telescope-toolbar.light_theme') ? 1 : 0,
+            'lightMode' => config('telescope-toolbar.light_theme') === 'auto' ? 'auto'
+                        : (config('telescope-toolbar.light_theme') ? 1 : 0),
             'requestStack' => $this->getRequestStack($request, $response),
         ])->render();