Use `html._theme-*` selectors

7 years ago · b0cf8770f7
parent cf9a5fab1f
commit b0cf8770f7
5 changed files with 5 additions and 5 deletions
--- a/assets/stylesheets/global/_icons.scss
+++ b/assets/stylesheets/global/_icons.scss
@ -23,7 +23,7 @@
  %doc-icon-2 { background-image: image-url('docs-2@2x.png') !important; }
 }

-html.dark {
+html._theme-dark {
  %darkIconFix {
    filter: invert(100%) grayscale(100%);
    -webkit-filter: invert(100%) grayscale(100%);
--- a/assets/stylesheets/global/_variables-dark.scss
+++ b/assets/stylesheets/global/_variables-dark.scss
@ -1,4 +1,4 @@
-html.dark {
+html._theme-dark {
  --absolute: white;

  --documentBackground: #222;
--- a/assets/stylesheets/global/_variables-light.scss
+++ b/assets/stylesheets/global/_variables-light.scss
@ -1,4 +1,4 @@
-html:not(.dark) {
+html._theme-default {
  --absolute: black;

  --documentBackground: #f3f3f3;
--- a/views/index.erb
+++ b/views/index.erb
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html<%= ' manifest="/manifest.appcache"' if App.production? %> prefix="og: http://ogp.me/ns#" lang="en" class="_booting">
+<html<%= ' manifest="/manifest.appcache"' if App.production? %> prefix="og: http://ogp.me/ns#" lang="en" class="_booting _theme-<%= app_theme %>">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">
--- a/views/other.erb
+++ b/views/other.erb
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="_booting">
+<html lang="en" class="_booting _theme-<%= app_theme %>">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">