Disable dark mode env var

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Features
 
+- [#6838](https://github.com/blockscout/blockscout/pull/6838) - Disable dark mode env var
 - [#6744](https://github.com/blockscout/blockscout/pull/6744) - API v2: smart contracts verification
 - [#6763](https://github.com/blockscout/blockscout/pull/6763) - Permanent UI dark mode
 - [#6721](https://github.com/blockscout/blockscout/pull/6721) - Implement fetching internal transactions from callTracer

apps/block_scout_web/assets/js/lib/history_chart.js

@@ -21,10 +21,14 @@ const grid = {
 function isDarkMode () {
   // @ts-ignore
   const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true'
-  if (!permanentDarkModeEnabled) {
+  // @ts-ignore
-    return Cookies.get('chakra-ui-color-mode') === 'dark'
+  const permanentLightModeEnabled = document.getElementById('permanent-light-mode').textContent === 'true'
-  } else {
+  if (permanentLightModeEnabled) {
+    return false
+  } else if (permanentDarkModeEnabled) {
     return true
+  } else {
+    return Cookies.get('chakra-ui-color-mode') === 'dark'
   }
 }
 

apps/block_scout_web/assets/js/pages/dark-mode-switcher.js

@@ -1,22 +1,12 @@
 import Cookies from 'js-cookie'
-const permantDarkModeEl = document.getElementById('permanent-dark-mode')
-// @ts-ignore
-const permanentDarkModeEnabled = false || (permantDarkModeEl && permantDarkModeEl.textContent === 'true')
 // @ts-ignore
 const darkModeChangerEl = document.getElementsByClassName('dark-mode-changer')[0]
 
-if (permanentDarkModeEnabled) {
-  // @ts-ignore
-  darkModeChangerEl.style.display = 'none'
-}
-
 darkModeChangerEl && darkModeChangerEl.addEventListener('click', function () {
-  if (!permanentDarkModeEnabled) {
+  if (Cookies.get('chakra-ui-color-mode') === 'dark') {
-    if (Cookies.get('chakra-ui-color-mode') === 'dark') {
+    Cookies.set('chakra-ui-color-mode', 'light')
-      Cookies.set('chakra-ui-color-mode', 'light')
+  } else {
-    } else {
+    Cookies.set('chakra-ui-color-mode', 'dark')
-      Cookies.set('chakra-ui-color-mode', 'dark')
-    }
-    document.location.reload()
   }
+  document.location.reload()
 })

apps/block_scout_web/lib/block_scout_web/templates/csv_export/index.html.eex

@@ -34,7 +34,10 @@
           'sitekey': reCaptchaClientKey,
           'theme': function () {
             const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true'
-            if (permanentDarkModeEnabled) {
+            const permanentLightModeEnabled = document.getElementById('permanent-light-mode').textContent === 'true'
+            if (permanentLightModeEnabled) {
+              return 'light'
+            } else if (permanentDarkModeEnabled) {
               return 'dark'
             } else {
               return getCookie('chakra-ui-color-mode')

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -176,11 +176,13 @@
           </div>
         </li>
         <!-- Dark mode changer -->
-        <button class="dark-mode-changer" id="dark-mode-changer">
+        <%= unless Application.get_env(:block_scout_web, :permanent_light_mode_enabled) || Application.get_env(:block_scout_web, :permanent_dark_mode_enabled) do %>
-          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16">
+          <button class="dark-mode-changer" id="dark-mode-changer">
-            <path fill="#9B62FF" fill-rule="evenodd" d="M14.88 11.578a.544.544 0 0 0-.599-.166 5.7 5.7 0 0 1-1.924.321c-3.259 0-5.91-2.632-5.91-5.866 0-1.947.968-3.759 2.59-4.849a.534.534 0 0 0-.225-.97A5.289 5.289 0 0 0 8.059 0C3.615 0 0 3.588 0 8s3.615 8 8.059 8c2.82 0 5.386-1.423 6.862-3.806a.533.533 0 0 0-.041-.616z"/>
+            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16">
-          </svg>
+              <path fill="#9B62FF" fill-rule="evenodd" d="M14.88 11.578a.544.544 0 0 0-.599-.166 5.7 5.7 0 0 1-1.924.321c-3.259 0-5.91-2.632-5.91-5.866 0-1.947.968-3.759 2.59-4.849a.534.534 0 0 0-.225-.97A5.289 5.289 0 0 0 8.059 0C3.615 0 0 3.588 0 8s3.615 8 8.059 8c2.82 0 5.386-1.423 6.862-3.806a.533.533 0 0 0-.041-.616z"/>
-        </button>
+            </svg>
+          </button>
+        <% end %>
         <%= render BlockScoutWeb.LayoutView, "_account_menu_item.html", conn: @conn, current_user: @current_user %>
       </ul>
       <%= render BlockScoutWeb.LayoutView, "_search.html", conn: @conn, id: "main-search-autocomplete", additional_classes: ["mobile-search-hide"] %>

apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex

@@ -157,6 +157,7 @@
     <div class="layout-container">
       <!-- Block for passing backend runtime env variables to frontend -->
       <div id="permanent-dark-mode" class="d-none" ><%= Application.get_env(:block_scout_web, :permanent_dark_mode_enabled) %></div>
+      <div id="permanent-light-mode" class="d-none" ><%= Application.get_env(:block_scout_web, :permanent_light_mode_enabled) %></div>
       <div id="indexer-first-block" class="d-none" ><%= Application.get_env(:indexer, :first_block) %></div>
       <!-- -->
       <% show_maintenance_alert = Application.get_env(:block_scout_web, BlockScoutWeb.Chain)[:show_maintenance_alert] %>
@@ -264,10 +265,13 @@
 
       function isDarkMode() {
         const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true'
-        if (!permanentDarkModeEnabled) {
+        const permanentLightModeEnabled = document.getElementById('permanent-light-mode').textContent === 'true'
-          return getCookie('chakra-ui-color-mode') === 'dark'
+        if (permanentLightModeEnabled) {
-        } else {
+          return false
+        } else if (permanentDarkModeEnabled) {
           return true
+        } else {
+          return getCookie('chakra-ui-color-mode') === 'dark'
         }
       }
 

apps/block_scout_web/priv/gettext/default.pot

@@ -81,7 +81,7 @@ msgstr ""
 msgid ") may be added for each contract. Click the Add Library button to add an additional one."
 msgstr ""
 
-#: lib/block_scout_web/templates/layout/app.html.eex:178
+#: lib/block_scout_web/templates/layout/app.html.eex:179
 #, elixir-autogen, elixir-format
 msgid "- We're indexing this chain right now. Some of the counts may be inaccurate."
 msgstr ""

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -81,7 +81,7 @@ msgstr ""
 msgid ") may be added for each contract. Click the Add Library button to add an additional one."
 msgstr ""
 
-#: lib/block_scout_web/templates/layout/app.html.eex:178
+#: lib/block_scout_web/templates/layout/app.html.eex:179
 #, elixir-autogen, elixir-format
 msgid "- We're indexing this chain right now. Some of the counts may be inaccurate."
 msgstr ""

config/runtime.exs

@@ -101,7 +101,8 @@ config :block_scout_web,
   chain_id: System.get_env("CHAIN_ID"),
   json_rpc: System.get_env("JSON_RPC"),
   verification_max_libraries: verification_max_libraries,
-  permanent_dark_mode_enabled: System.get_env("PERMANENT_DARK_MODE_ENABLED", "false") == "true"
+  permanent_dark_mode_enabled: System.get_env("PERMANENT_DARK_MODE_ENABLED", "false") == "true",
+  permanent_light_mode_enabled: System.get_env("PERMANENT_LIGHT_MODE_ENABLED", "false") == "true"
 
 default_api_rate_limit = 50
 default_api_rate_limit_str = Integer.to_string(default_api_rate_limit)