...ダークモードに任意で切り替えられるボタンをCSSとJavascriptで作ろう!Webデザイン2019年1月14日ダークモードに任意で切り替えられるボタンをCSSとJavascriptで作ろう!032EvernoteやTwitter、YouTubeなどが導入しているデザインに「ダークモード」があります。さいごにダークモードってなあに?そもそもダークモードとは、背景が暗めの色、テキストが明るめの色で構成されたデザインです。GoogleによるとPixelでは63%の省電力が実績として報告されていたり、macOSのMojaveが導入したことでも有名になりました。全体的にダークトーンにすることで目が疲れにくくなるようです。メリットしかないですねー。ダークモードのデモページボタンをポチポチ切り替えると、ライトモードとダークモードを切り替えられるはずです。<ストロボライツ>https://www.strobolights.tokyo/admin/article/20190114/そこらへんにいる会社員が何となく始めた、ほぼポケモンGOのブログです。作りが雑なのはご愛嬌で。実際にはhoverやcursorなどをCSSで適用させてあげると親切ですね!JavascriptJavascriptはinputタグをクリックするとダークモード用のCSSを適用できるようにします。ダークモード用のlinkにidをセットしておいて、それをJavascriptのgetElementByIdで取得します。url;};CSSCSSは通常のスタイルに加えて、ダークモード用のCSSを上書きする形で作ります。CSSのルールとして、下に書かれたプロパティが上に書かれたものより優先されるので、通常のCSSの下にダークモード用のCSSを読み込みましょう!HTMLheadに通常のCSS→ダークモード用の順番でCSSを読み込みます。id="darkmode">切り替えボタン自体はformのinputでやっていますが、チェックボックスでもaでもなんでもいけますよ。onclick="changeStyle('');"></form>ボタンを押したらdarkmode.cssがlinkのhrefの#と入れ替わってCSSが適用される。<ストロボライツ>https://www.strobolights.tokyo/admin/article/20190114/そこらへんにいる会社員が何となく始めた、ほぼポケモンGOのブログです。*NameE-mailURL次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Awesomeの記事を書いてい...デザインのアクセントに。この記事はバージョン5以下の内容になります。5を使う場合は下記の記事を参考にしてください。けしんフォルム検索ワード検索ポケモンGO個体値レイドバトルイベント検索このブログを書いてるひと自称フロントエンドエンジニアです。当初はシステマティックなブログを書きたかったけど、気づいたらポケモンGOのことばっかり書いてた。記事の9割がポケモンGOに関することで、あとの1割はグチです。<ストロボライツ>.TOPお知らせ検索ワード検索ポケモンGO個体値レイドバトルイベント検索ただいま開催中のイベントです。2月のコミュニティデイ投票受付中!チラーミィとダルマッカが実装!旧正月イベント開催中!バレンタインイベント2020が開催中!トルネロスがレイドバトルに登場中!1月のコミュニティデイ開催中!ただいま入手可能な全タスクリスト。