From ff46c1816483472c2b478a570dceb3b75be6e783 Mon Sep 17 00:00:00 2001
From: saltycrys <73420320+saltycrys@users.noreply.github.com>
Date: Tue, 17 Nov 2020 22:53:45 +0100
Subject: [PATCH] Move themes into default.css

Now that themes are controlled with a class instead of setting
media="none" on the stylesheet link and both themes already being
duplicated in default.css for the automatic themeing it makes sense
to have all theme related CSS in the same place.

This commit also fixes the missing dark theme on embeds.
---
 assets/css/darktheme.css         | 43 ----------------------
 assets/css/default.css           | 62 ++++++++++++++++++++++++++++++--
 assets/css/lighttheme.css        | 22 ------------
 src/invidious/views/embed.ecr    |  3 +-
 src/invidious/views/template.ecr |  2 --
 5 files changed, 61 insertions(+), 71 deletions(-)
 delete mode 100644 assets/css/darktheme.css
 delete mode 100644 assets/css/lighttheme.css

diff --git a/assets/css/darktheme.css b/assets/css/darktheme.css
deleted file mode 100644
index 45a267cd2..000000000
--- a/assets/css/darktheme.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Dark theme
- * Same as (prefers-color-scheme: dark) in default.css
- */
-
-.dark-theme a:hover,
-.dark-theme a:active {
-  color: rgb(0, 182, 240);
-}
-
-.dark-theme a {
-  color: #a0a0a0;
-  text-decoration: none;
-}
-
-body.dark-theme {
-  background-color: rgba(35, 35, 35, 1);
-  color: #f0f0f0;
-}
-
-.dark-theme .pure-form legend {
-  color: #f0f0f0;
-}
-
-.dark-theme .pure-menu-heading {
-  color: #f0f0f0;
-}
-
-.dark-theme input,
-.dark-theme select,
-.dark-theme textarea {
-  color: rgba(35, 35, 35, 1);
-}
-
-.dark-theme .pure-form input[type="file"] {
-  color: #f0f0f0;
-}
-
-.dark-theme .navbar > .searchbar input {
-  background-color: inherit;
-  color: inherit;
-}
-
diff --git a/assets/css/default.css b/assets/css/default.css
index ccdd7660e..75e168416 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -487,10 +487,26 @@ video.video-js {
 }
 
 /*
- * Automatic theme support
- * Same as lighttheme.css and darktheme.css
+ * Light theme
  */
 
+.light-theme a:hover,
+.light-theme a:active {
+  color: #167ac6 !important;
+}
+
+.light-theme a {
+  color: #61809b;
+  text-decoration: none;
+}
+
+/* All links that do not fit with the default color goes here */
+.light-theme a:not([data-id]) > .icon,
+.light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
+.light-theme .playlist-restricted > ol > li > a {
+  color: #303030;
+}
+
 @media (prefers-color-scheme: light) {
   .no-theme a:hover,
   .no-theme a:active {
@@ -510,6 +526,48 @@ video.video-js {
   }
 }
 
+/*
+ * Dark theme
+ */
+
+.dark-theme a:hover,
+.dark-theme a:active {
+  color: rgb(0, 182, 240);
+}
+
+.dark-theme a {
+  color: #a0a0a0;
+  text-decoration: none;
+}
+
+body.dark-theme {
+  background-color: rgba(35, 35, 35, 1);
+  color: #f0f0f0;
+}
+
+.dark-theme .pure-form legend {
+  color: #f0f0f0;
+}
+
+.dark-theme .pure-menu-heading {
+  color: #f0f0f0;
+}
+
+.dark-theme input,
+.dark-theme select,
+.dark-theme textarea {
+  color: rgba(35, 35, 35, 1);
+}
+
+.dark-theme .pure-form input[type="file"] {
+  color: #f0f0f0;
+}
+
+.dark-theme .navbar > .searchbar input {
+  background-color: inherit;
+  color: inherit;
+}
+
 @media (prefers-color-scheme: dark) {
   .no-theme a:hover,
   .no-theme a:active {
diff --git a/assets/css/lighttheme.css b/assets/css/lighttheme.css
deleted file mode 100644
index 7452180bc..000000000
--- a/assets/css/lighttheme.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * Light theme
- * Same as (prefers-color-scheme: light) in default.css
- */
-
-.light-theme a:hover,
-.light-theme a:active {
-  color: #167ac6 !important;
-}
-
-.light-theme a {
-  color: #61809b;
-  text-decoration: none;
-}
-
-/* All links that do not fit with the default color goes here */
-.light-theme a:not([data-id]) > .icon,
-.light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
-.light-theme .playlist-restricted > ol > li > a {
-  color: #303030;
-}
-
diff --git a/src/invidious/views/embed.ecr b/src/invidious/views/embed.ecr
index 48dbc55f9..dbb860094 100644
--- a/src/invidious/views/embed.ecr
+++ b/src/invidious/views/embed.ecr
@@ -9,12 +9,11 @@
     <link rel="stylesheet" href="/css/videojs-overlay.css?v=<%= ASSET_COMMIT %>">
     <script src="/js/videojs-overlay.min.js?v=<%= ASSET_COMMIT %>"></script>
     <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
-    <link rel="stylesheet" href="/css/darktheme.css?v=<%= ASSET_COMMIT %>">
     <link rel="stylesheet" href="/css/embed.css?v=<%= ASSET_COMMIT %>">
     <title><%= HTML.escape(video.title) %> - Invidious</title>
 </head>
 
-<body>
+<body class="dark-theme">
 <script id="video_data" type="application/json">
 <%=
 {
diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr
index 558f896e4..42067bb47 100644
--- a/src/invidious/views/template.ecr
+++ b/src/invidious/views/template.ecr
@@ -18,8 +18,6 @@
     <link rel="stylesheet" href="/css/grids-responsive-min.css?v=<%= ASSET_COMMIT %>">
     <link rel="stylesheet" href="/css/ionicons.min.css?v=<%= ASSET_COMMIT %>">
     <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
-    <link rel="stylesheet" href="/css/darktheme.css?v=<%= ASSET_COMMIT %>">
-    <link rel="stylesheet" href="/css/lighttheme.css?v=<%= ASSET_COMMIT %>">
 </head>
 
 <% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %>