Ruby on Rails 7 の明るいテーマと暗いテーマを切り替える際のちらつき効果

概要

この YouTube チュートリアルを使用して、テーマ (ライト、ダーク、またはシステムのデフォルト) を切り替える機能を紹介しました。すべて正常に動作しますが、ちらつき効果というバグがあります。たとえば、LIGHT テーマを使用しており、他のサブページにアクセスすると、すべて良好で、Light テーマが表示されます。ダークテーマに切り替えます。これは機能しますが、他のサブページにアクセスすると、暗いテーマが適用される前に明るいテーマが一瞬表示され、ちらつきが生じます。

このテーマの切り替えが機能するようにチュートリアルに記載されているコード変更は次のとおりです。

application.html.erb (クリック可能なリンク):

<%= cookies[:theme] %>
<%= link_to 'Light', set_theme_path(theme: 'light') %>
<%= link_to 'Dark', set_theme_path(theme: 'dark') %>
<%= link_to 'System default', set_theme_path %>

テーマ.scss:

@media (prefers-color-scheme: dark) {
    .home {
      background:black;
      color: white;
    }

    .home.light {
        background: silver;
        color: black;
    }
  }


  @media (prefers-color-scheme: light) {
    .home {
        background: silver;
        color: black;

    }

    .home.dark {
        background:black;
        color: white;
    }
  }

ルート.rb:

  get 'set_theme', to: 'theme#update'

テーマコントローラー.rb:

class ThemeController < ApplicationController
    def update
        cookies[:theme] = params[:theme]
        redirect_to(request.referrer || root_path )
    end
end

テーマの切り替えは機能しますが、このちらつき効果を削除したいと考えています。誰かこれについて手伝ってくれませんか？

ありがとう

解決策

HTML でテーマを直接設定していないため、読み込みの開始時にテーマが設定されていると思います。

<html class="<%= cookies[:theme] == 'dark' ? 'dark' : 'light' %>">

これとは別に、StimulusJS を使用して、JS 経由でトグルと Cookie 設定を追加することをお勧めします。