cssを使用して実行時に複数の色のテーマを変更して維持するにはどうすればよいですか？

私は別の色のテーマを持っている私のWebアプリが欲しい：cssを使用して実行時に複数の色のテーマを変更して維持するにはどうすればよいですか？

だから今私が持っている：

RedTheme.css
BlueTheme.css

をそして、私は実行時に動的にそれぞれをロードします。オプションメニューでユーザーが選択した内容に応じてそれはうまくいきますが、私はテーマごとに別々のファイルを持っているのが好きではありません。

私は何かのように行うことができますどのような方法があります場合、私は思ったんだけどオプション1：？

Theme.cssテーマ=レッド、その後、CSS内には、それはその変数に基づいて使用するかを把握持つことに。多分私がやりCSS内のような何かを行うことができた場合

オプション2はまた、私は思ったんだけど：

背景色：@themeBackgroundColor

、その後、何とかJavaScriptを経由して、実行時に、この変数を設定しますか、何か。

オプション1とオプション2が使用できない場合は、あなたが離れてテーマごとに別のファイルを維持するから、テーマ設定のための他の提案を持っているのですか？ b/cおそらく私は、ユーザーが将来、カスタム色を選択できるオプションを希望します。

出典

2012-03-30 foreyez

CSSで変数を使用する場合は、LessまたはSassをご覧ください。どちらもクライアント側のソリューションがあります。スタイルにあなたを切り替えるには

できます

は<body id="red">のようなボディのためのID属性を使用し、このIDの接頭辞のCSSを持っています。だから#red myelement.myclass{}または何か。その後、javascriptでIDを切り替えます。
サーバー側にベースCSSファイルといくつかのテーマCSSファイル（たとえばgmailなど）を入れ、URLを変更することでjavascriptでそれらの間を入れ替えることができます。これによりブラウザに新しいリクエストが生成され、 CSS。
スタイル属性（like done here）として適切なスタイリングを追加するか、カスタムスタイルを定義してスワップするhtmlにインラインstyle elementsを追加する、独自の小さなフレームワークを探したり書き込んだりできますjavascriptで。

javascriptによる要素またはHTMLのCSSの変更は、私が見た限りブラウザに再度ページを表示させるようになります。

javascriptで許可されていないため、クライアントのハードディスク上のCSSファイルを直接変更することはできません。ただし、キャッシュまたはhtmlのCSSを変更することはできます。

出典

2012-03-30 16:11:03

btw less/Sassがコンパイル時に...実行時の解決策を探しています – foreyez

less.js経由でブラウザでlesserを実行する –

これを行う最も簡単な方法は、LESSを使用することです。より複雑な方法ですが、もしこれをやろうと思っているのなら、もっと役に立つかもしれないものは、あなたのcssファイルをphpやasp.net（あなたのプラットフォームに依存します）で扱い、cssを出力するコードを使うことですCSSファイルに適切なヘッダーを出力する）。

出典

2012-03-30 16:13:11 saluce

ベンジャミンの提案は私の提案の1つでした。他のあまり知られてトリックを使用すると、スタイルシートでdisabledプロパティを設定することができますし、簡単にちょうどそれらの1

を有効にすることができるが

は、次の2つのスタイルシート

<link rel="stylesheet" type="text/css" href="blue-theme.css" id="blue-theme"/> 
<link rel="stylesheet" type="text/css" href="red-theme.css" id="red-theme"/>

を持っていると言うスタイルシートを無効にするということです

function setTheme(theme) { 
    var themes = ["blue-theme", "red-theme"]; 
    for (var i=0; i < themes.length; i++) { 

     var styleSheet = document.getElementById(themes[i]); 
     if (themes[i] == theme) { 
     styleSheet.removeAttribute("disabled"); 
     } else { 
     styleSheet.setAttribute("disabled", "disabled"); 
     }  
    } 
}

出典

2012-03-30 16:19:47

これを行うと、テーマを切り替えるときにサイトがChromeで点滅します。このような切り替えの適切な方法は、ここに示されています：http://www.thesitewizard.com/css/switch-alternate-css-styles.shtml（ 'title'属性を 'link'要素に追加することを忘れないでください。 Chromeでは動作しません）。 –

cssを使用して実行時に複数の色のテーマを変更して維持するにはどうすればよいですか？

答えて

関連する問題