Commit 18cd5970 authored by Dan Beam's avatar Dan Beam Committed by Commit Bot

WebUI Dark Mode: update simple welcome page

Screenshots: https://imgur.com/a/icbglBw

R=hcarmona@chromium.org
BUG=883049

Change-Id: I64fdd208abfbc71914b8f8a13d34e08d4d305b40
Reviewed-on: https://chromium-review.googlesource.com/c/1457719
Commit-Queue: Dan Beam <dbeam@chromium.org>
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Auto-Submit: Dan Beam <dbeam@chromium.org>
Reviewed-by: default avatarHector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#629864}
parent e6d47283
...@@ -15,6 +15,10 @@ body { ...@@ -15,6 +15,10 @@ body {
padding: 8px; padding: 8px;
} }
[dark] body {
color: var(--cr-primary-text-color);
}
.watermark { .watermark {
-webkit-mask-image: url(chrome://resources/images/google_logo.svg); -webkit-mask-image: url(chrome://resources/images/google_logo.svg);
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
...@@ -27,6 +31,10 @@ body { ...@@ -27,6 +31,10 @@ body {
width: 74px; width: 74px;
} }
[dark] .watermark {
background: var(--cr-secondary-text-color);
}
@media(max-height: 608px) { @media(max-height: 608px) {
.watermark { .watermark {
display: none; display: none;
......
<!doctype html> <!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}"> <html dir="$i18n{textdirection}" lang="$i18n{language}" $i18n{dark}>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>$i18n{headerText}</title> <title>$i18n{headerText}</title>
...@@ -7,14 +7,21 @@ ...@@ -7,14 +7,21 @@
<link rel="import" href="chrome://resources/html/polymer.html"> <link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html"> <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/cr.html"> <link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/util.html"> <link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="stylesheet" href="chrome://resources/css/md_colors.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="stylesheet" href="chrome://welcome/welcome.css"> <link rel="stylesheet" href="chrome://welcome/welcome.css">
<style>
html[dark] {
background-color: var(--md-background-color);
}
</style>
<dom-module id="welcome-app"> <dom-module id="welcome-app">
<template> <template>
<style include="paper-button-style"> <style include="paper-button-style">
...@@ -128,13 +135,17 @@ ...@@ -128,13 +135,17 @@
.subheading { .subheading {
animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both; animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both;
color: #5f6368; color: rgb(95, 99, 104);
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
margin-top: .25em; margin-top: .25em;
text-align: center; text-align: center;
} }
:host-context([dark]) .subheading {
color: var(--cr-secondary-text-color);
}
.logo { .logo {
animation: fadeIn 600ms both, bounce 1s 600ms linear both; animation: fadeIn 600ms both, bounce 1s 600ms linear both;
height: 96px; height: 96px;
...@@ -167,7 +178,6 @@ ...@@ -167,7 +178,6 @@
.signin { .signin {
animation: fadeInAndSlideUp 600ms 2s cubic-bezier(.4, .2, 0, 1) both; animation: fadeInAndSlideUp 600ms 2s cubic-bezier(.4, .2, 0, 1) both;
margin-top: 3em; margin-top: 3em;
text-align: left;
} }
.signin-description { .signin-description {
...@@ -227,5 +237,6 @@ ...@@ -227,5 +237,6 @@
<body> <body>
<welcome-app></welcome-app> <welcome-app></welcome-app>
<div class="watermark"></div> <div class="watermark"></div>
<link rel="import" href="chrome://resources/html/dark_mode.html">
</body> </body>
</html> </html>
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
#include "base/metrics/histogram_macros.h" #include "base/metrics/histogram_macros.h"
#include "build/build_config.h" #include "build/build_config.h"
#include "chrome/browser/signin/account_consistency_mode_manager.h" #include "chrome/browser/signin/account_consistency_mode_manager.h"
#include "chrome/browser/ui/webui/dark_mode_handler.h"
#include "chrome/browser/ui/webui/localized_string.h" #include "chrome/browser/ui/webui/localized_string.h"
#include "chrome/browser/ui/webui/welcome/nux/bookmark_handler.h" #include "chrome/browser/ui/webui/welcome/nux/bookmark_handler.h"
#include "chrome/browser/ui/webui/welcome/nux/constants.h" #include "chrome/browser/ui/webui/welcome/nux/constants.h"
...@@ -119,6 +120,8 @@ WelcomeUI::WelcomeUI(content::WebUI* web_ui, const GURL& url) ...@@ -119,6 +120,8 @@ WelcomeUI::WelcomeUI(content::WebUI* web_ui, const GURL& url)
content::WebUIDataSource* html_source = content::WebUIDataSource* html_source =
content::WebUIDataSource::Create(url.host()); content::WebUIDataSource::Create(url.host());
DarkModeHandler::Initialize(web_ui, html_source);
bool is_dice = bool is_dice =
AccountConsistencyModeManager::IsDiceEnabledForProfile(profile); AccountConsistencyModeManager::IsDiceEnabledForProfile(profile);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment