[Sync confirmation] Move dark mode css till the end to get precedence

This CL fixes a regression that (for both the old and the new design),
light mode illustrations are used when in dark mode. This happened
by moving the dark mode css into one selector in the beginning. This
CL moves that till the end of the css to get precedence over the
light mode css specified before.

Bug: 1167092
Change-Id: I04783bb5aa34794c107cc846017accb140dea692
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2632680
Auto-Submit: Jan Krcal <jkrcal@chromium.org>
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#844992}

chrome/browser/resources/signin/sync_confirmation/sync_confirmation_app.html

@@ -8,20 +8,6 @@
     display: block;
   }
 
-  @media (prefers-color-scheme: dark) {
-    /* Old design */
-    #illustration {
-      background-image:
-          url(./images/sync_confirmation_illustration_dark.svg);
-    }
-
-    /* New design */
-    #syncPromoBanner {
-      background-image:
-          url(images/sync_confirmation_refreshed_illustration_dark.svg);
-    }
-  }
-
   .secondary {
     color: var(--cr-secondary-text-color);
   }
@@ -196,6 +182,20 @@
   #actionContainer #notNowButton {
     font-weight: normal;
   }
+
+  @media (prefers-color-scheme: dark) {
+    /* Old design */
+    #illustration {
+      background-image:
+          url(./images/sync_confirmation_illustration_dark.svg);
+    }
+
+    /* New design */
+    #syncPromoBanner {
+      background-image:
+          url(images/sync_confirmation_refreshed_illustration_dark.svg);
+    }
+  }
 </style>
 
 <!--