Update app.py

app.py

@@ -10,46 +10,84 @@ def display_html(html_code):
         </div>
     """
 
-# インターコンチネンタルホテル石垣島のクラブラウンジ風のテーマ設定。
-# 白基調で、少し青みがかったアクセントを加える。
-theme = gr.themes.Base(
-    primary_hue="slate", # 全体の基本色を少し青みがかったグレーに
-    secondary_hue="blue",
-    neutral_hue="slate",
-
+# カスタムテーマ (大幅改良)
+theme = gr.themes.Default(
+    primary_hue=gr.themes.colors.indigo,  # メインカラーを洗練されたインディゴに
+    secondary_hue=gr.themes.colors.blue,
+    neutral_hue=gr.themes.colors.gray,
+    font=[gr.themes.GoogleFont('Inter'), 'ui-sans-serif', 'system-ui', 'sans-serif'], # モダンなフォント
 ).set(
-    body_background_fill="#f8f9fa",  # 非常に薄いグレー
-    body_text_color="black",
-    button_primary_background_fill="#e0f2fe",   # ごく薄い水色
-    button_primary_background_fill_hover="#bae6fd",
-    button_primary_text_color="black",
-    border_color_primary="#d1d5db",  # やや濃いグレー
+    # 全体的なスタイルの微調整
+    body_background_fill="linear-gradient(to bottom right, #f5f5f5, #e0e7ff)",  # 美しいグラデーション背景
+    body_text_color="rgba(0, 0, 0, 0.8)",  # ほんのり透明感のある黒
+    body_text_size="*text_md",
+    body_text_color_subdued="rgba(0, 0, 0, 0.6)",
+
+    # ブロック要素のスタイル
     block_background_fill="white",
-    block_title_text_color="#3b82f6", #青色
-    block_label_text_color="#1d4ed8", #濃い青
-    block_border_color="white",
+    block_border_color="rgba(0, 0, 0, 0.1)",  # 非常に薄い境界線
+    block_border_width="1px",
+    block_border_radius="*radius_lg", # 大きめの角丸
+    block_title_text_weight="600",
+    block_label_background_fill="rgba(0, 0, 0, 0.04)", #ラベルの背景色
+    block_label_text_color="*primary_500", #ラベルの色
+    block_label_text_size="*text_sm",
+    block_label_margin="0.5rem",
+
+    # ボタンのスタイル
+    button_primary_background_fill="*primary_500", #ボタンの背景色
+    button_primary_background_fill_hover="*primary_600",
+    button_primary_text_color="white",
+    button_primary_border_radius="*radius_lg",
+    button_secondary_background_fill="white",
+    button_secondary_border_color="*primary_500",
+    button_secondary_text_color="*primary_500",
+     # 影
+    button_shadow="*shadow_drop_lg",
+    button_shadow_hover="*shadow_drop_lg",
+
+    # テキストボックス
+    input_background_fill="#f9fafb",
+    input_border_color="rgba(0, 0, 0, 0.2)",
+    input_border_width="1px",
+    input_text_size="*text_md",
+    input_placeholder_color="rgba(0, 0, 0, 0.4)",
+
+    # その他
+    background_fill_secondary="white", #背景色
+    border_color_accent="*primary_500",
+    border_color_primary="rgba(0, 0, 0, 0.2)",
+
+    #リンクの色
+    link_text_color = "*secondary_500",
+    link_hover_color = "*secondary_600",
+    link_visited_color = "*secondary_700",
+
 
 )
 
 
-with gr.Blocks(theme=theme, title="HTML Viewer") as demo:  #themeを指定
+
+with gr.Blocks(theme=theme, title="HTML Viewer") as demo:
     gr.Markdown(
     """
     # HTML Viewer
 
     入力されたHTMLコードを、プレビュー表示します。
 
+    * 横スクロール禁止、縦スクロール許可
+    * レスポンシブデザイン (Gradio デフォルト)
+    * スマホでの表示は、PC版を縮小したようなイメージ
+    * インターコンチネンタル石垣島のクラブラウンジ風の、白く爽やかな外観(インディゴブルーでスタイリッシュに)
     """)
     with gr.Row():
-
         with gr.Column(scale=1):
-
             input_textbox = gr.Textbox(
                 label="HTMLコードを入力",
                 placeholder="ここにHTMLコードを貼り付けてください...",
                 lines=10
                 )
-            submit_button = gr.Button("表示")
+            submit_button = gr.Button("表示", variant="primary")  # プライマリボタンに
         with gr.Column(scale=3):
             output_html = gr.HTML(label="プレビュー",)
 
@@ -58,6 +96,7 @@ with gr.Blocks(theme=theme, title="HTML Viewer") as demo:  #themeを指定
         inputs=input_textbox,
         outputs=output_html
     )
+
     #サンプル
     gr.Examples(
         [["<h1>Hello world</h1>"],["""