Merge pull request #6838 from blockscout/vb-disable-dark-mode

Permanent light mode UI

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/app.js

@@ -35,6 +35,7 @@ import './lib/tooltip'
 import './lib/modals'
 import './lib/card_tabs'
 import './lib/ad'
+import './lib/dark_mode'
 
 import swal from 'sweetalert2'
 // @ts-ignore

apps/block_scout_web/assets/js/app_extra.js

@@ -0,0 +1,33 @@
+import { isDarkMode } from './lib/dark_mode'
+
+function applyDarkMode () {
+  if (isDarkMode()) {
+    document.body.className += ' ' + 'dark-theme-applied'
+    document.body.style.backgroundColor = '#1c1d31'
+  }
+}
+window.onload = applyDarkMode()
+
+if (isDarkMode()) {
+  if (document.getElementById('top-navbar')) {
+    document.getElementById('top-navbar').style.backgroundColor = '#282945'
+  }
+  if (document.getElementById('navbar-logo')) {
+    document.getElementById('navbar-logo').style.filter = 'brightness(0) invert(1)'
+  }
+  const modeChanger = document.getElementById('dark-mode-changer')
+  if (modeChanger) {
+    modeChanger.className += ' ' + 'dark-mode-changer--dark'
+  }
+
+  const search = document.getElementById('main-search-autocomplete')
+  const searchMobile = document.getElementById('main-search-autocomplete-mobile')
+  if (search && search.style) {
+    search.style.backgroundColor = '#22223a'
+    search.style.borderColor = '#22223a'
+  }
+  if (searchMobile && searchMobile.style) {
+    searchMobile.style.backgroundColor = '#22223a'
+    searchMobile.style.borderColor = '#22223a'
+  }
+}

apps/block_scout_web/assets/js/lib/dark_mode.js

@@ -0,0 +1,17 @@
+import Cookies from 'js-cookie'
+
+function isDarkMode () {
+  // @ts-ignore
+  const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true'
+  // @ts-ignore
+  const permanentLightModeEnabled = document.getElementById('permanent-light-mode').textContent === 'true'
+  if (permanentLightModeEnabled) {
+    return false
+  } else if (permanentDarkModeEnabled) {
+    return true
+  } else {
+    return Cookies.get('chakra-ui-color-mode') === 'dark'
+  }
+}
+
+export { isDarkMode }

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

@@ -1,11 +1,11 @@
 import $ from 'jquery'
-import Cookies from 'js-cookie'
 import { Chart, LineController, LineElement, PointElement, LinearScale, TimeScale, Title, Tooltip } from 'chart.js'
 import 'chartjs-adapter-luxon'
 import humps from 'humps'
 import numeral from 'numeral'
 import { DateTime } from 'luxon'
 import { formatUsdValue } from '../lib/currency'
+import { isDarkMode } from '../lib/dark_mode'
 // @ts-ignore
 import sassVariables from '../../css/export-vars-to-js.module.scss'
 
@@ -18,16 +18,6 @@ const grid = {
   drawOnChartArea: false
 }
 
-function isDarkMode () {
-  // @ts-ignore
-  const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true'
-  if (!permanentDarkModeEnabled) {
-    return Cookies.get('chakra-ui-color-mode') === 'dark'
-  } else {
-    return true
-  }
-}
-
 function getTxChartColor () {
   if ((isDarkMode())) {
     return sassVariables.dashboardLineColorTransactionsDarkTheme

apps/block_scout_web/assets/js/pages/chain.js

@@ -64,13 +64,13 @@ function baseReducer (state = initialState, action) {
             action.msg,
             ...pastBlocks
           ],
-          blockCount: blockCount
+          blockCount
         })
       } else {
         return Object.assign({}, state, {
           // @ts-ignore
           blocks: state.blocks.map((block) => block.blockNumber === action.msg.blockNumber ? action.msg : block),
-          blockCount: blockCount
+          blockCount
         })
       }
     }

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/assets/webpack.config.js

