ダイナミックCSSテーマ
インスピレーション
私は、いくつかのデザインシステムがプラットホーム不可知であるために構築されるので、JSでCSSの代わりにグローバルCSS 3変数を使用しているテーマシングルページアプリケーション(SPA)アプリを学ぶ方法を学びたかったです.私はエルムを使用しているので、誰かが私にそれを専門的に使用するまで私の好きな趣味の言語ですので😎
仕様
あなたが前にCSSテーマをしたことがないならば、心配しないでください-それは驚くほど簡単です.我々は1つのボタンを画面に集中し、テキストをクリックして起動する必要がありますテーマを活性化するユーザーに通知する必要があります.ユーザーがテーマを切り替えることができる回数の制限はありません.デフォルトのテーマは“solarizedライト”です.通常、あなたのアプリケーションは、データベースに格納するか、ローカルキャッシュに格納することによってユーザー選択を覚えていますが、このデモではありません.と言えば、ライブデモで遊ぶことができますhere !
注意:あなたがそれを持っているならば、必ず暗いリーダークロム拡張をオフにしてください.
コード
第一に、我々はデフォルトでテーマの色を設定する必要があります
:root CSS擬似クラスhere ) と.dark テーマが「ソーラードダーク」に変更されたときのオーバーライドのクラスです.:root {
--theme-background: #fdf6e3;
--theme-selection-background: #ece7d5;
--theme-foreground: #657a81;
--theme-accent1: #2aa198;
--theme-accent2: #b58900;
}
.dark {
--theme-background: #002b36;
--theme-selection-background: #073642;
--theme-foreground: #b58900;
--theme-accent1: #d33682;
--theme-accent2: #268bd2;
}
オプション1 :
アクション→ トグルテーマ
type alias Model =
Bool
type Msg
= ToggleTheme Bool
アクション→ 変化テーマ
type Theme
= SolarizedLight
| SolarizedDark
type alias Model =
Theme
type Msg
= ChangeTheme Theme
themeButton : Model -> Html Msg
themeButton model =
case model of
SolarizedDark ->
button [ class "theme-btn", onClick (ChangeTheme SolarizedLight) ]
[ text "Toggle Light" ]
SolarizedLight ->
button [ class "theme-btn", onClick (ChangeTheme SolarizedDark) ]
[ text "Toggle Dark" ]
.dark 以前に作成したクラスは、<body> 要素の色がオーバーライドします.ELMはDOMを直接操作することはできません(既に知っていたら)どうやってこれを行うのですか?エンムエルムports — JS(JavaScript - AS - A)と対話するスマートな方法.ありがたいことに、これは我々が必要とするすべてのバニラJSです.
app.ports.changeTheme.subscribe(theme => {
if (theme === "") {
document.body.classList.remove("dark");
} else {
document.body.classList.add(theme);
}
})
changeTheme 我々がちょうど言ったメッセージ↑ それぞれのテーマで.update : Msg -> Model -> ( Model, Cmd Msg )
update msg _ =
case msg of
ChangeTheme theme ->
case theme of
SolarizedDark ->
( SolarizedDark, changeTheme "dark" )
SolarizedLight ->
( SolarizedLight, changeTheme "" )
結論
その他のJavaScriptの言語には、JavaScriptの言語のようなJavaScriptのインターoptingについてのさまざまな哲学があります.私は今どんな権利に対しても議論をしていません、しかし、この小さな例は、EMMが信用できないコードを端に押しつける方法を強調します.
ハンスフフマン / ダイナミックCSSテーマ
CSS 3変数を使用して、テーマを動的に変更します。
Reference
この問題について(ダイナミックCSSテーマ), 我々は、より多くの情報をここで見つけました https://dev.to/hansjhoffman/dynamic-css-themes-with-elm-11eaテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol