diff options
| author | saltycrys <73420320+saltycrys@users.noreply.github.com> | 2020-11-16 04:19:41 +0100 |
|---|---|---|
| committer | saltycrys <73420320+saltycrys@users.noreply.github.com> | 2020-11-16 04:19:41 +0100 |
| commit | de777907f2835dc79cb1955fa623928ae3a47aaa (patch) | |
| tree | ac15568ad23015cd9584b279837c2bd89463e48b /src | |
| parent | aeed7deb2d631b81062806d1a5453bbdc994c5ec (diff) | |
| download | invidious-de777907f2835dc79cb1955fa623928ae3a47aaa.tar.gz invidious-de777907f2835dc79cb1955fa623928ae3a47aaa.tar.bz2 invidious-de777907f2835dc79cb1955fa623928ae3a47aaa.zip | |
Apply dark theme immediately
Themes are now controlled with a class on the body element.
If a preference is set the body element will have either "dark-theme"
or "light-theme" class. If no preference is set or the preference is
empty the class will be "no-theme".
"dark-theme" and "light-theme" are handled by darktheme.css and
lighttheme.css respectively.
"no-theme" is handled by default.css where depending on the value of
"prefers-color-scheme" the styles corresponding to "dark-theme" or
"light-theme" are applied.
Unfortunately this means that both themes are duplicated, once in the
theme .css and once in default.css.
Diffstat (limited to 'src')
| -rw-r--r-- | src/invidious/views/template.ecr | 7 |
1 files changed, 4 insertions, 3 deletions
diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 61cf5c3a..558f896e 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -18,13 +18,14 @@ <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 %>> + <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]? %> +<% 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> |