@Blog

カラー選択からライトモードとダークモードに切り替えた話

2025.09.22

Logging

おはようございます.カラー選択からライトモードとダークモードに切り替えた話を書いています.カラー選択、実は結構自分は気に入っていたのだけどあまり使用されないだろうなぁという思いも前から思っていたのだけど、そのままにしていました.

切り替えたのはある動画を視聴して、その中でライトモード、ダークモードの仕様に全てのブラウザが対応したことを語っていたので、だったらこの際ライトモードダークモードに変更しようと思い立ちました.

休日の終わりごろに思い立って、サービスとギャラリー以外はライトモードダークモードに切り替えが終わりました.ただ、一つ課題があってOS（オペレーションシステム）とブラウザのモード設定がチグハグだった場合、コメント欄などが見にくくなっています.

ここだけは今のところ保留にしています.

残りのサービスとギャラリーは近日中に変更しようと思っています.

一応、切り替えを行うソースコードを貼っときますね.

document.addEventListener('DOMContentLoaded', () => {
  const switchToggle = document.getElementById('flexSwitchCheckDefault');
  const htmlElement = document.documentElement;

  // ページの初期ロード時にテーマを設定
  function setInitialTheme() {
    // ローカルストレージに設定があれば、それを使う
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      htmlElement.setAttribute('data-theme', savedTheme);
      switchToggle.checked = savedTheme === 'dark';
    } else {
      // なければOSの設定を使う
      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
      htmlElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
      switchToggle.checked = isDarkMode;
    }
  }

  // スイッチが変更されたらテーマを切り替え、ローカルストレージに保存
  switchToggle.addEventListener('change', (event) => {
    const newTheme = event.target.checked ? 'dark' : 'light';
    htmlElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
  });

  // 初期テーマを設定
  setInitialTheme();
});

明日へ続く

タグ

```, オペレーション, カラー, ギャラリー, コード, ここ, こと, コメント, ごろ, サービス, システム, スイッチ, ストレージ, ソース, それ, ダーク, チグハグ, テーマ, ところ, ブラウザ, ページ, モード, ライド, ライトモードダークモード, ローカル, ロード, 一つ, 仕様, 以外, 休日, 使用, 保存, 保留, 全て, 切り替え, 初期, 動画, 場合, 変更, 対応, 思い, 明日, 残り, 自分, 視聴, 設定, 課題, 近日, 選択,

Google One(わん)をダウングレードした話。

2021.04.30

Logging

サブスク（サブスクリプション:月払い）の見直しとしてGoogle Oneをダウングレードしました。今の所、40Gしか使用していなかったのだけど2T（テラ）の契約をしていて月々、1300円、Gさんから請求が来ていたのを今回見直して200G（ギガ）プランに変更しました。100G（ギガ）プランもあるのだけど、それだと仕事としても使うには不安なので200G（ギガ）に変更しました。ダウングレードの方法はGさんが詳細に書いていますので、その手順通り行うことでダウングレードが可能です。くれぐれも解約しないように！。もう一つの注意点としてGoogle Oneから今の使用容量を確認の上、ダウングレードする容量を選択くださいね。

ダウングレードの手順方法
グーグルONEのサイトにログインした状態で設定をクリックする、次にメンバーシッププランを変更からダウングレードの容量を選択します（任意の容量）

Googleストレージ：https://one.google.com/storage

ストレージからその他のプランをクリックすると全プランが表示されるので任意の容量を選択しクリックし手続き（契約結ぶ）を行うとプランを変更することが出来ます。

タグ

Google One, Googleストレージ, Gさん, くれぐれ, サブスク, サブスクリプション, ストレージ, ダウングレード, プラン, メンバーシッププラン, 使用容量, 全プラン, 契約, 容量, 手続き, 手順方法グーグルONE, 手順通り, 月々, 月払い, 請求,