Eliminate `application-dark.css`; switch themes by toggling classes

This also means that the Application Cache doesn’t have to get updated when toggling themes, and a new CSS file that’s nearly the same doesn’t need to be downloaded.

assets/javascripts/views/content/settings_page.coffee

@@ -24,12 +24,10 @@ class app.views.SettingsPage extends app.View
     'Preferences'
 
   toggleDark: (enable) ->
-    css = $('link[rel="stylesheet"][data-alt]')
-    alt = css.getAttribute('data-alt')
-    css.setAttribute('data-alt', css.getAttribute('href'))
-    css.setAttribute('href', alt)
+    html = document.documentElement
+    html.classList.toggle('_theme-default')
+    html.classList.toggle('_theme-dark')
     app.settings.set('dark', !!enable)
-    app.appCache?.updateInBackground()
     return
 
   toggleLayout: (layout, enable) ->

assets/stylesheets/application-dark.css.scss

@@ -1,105 +0,0 @@
-//= depend_on docs-1.png
-//= depend_on docs-1@2x.png
-//= depend_on docs-2.png
-//= depend_on docs-2@2x.png
-
-/*!
- * Copyright 2013-2018 Thibaut Courouble and other contributors
- *
- * This source code is licensed under the terms of the Mozilla
- * Public License, v. 2.0, a copy of which may be obtained at:
- * http://mozilla.org/MPL/2.0/
- */
-
-@import 'global/variables-dark',
-        'global/variables',
-        'global/mixins',
-        'global/icons',
-        'global/classes',
-        'global/base';
-
-@import 'components/app',
-        'components/header',
-        'components/notif',
-        'components/sidebar',
-        'components/settings',
-        'components/content',
-        'components/page',
-        'components/fail',
-        'components/path',
-        'components/notice',
-        'components/prism',
-        'components/mobile';
-
-@import 'pages/simple',
-        'pages/angular',
-        'pages/angularjs',
-        'pages/apache',
-        'pages/async',
-        'pages/bootstrap',
-        'pages/c',
-        'pages/cakephp',
-        'pages/clojure',
-        'pages/codeception',
-        'pages/coffeescript',
-        'pages/cordova',
-        'pages/crystal',
-        'pages/d',
-        'pages/d3',
-        'pages/dojo',
-        'pages/drupal',
-        'pages/elixir',
-        'pages/ember',
-        'pages/erlang',
-        'pages/express',
-        'pages/git',
-        'pages/github',
-        'pages/go',
-        'pages/haskell',
-        'pages/jekyll',
-        'pages/jquery',
-        'pages/julia',
-        'pages/knockout',
-        'pages/kotlin',
-        'pages/laravel',
-        'pages/liquid',
-        'pages/love',
-        'pages/lua',
-        'pages/mdn',
-        'pages/meteor',
-        'pages/modernizr',
-        'pages/moment',
-        'pages/nginx',
-        'pages/node',
-        'pages/npm',
-        'pages/openjdk',
-        'pages/perl',
-        'pages/phalcon',
-        'pages/phaser',
-        'pages/php',
-        'pages/phpunit',
-        'pages/postgres',
-        'pages/pug',
-        'pages/python',
-        'pages/ramda',
-        'pages/rdoc',
-        'pages/react_native',
-        'pages/redis',
-        'pages/rethinkdb',
-        'pages/rfc',
-        'pages/rubydoc',
-        'pages/rust',
-        'pages/sinon',
-        'pages/socketio',
-        'pages/sphinx',
-        'pages/sphinx_simple',
-        'pages/sqlite',
-        'pages/support_tables',
-        'pages/tcl_tk',
-        'pages/tensorflow',
-        'pages/terraform',
-        'pages/underscore',
-        'pages/vue',
-        'pages/webpack',
-        'pages/yard',
-        'pages/yii';

assets/stylesheets/application.css.scss

@@ -12,6 +12,7 @@
  */
 
 @import 'global/variables-light',
+        'global/variables-dark',
         'global/variables',
         'global/mixins',
         'global/icons',

lib/app.rb

@@ -194,7 +194,6 @@ class App < Sinatra::Application
       @@manifest_asset_urls ||= [
         javascript_path('application', asset_host: false),
         stylesheet_path('application'),
-        stylesheet_path('application-dark'),
         image_path('docs-1.png'),
         image_path('docs-1@2x.png'),
         image_path('docs-2.png'),
@@ -203,21 +202,6 @@ class App < Sinatra::Application
       ]
     end
 
-    def main_stylesheet_path
-      stylesheet_paths[dark_theme? ? :dark : :default]
-    end
-
-    def alternate_stylesheet_path
-      stylesheet_paths[dark_theme? ? :default : :dark]
-    end
-
-    def stylesheet_paths
-      @@stylesheet_paths ||= {
-        default: stylesheet_path('application'),
-        dark: stylesheet_path('application-dark')
-      }
-    end
-
     def app_size
       @app_size ||= memoized_cookies['size'].nil? ? '20rem' : "#{memoized_cookies['size']}px"
     end

views/index.erb

@@ -30,7 +30,7 @@
   <link rel="apple-touch-icon" sizes="152x152" href="<%= App.cdn_origin %>/images/apple-icon-152.png">
   <link rel="apple-touch-icon" sizes="160x160" href="<%= App.cdn_origin %>/images/apple-icon-160.png">
   <link rel="mask-icon" href="<%= App.cdn_origin %>/images/webkit-mask-icon.svg" color="#398df0">
-  <link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>">
+  <%= stylesheet_tag 'application' %>
 </head>
 <body<%= %( class="#{app_layout}") if app_layout %>>
 <noscript class="_fail">DevDocs requires JavaScript to run.</noscript>

views/manifest.erb

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# <%= app_theme %> <%= app_size %> <%= app_layout %>
+# <%= app_size %> <%= app_layout %>
 
 CACHE:
 /

views/other.erb

@@ -11,7 +11,7 @@
   <link rel="manifest" href="/manifest.json">
   <link rel="icon" type="image/x-icon" href="<%= App.cdn_origin %>/favicon.ico">
   <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Search DevDocs">
-  <link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>">
+  <%= stylesheet_tag 'application' %>
 </head>
 <body<%= %( class="#{app_layout}") if app_layout %> data-doc="<%= CGI::escape_html @doc.to_json %>">
 <noscript class="_fail">DevDocs requires JavaScript to run.</noscript>