@@ -36,6 +36,7 @@ const appJs =
   {
     entry: {
       'app': './js/app.js',
+      'app_extra': './js/app_extra.js',
       'chart-loader': './js/chart-loader.js',
       'balance-chart-loader': './js/balance-chart-loader.js',
       'chain': './js/pages/chain.js',

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

@@ -56,107 +56,10 @@
   </head>
 
   <body>
-    <%= cond do %>
-      <% (
-        @view_module == Elixir.BlockScoutWeb.TransactionInternalTransactionView ||
-        @view_module == Elixir.BlockScoutWeb.TransactionLogView ||
-        @view_module == Elixir.BlockScoutWeb.TransactionRawTraceView ||
-        @view_module == Elixir.BlockScoutWeb.TransactionTokenTransferView ||
-        @view_module == Elixir.BlockScoutWeb.TransactionStateView
-      ) -> %>
-        <% to_address = @transaction && @transaction.to_address && "0x" <> Base.encode16(@transaction.to_address.hash.bytes, case: :lower) %>
-        <% {:ok, created_from_address} = if @transaction.to_address_hash, do: Chain.hash_to_address(@transaction.to_address_hash), else: {:ok, nil} %>
-        <% created_from_address_hash_str = if from_address_hash(created_from_address), do: "0x" <> Base.encode16(from_address_hash(created_from_address).bytes, case: :lower), else: nil %>
-        <script>
-          function applyCustomTheme(contractAddressHashesRaw, customClass) {
-            if (contractAddressHashesRaw !== "") {
-              const contractAddressHashes = contractAddressHashesRaw.split(',').map(hash => hash.toLowerCase())
-              const to_address = "<%= to_address %>"
-              const created_from_address_hash_str = "<%= created_from_address_hash_str %>"
-
-              contractAddressHashes.forEach(contractAddressHash => {
-                if (contractAddressHash == to_address) {
-                  document.body.className += " " + customClass;
-                  return;
-                } else if (contractAddressHash == created_from_address_hash_str) {
-                  document.body.className += " " + customClass;
-                  return;
-                }
-              })
-            }
-
-          }
-
-          window.onload = applyCustomMode()
-        </script>
-      <% (
-        @view_module == Elixir.BlockScoutWeb.AddressTransactionView ||
-        @view_module == Elixir.BlockScoutWeb.AddressTokenTransferView ||
-        @view_module == Elixir.BlockScoutWeb.AddressTokenView ||
-        @view_module == Elixir.BlockScoutWeb.AddressInternalTransactionView ||
-        @view_module == Elixir.BlockScoutWeb.AddressCoinBalanceView ||
-        @view_module == Elixir.BlockScoutWeb.AddressLogsView ||
-        @view_module == Elixir.BlockScoutWeb.AddressValidationView ||
-        @view_module == Elixir.BlockScoutWeb.AddressContractView ||
-        @view_module == Elixir.BlockScoutWeb.AddressReadContractView ||
-        @view_module == Elixir.BlockScoutWeb.AddressReadProxyView ||
-        @view_module == Elixir.BlockScoutWeb.AddressWriteContractView ||
-        @view_module == Elixir.BlockScoutWeb.AddressWriteProxyView
-      ) -> %>
-        <% created_from_address = if @address && from_address_hash(@address), do: "0x" <> Base.encode16(from_address_hash(@address).bytes, case: :lower), else: nil %>
-        <script>
-          function applyCustomTheme(contractAddressHashesRaw, customClass) {
-            if (contractAddressHashesRaw !== "") {
-              const contractAddressHashes = contractAddressHashesRaw.split(',').map(hash => hash.toLowerCase())
-              const createdFromAddress = "<%= created_from_address %>"
-              contractAddressHashes.forEach(contractAddressHash => {
-                if (window.location.pathname.toLowerCase().includes(contractAddressHash)) {
-                  document.body.className += " " + customClass;
-                  return;
-                } else if (contractAddressHash == createdFromAddress) {
-                  document.body.className += " " + customClass;
-                  return;
-                }
-              })
-            }
-          }
-
-        </script>
-      <% (
-        @view_module == Elixir.BlockScoutWeb.Tokens.TransferView ||
-        @view_module == Elixir.BlockScoutWeb.Tokens.ReadContractView ||
-        @view_module == Elixir.BlockScoutWeb.Tokens.HolderView ||
-        @view_module == Elixir.BlockScoutWeb.Tokens.Instance.TransferView ||
-        @view_module == Elixir.BlockScoutWeb.Tokens.Instance.MetadataView ||
-        @view_module == Elixir.BlockScoutWeb.PageNotFoundView
-      ) -> %>
-        <% {:ok, created_from_address} = if @token && @token.contract_address_hash, do: Chain.hash_to_address(@token.contract_address_hash), else: {:ok, nil} %>
-        <% created_from_address_hash = if from_address_hash(created_from_address), do: "0x" <> Base.encode16(from_address_hash(created_from_address).bytes, case: :lower), else: nil %>
-        <script>
-          function applyCustomTheme(contractAddressHashesRaw, customClass) {
-            if (contractAddressHashesRaw !== "") {
-              const contractAddressHashes = contractAddressHashesRaw.split(',').map(hash => hash.toLowerCase())
-              const created_from_address_hash = "<%= created_from_address_hash %>"
-              contractAddressHashes.forEach(contractAddressHash => {
-                if (window.location.pathname.toLowerCase().includes(contractAddressHash)) {
-                  document.body.className += " " + customClass;
-                  return;
-                } else if (contractAddressHash == created_from_address_hash) {
-                  document.body.className += " " + customClass;
-                  return;
-                }
-              })
-            }
-          }
-
-          window.onload = applyCustomMode()
-        </script>
-      <% true -> %>
-        <%= nil %>
-    <% end %>
     <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] %>
@@ -255,53 +158,6 @@
     <%= if @view_module in [Elixir.BlockScoutWeb.AddressContractVerificationViaMultiPartFilesView, Elixir.BlockScoutWeb.AddressContractVerificationViaJsonView, Elixir.BlockScoutWeb.AddressContractVerificationViaStandardJsonInputView] do %>
       <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/dropzone.js") %>"></script>
     <% end %>
-    <script defer data-cfasync="false">
+    <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/app_extra.js") %>"></script>
-      function getCookie(name) {
-        const value = `; ${document.cookie}`;
-        const parts = value.split(`; ${name}=`);
-        if (parts.length === 2) return parts.pop().split(';').shift();
-      }
-
-      function isDarkMode() {
-        const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true'
-        if (!permanentDarkModeEnabled) {
-          return getCookie('chakra-ui-color-mode') === 'dark'
-        } else {
-          return true
-        }
-      }
-
-      function applyDarkMode() {
-        if (isDarkMode()) {
-          document.body.className += " " + "dark-theme-applied";
-          document.body.style.backgroundColor = "#1c1d31";
-        }
-      }
-      window.onload = applyDarkMode()
-
-      if (isDarkMode()) {
-        if (document.getElementById("top-navbar")) {
-          document.getElementById("top-navbar").style.backgroundColor = "#282945";
-        }
-        if (document.getElementById("navbar-logo")) {
-          document.getElementById("navbar-logo").style.filter = "brightness(0) invert(1)";
-        }
-        let modeChanger = document.getElementById("dark-mode-changer");
-        if (modeChanger) {
-          modeChanger.className += " " + "dark-mode-changer--dark";
-        }
-
-        const search = document.getElementById("main-search-autocomplete")
-        const searchMobile = document.getElementById("main-search-autocomplete-mobile")
-            if (search && search.style) {
-          search.style.backgroundColor = "#22223a";
-              search.style.borderColor = "#22223a";
-        }
-        if (searchMobile && searchMobile.style) {
-          searchMobile.style.backgroundColor = "#22223a";
-          searchMobile.style.borderColor = "#22223a";
-        }
-      }
-    </script>
   </body>
 </html>

apps/block_scout_web/lib/block_scout_web/views/layout_view.ex

@@ -5,8 +5,6 @@ defmodule BlockScoutWeb.LayoutView do
   alias Plug.Conn
   alias Poison.Parser
 
-  import BlockScoutWeb.AddressView, only: [from_address_hash: 1]
-
   @default_other_networks [
     %{
       title: "POA",

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:81
 #, 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:81
 #, 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)