forked from midou/invidious
Merge pull request #1479 from saltycrys/theme-flash
Apply dark theme immediately
This commit is contained in:
commit
fe73eccb90
@ -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;
|
|
||||||
}
|
|
@ -20,7 +20,7 @@ body {
|
|||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel-owner {
|
body a.channel-owner {
|
||||||
background-color: #008bec;
|
background-color: #008bec;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 9px;
|
border-radius: 9px;
|
||||||
@ -101,15 +101,19 @@ div {
|
|||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body a.pure-button {
|
||||||
|
color: rgba(0,0,0,.8);
|
||||||
|
}
|
||||||
|
|
||||||
button.pure-button-primary,
|
button.pure-button-primary,
|
||||||
a.pure-button-primary,
|
body a.pure-button-primary,
|
||||||
.channel-owner:hover {
|
.channel-owner:hover {
|
||||||
background-color: #a0a0a0;
|
background-color: #a0a0a0;
|
||||||
color: rgba(35, 35, 35, 1);
|
color: rgba(35, 35, 35, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
button.pure-button-primary:hover,
|
button.pure-button-primary:hover,
|
||||||
a.pure-button-primary:hover {
|
body a.pure-button-primary:hover {
|
||||||
background-color: rgba(0, 182, 240, 1);
|
background-color: rgba(0, 182, 240, 1);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
@ -282,7 +286,7 @@ input[type="search"]::-webkit-search-cancel-button {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer a {
|
body .footer a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
@ -485,3 +489,134 @@ video.video-js {
|
|||||||
margin-top: -0.81666em;
|
margin-top: -0.81666em;
|
||||||
margin-left: -1.5em;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@ -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;
|
|
||||||
}
|
|
@ -2,7 +2,7 @@ var toggle_theme = document.getElementById('toggle_theme');
|
|||||||
toggle_theme.href = 'javascript:void(0);';
|
toggle_theme.href = 'javascript:void(0);';
|
||||||
|
|
||||||
toggle_theme.addEventListener('click', function () {
|
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 url = '/toggle_theme?redirect=false';
|
||||||
var xhr = new XMLHttpRequest();
|
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);
|
window.localStorage.setItem('dark_mode', document.getElementById('dark_mode_pref').textContent);
|
||||||
// Update localStorage if dark mode preference changed on preferences page
|
// Update localStorage if dark mode preference changed on preferences page
|
||||||
update_mode(window.localStorage.dark_mode);
|
update_mode(window.localStorage.dark_mode);
|
||||||
@ -50,13 +50,18 @@ function scheme_switch (e) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function set_mode (bool) {
|
function set_mode (bool) {
|
||||||
document.getElementById('dark_theme').media = !bool ? 'none' : '';
|
|
||||||
document.getElementById('light_theme').media = bool ? 'none' : '';
|
|
||||||
|
|
||||||
if (bool) {
|
if (bool) {
|
||||||
|
// dark
|
||||||
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-sunny');
|
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 {
|
} else {
|
||||||
|
// light
|
||||||
toggle_theme.children[0].setAttribute('class', 'icon ion-ios-moon');
|
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');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -9,12 +9,11 @@
|
|||||||
<link rel="stylesheet" href="/css/videojs-overlay.css?v=<%= ASSET_COMMIT %>">
|
<link rel="stylesheet" href="/css/videojs-overlay.css?v=<%= ASSET_COMMIT %>">
|
||||||
<script src="/js/videojs-overlay.min.js?v=<%= ASSET_COMMIT %>"></script>
|
<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/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 %>">
|
<link rel="stylesheet" href="/css/embed.css?v=<%= ASSET_COMMIT %>">
|
||||||
<title><%= HTML.escape(video.title) %> - Invidious</title>
|
<title><%= HTML.escape(video.title) %> - Invidious</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body class="dark-theme">
|
||||||
<script id="video_data" type="application/json">
|
<script id="video_data" type="application/json">
|
||||||
<%=
|
<%=
|
||||||
{
|
{
|
||||||
|
@ -17,13 +17,12 @@
|
|||||||
<link rel="stylesheet" href="/css/grids-responsive-min.css?v=<%= ASSET_COMMIT %>">
|
<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/ionicons.min.css?v=<%= ASSET_COMMIT %>">
|
||||||
<link rel="stylesheet" href="/css/default.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>
|
</head>
|
||||||
|
|
||||||
<% locale = LOCALES[env.get("preferences").as(Preferences).locale]? %>
|
<% 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>
|
<span style="display:none" id="dark_mode_pref"><%= env.get("preferences").as(Preferences).dark_mode %></span>
|
||||||
<div class="pure-g">
|
<div class="pure-g">
|
||||||
<div class="pure-u-1 pure-u-md-2-24"></div>
|
<div class="pure-u-1 pure-u-md-2-24"></div>
|
||||||
|
Loading…
Reference in New Issue
Block a user