Fix up switch to CSS variables

6 years ago · 01bc31859b
parent a30fcf9d9a
commit 01bc31859b
6 changed files with 17 additions and 18 deletions
--- a/assets/stylesheets/components/_prism.scss
+++ b/assets/stylesheets/components/_prism.scss
@ -6,7 +6,7 @@ html {
  --prismFunction: #dd4a68;
  --prismVariable: #e90;
 }
-html.dark {
+html._theme-dark {
  --prismValue: #eb8160;
  --prismText: #ddcf88;
  --prismOperator: #b1c676;
--- a/assets/stylesheets/global/_classes.scss
+++ b/assets/stylesheets/global/_classes.scss
@ -152,7 +152,7 @@
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
  }
 }
-html.dark %external-link {
+html._theme-dark %external-link {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
 }

--- a/assets/stylesheets/pages/_bash.scss
+++ b/assets/stylesheets/pages/_bash.scss
@ -5,7 +5,7 @@
  }

  th[align=left] {
-    border-left: 1px solid $boxBorder;
+    border-left: 1px solid var(--boxBorder);
  }

  code { @extend %label; }
--- a/assets/stylesheets/pages/_dart.scss
+++ b/assets/stylesheets/pages/_dart.scss
@ -6,7 +6,7 @@

    .features {
      float: right;
-      color: $textColorLight;
+      color: var(--textColorLight);
    }
  }
 }
--- a/assets/stylesheets/pages/_qt.scss
+++ b/assets/stylesheets/pages/_qt.scss
@ -4,6 +4,6 @@
  // Function headers
  h3.fn > code {
    float: right;
-    color: $textColorLight;
+    color: var(--textColorLight);
  }
 }
--- a/test/app_test.rb
+++ b/test/app_test.rb
@ -55,6 +55,18 @@ class AppTest < MiniTest::Spec
      get '/'
      assert_includes last_response.body, '<body class="foo">'
    end
+
+    it "sets the <html> theme from cookie" do
+      get '/'
+      assert_match %r{<html [^>]*class="[^\"]*_theme-default}, last_response.body
+      refute_includes last_response.body, '_theme-dark'
+
+      set_cookie('dark=1')
+
+      get '/'
+      assert_match %r{<html [^>]*class="[^\"]*_theme-dark}, last_response.body
+      refute_includes last_response.body, '_theme-default'
+    end
  end

  describe "/[static-page]" do
@ -110,19 +122,6 @@ class AppTest < MiniTest::Spec
      refute_includes last_response.body, 'foo'
    end

-    it "has the word 'default' when no 'dark' cookie is set" do
-      get '/manifest.appcache'
-      assert_includes last_response.body, '# default'
-      refute_includes last_response.body, '# dark'
-    end
-
-    it "has the word 'dark' when the cookie is set" do
-      set_cookie('dark=1')
-      get '/manifest.appcache'
-      assert_includes last_response.body, '# dark'
-      refute_includes last_response.body, '# default'
-    end
-
    it "sets default size" do
      get '/manifest.appcache'
      assert_includes last_response.body, '20rem'