Theme Roller を適用したら、文字の見えない部分が出てきました。

[kyuhou]

以前取得したサンプル「Onsen UIの主なコンポーネント」に、
Theme Rollerを適用したところ、文字の見えない部分が出てきました。
<ons-list-header>タグ内と、promptの入力部分でこの症状が出ています。
テーマは背景が黒となるものです。
index.html内は、次のよう様になっています。
<link rel=“stylesheet” href=“css/style.css”>
<link rel=“stylesheet” href=“components/loader.css”>
<link rel=“stylesheet” href=“theme/onsen-css-components.css”>
<link rel=“stylesheet” href=“theme/onsen-css-components.min.css”>
たぶん文字の色が、バックグラウンドと同じ色になっているからだと思われますが、
どこを修正いたらいいのか、さっぱりわからない状況です。
まったく初歩的な質問で恐縮ですが、よろしくお願いします。

[Fran Diox]

@kyuhou
index.html内 は

<link rel=“stylesheet” href=“theme/onsen-css-components.css”>
<link rel=“stylesheet” href=“theme/onsen-css-components.min.css”>

の代わりに

<link rel=“stylesheet” href=“theme/onsenui.css”>
<link rel=“stylesheet” href=“theme/onsen-css-components.css”>

書いてください。 onsenui.cssは必要です。

[kyuhou]

@Fran-Diox said:

<link rel=“stylesheet” href=“theme/onsenui.css”>

コメントありがとうございます。

[Download Theme]ボタンで、ダウンロードした時には、onsenui.cssが
含まれていませんでした。ペアとなるこのファイルはどのようにしたら手に入りますか。
よろしくお願いします。

[kyuhou]

@kyuhou
とりあえず手元にあったonsenui.cssを使ったところ
<ons-list-header>タグ内ではうまくいきましたが、
ng-click=“prompt()”
のpromptでの入力欄が、文字が見えない状況のままです。

お手数ですがご指導をお願いします。

[asial-matagawa]

@kyuhou
「promptでの入力欄」が何を指しているのかよく分かりません。
prompt 関数やその周辺のコードを貼り付けていただけますでしょうか？

[asial-matagawa]

@kyuhou
また、スクリーンショットがあると嬉しいです。

[kyuhou]

@asial-matagawa

これで、スクリーンショットが遅れるようですね。

index.htmlファイルに、次のコードがありました。

            $scope.prompt = function() {
                ons.notification.prompt({
                    title: "年齢の入力",
                    message: "年齢を入力してください",
                    callback: function(age) {
                        ons.notification.alert({
                            title: "入力結果",
                            message: 'あなたは' + parseInt(age || 0) + '才ですね。'
                        });
                    }
                });
            }

[asial-matagawa]

@kyuhou
こちらでも今回の問題を再現できました。
今回の問題は Onsen CSS Components のバグによるものと思われます。

修正方法についてですが、
ダウンロードした onsen-css-components.css の
.text-input--underbar { ~~~~ }
.text-input--underbar::invalid { ~~~~ }
に含まれる color: #fff; を color: #1f1f21; に修正していただけると、
ダイアログ内のテキスト入力欄の文字色のみを白から黒に修正することができます。

よろしくお願いいたします。

[kyuhou]

@asial-matagawa said:

.text-input–underbar::invalid { ~~~~ }

バージョンが違うのか.text-input–underbar::invalid { ~~~~ }は、ありませんでしたが、うまくいきました。
ただ、.text-input–underbar { ~~~~ }の中にcolor:が2つもあるのが気になりました。
color: inherit;
color: #fff;
今後ともよろしくお願いいたします。