summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/darktheme.css37
-rw-r--r--assets/css/default.css143
-rw-r--r--assets/css/lighttheme.css16
-rw-r--r--assets/js/themes.js15
-rw-r--r--src/invidious/views/embed.ecr3
-rw-r--r--src/invidious/views/template.ecr5
6 files changed, 152 insertions, 67 deletions
diff --git a/assets/css/darktheme.css b/assets/css/darktheme.css
deleted file mode 100644
index 92da15b6..00000000
--- a/assets/css/darktheme.css
+++ /dev/null
@@ -1,37 +0,0 @@
-a:hover,
-a:active {
- color: rgb(0, 182, 240);
-}
-
-a {
- color: #a0a0a0;
- text-decoration: none;
-}
-
-body {
- background-color: rgba(35, 35, 35, 1);
- color: #f0f0f0;
-}
-
-.pure-form legend {
- color: #f0f0f0;
-}
-
-.pure-menu-heading {
- color: #f0f0f0;
-}
-
-input,
-select,
-textarea {
- color: rgba(35, 35, 35, 1);
-}
-
-.pure-form input[type="file"] {
- color: #f0f0f0;
-}
-
-.navbar > .searchbar input {
- background-color: inherit;
- color: inherit;
-}
diff --git a/assets/css/default.css b/assets/css/default.css
index b7a77be6..c26b0a3e 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -20,7 +20,7 @@ body {
height: auto;
}
-.channel-owner {
+body a.channel-owner {
background-color: #008bec;
color: #fff;
border-radius: 9px;
@@ -101,15 +101,19 @@ div {
padding-right: 10px;
}
+body a.pure-button {
+ color: rgba(0,0,0,.8);
+}
+
button.pure-button-primary,
-a.pure-button-primary,
+body a.pure-button-primary,
.channel-owner:hover {
background-color: #a0a0a0;
color: rgba(35, 35, 35, 1);
}
button.pure-button-primary:hover,
-a.pure-button-primary:hover {
+body a.pure-button-primary:hover {
background-color: rgba(0, 182, 240, 1);
color: #fff;
}
@@ -282,7 +286,7 @@ input[type="search"]::-webkit-search-cancel-button {
text-align: center;
}
-.footer a {
+body .footer a {
color: inherit;
text-decoration: underline;
}
@@ -485,3 +489,134 @@ video.video-js {
margin-top: -0.81666em;
margin-left: -1.5em;
}
+
+/*
+ * 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;
+}
+
+.light-theme .pure-menu-heading {
+ color: #565d64;
+}
+
+@media (prefers-color-scheme: light) {
+ .no-theme a:hover,
+ .no-theme a:active {
+ color: #167ac6 !important;
+ }
+
+ .no-theme a {
+ color: #61809b;
+ text-decoration: none;
+ }
+
+ /* All links that do not fit with the default color goes here */
+ .no-theme a:not([data-id]) > .icon,
+ .no-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
+ .no-theme .playlist-restricted > ol > li > a {
+ color: #303030;
+ }
+
+ .light-theme .pure-menu-heading {
+ color: #565d64;
+ }
+}
+
+/*
+ * 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 {
+ color: rgb(0, 182, 240);
+ }
+
+ .no-theme a {
+ color: #a0a0a0;
+ text-decoration: none;
+ }
+
+ body.no-theme {
+ background-color: rgba(35, 35, 35, 1);
+ color: #f0f0f0;
+ }
+
+ .no-theme .pure-form legend {
+ color: #f0f0f0;
+ }
+
+ .no-theme .pure-menu-heading {
+ color: #f0f0f0;
+ }
+
+ .no-theme input,
+ .no-theme select,
+ .no-theme textarea {
+ color: rgba(35, 35, 35, 1);
+ }
+
+ .no-theme .pure-form input[type="file"] {
+ color: #f0f0f0;
+ }
+
+ .no-theme .navbar > .searchbar input {
+ background-color: inherit;
+ color: inherit;
+ }
+}
+
diff --git a/assets/css/lighttheme.css b/assets/css/lighttheme.css
deleted file mode 100644
index 73706bb7..00000000
--- a/assets/css/lighttheme.css
+++ /dev/null
@@ -1,16 +0,0 @@
-a:hover,
-a:active {
- color: #167ac6 !important;
-}
-
-a {
- color: #61809b;
- text-decoration: none;
-}
-
-/* All links that do not fit with the default color goes here */
-a:not([data-id]) > .icon,
-.pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
-.playlist-restricted > ol > li > a {
- color: #303030;
-}
diff --git a/assets/js/themes.js b/assets/js/themes.js
index c600073d..543b849e 100644
--- a/assets/js/themes.js
+++ b/assets/js/themes.js
@@ -2,7 +2,7 @@ var toggle_theme = document.getElementById('toggle_theme');
toggle_theme.href = 'javascript:void(0);';
toggle_theme.addEventListener('click', function () {
- var dark_mode = document.getElementById('dark_theme').media === 'none';
+ var dark_mode = document.body.classList.contains("light-theme");
var url = '/toggle_theme?redirect=false';
var xhr = new XMLHttpRequest();
@@ -22,7 +22,7 @@ window.addEventListener('storage', function (e) {
}
});
-window.addEventListener('load', function () {
+window.addEventListener('DOMContentLoaded', function () {
window.localStorage.setItem('dark_mode', document.getElementById('dark_mode_pref').textContent);
// Update localStorage if dark mode preference changed on preferences page
update_mode(window.localStorage.dark_mode);
@@ -50,13 +50,18 @@ function scheme_switch (e) {
}
function set_mode (bool) {
- document.getElementById('dark_theme').media = !bool ? 'none' : '';
- document.getElementById('light_theme').media = bool ? 'none' : '';
-
if (bool) {
+ // dark
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
+ document.body.classList.remove('no-theme');
+ document.body.classList.remove('light-theme');
+ document.body.classList.add('dark-theme');
} else {
+ // light
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
+ document.body.classList.remove('no-theme');
+ document.body.classList.remove('dark-theme');
+ document.body.classList.add('light-theme');
}
}
diff --git a/src/invidious/views/embed.ecr b/src/invidious/views/embed.ecr
index 48dbc55f..dbb86009 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 abcfbe22..f6361d2d 100644
--- a/src/invidious/views/template.ecr
+++ b/src/invidious/views/template.ecr
@@ -17,13 +17,12 @@
<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 %>" id="dark_theme" <% if env.get("preferences").as(Preferences).dark_mode != "dark" %>media="none"<% end %>>
- <link rel="stylesheet" href="/css/lighttheme.css?v=<%= ASSET_COMMIT %>" id="light_theme" <% if env.get("preferences").as(Preferences).dark_mode == "dark" %>media="none"<% end %>>
</head>
<% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %>
+<% dark_mode = env.get("preferences").as(Preferences).dark_mode %>
-<body>
+<body class="<%= dark_mode.blank? ? "no" : dark_mode %>-theme">
<span style="display:none" id="dark_mode_pref"><%= env.get("preferences").as(Preferences).dark_mode %></span>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-2-24"></div>
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-18 20:23:35 +0000