Tổng Hợp

Auto dark theme

Chrome 96 introduces an origin trial for Auto Dark Themes on Android. With this feature, the browser applies an automatically generated dark theme to light themed sites, when the user has opted into dark themes in the operating system. Users can opt-out of dark themes by either disabling the option on the OS level or in a specific setting in Chrome.

# Sign-up for the origin trial

You can also enable the darkening algorithm for your users, via an origin trial. This allows you to test how the Auto Dark Theme performs with regards to your KPIs.

Head over to the documentation to learn how to set up an origin trial, then sign-up for the AutoDarkMode origin trial to get a token.

# Test Auto Dark Theme on your device

To enable Auto Dark Theme in DevTools:

  1. Click the three dots menu.
  2. Select More Tools then Rendering.
  3. Select Enable on the Emulate auto dark mode option.

# On an Android phone

To test Auto Dark Theme on your Android phone:

  1. Navigate to chrome://flags and enable the #darken-websites-checkbox-in-theme-setting experiment.
  2. Then, tap the three dots menu, select Settings then Theme, and check the box with Apply Dark themes to sites, when possible.

Now, light pages will be darkened on the phone.

Even though we aim for Auto Dark Theme to generate good results in all cases, early conversations with developers suggested that they would like to tweak specific elements, to adapt better to their desired look and feel.

In this origin trial, those customizations are possible by using JavaScript to detect if the user is in Auto Dark Theme and then customizing the desired elements.

Using a prefer-color-scheme: dark media query to customize elements works when Auto Dark Theme is applied. However, it would also be applied by other browsers that don’t have Auto Dark Theme, leading to a page that has a light theme, but with only parts of it darkened.

Xem thêm :  Tóc bob xoăn ngắn đẹp – bí quyết trang điểm long lanh mùa giáng sinh

# Detecting Auto Dark Theme

To detect if the user is in Auto Dark Theme, create an element with the background-color set to canvas and the color-scheme set to light. If the computed color for the background is other than white (rgb(255, 255, 255)), then Auto Dark Theme is applied to the page.

<

div

id

=

"

detection

"


style

="

display

:

none

;

background-color

:

canvas

;

color-scheme

:

light

"

>


div

>

const

detectionDiv

=

document

.

querySelector

(

'#detection'

)

;



const

isAutoDark

=

getComputedStyle

(

detectionDiv

)

.

backgroundColor

!=

'rgb(255, 255, 255)'

;



if

(

isAutoDark

)

{


const

myElement

=

document

.

querySelector

(

'#my-element'

)

;


myElement

.

classList

.

add

(

'autoDarkOnlyStyle'

)

;


}

# Customizing a large number of elements

The solution above can be hard to scale if you need to customize a larger number of elements. An alternative is to use Auto Dark Theme detection to add a marker class to the page’s body:

function

setAutoDarkClass

(

)

{



const

detectionDiv

=

document

.

createElement

(

'div'

)

;


detectionDiv

.

style

.

display

=

'none'

;


detectionDiv

.

style

.

backgroundColor

=

'canvas'

;


detectionDiv

.

style

.

colorScheme

=

'light'

;


document

.

body

.

appendChild

(

detectionDiv

)

;



const

isAutoDark

=

getComputedStyle

(

detectionDiv

)

.

backgroundColor

!=

'rgb(255, 255, 255)'

;




document

.

body

.

removeChild

(

detectionDiv

)

;




if

(

isAutoDark

)

{


document

.

body

.

classList

.

add

(

'auto-dark-theme'

)

;


}


}


document

.

addEventListener

(

"DOMContentLoaded"

,

setAutoDarkClass

)

;

Then, use CSS to customize elements as needed:

.auto-dark-theme > #my-element

{


border-color

:

red

;


}

The per-element customization API is still in early development. We’re working with the standards teams to provide developers with a more expressive API for opt-out. You follow the conversation on this GitHub issue.

# How to opt-out of Auto Dark Theme

Besides respecting the user’s choice on their device, dark themes provide benefits to users such as battery life improvements and accessibility. Instead of opting out of Auto Dark Theme, we strongly recommend implementing your own curated dark theme instead, in order to respect the user’s preference and keep those benefits.

Xem thêm :  Cách Làm Bánh Tiêu “Không Cần Bột Nở” Với 4 Bước Đơn Giản Mà Cực Ngon

However, in the case where it’s not viable to implement your own dark theme, and the result generated by Auto Dark Theme is not satisfactory, it is possible to opt out from the feature,

# Using a meta tag

The first alternative for opting out of Auto Dark Theme is by adding the following meta tag to your page’s header. The advantage of using the meta tag is that it prevents Auto Dark Theme from being applied at all, which could cause a “flash of darkened content”.

<

head

>


<

meta

name

=

"

color-scheme

"

content

=

"

only light

"

>


...

head

>

# Per element opt-out

A second alternative for opting out is setting the value of the color-scheme CSS property to only light. Even though the per-element opt-out can be used to opt-out the entire page from Auto Dark Mode, an advantage of this approach is that it allows only opting out specific parts of the page:

#my-element

{


color-scheme

:

only light

;


}

It is still possible to use this approach to opt-out the entire page from Auto Dark Theme by setting the color-scheme on the :root element:

:root

{


color-scheme

:

only light

;


}

# Send us feedback!

Auto Dark Theme is still being specified, and we are looking for feedback across all areas of the implementation: from the results of the darkening algorithm to the developer APIs for element customization and opt-out.

There are many channels you can send us your feedback:

Photo by Félix Besombes.


Dark Mode ALL WEBSITES chrome Android


Turn on Dark Mode in Google Chrome https://www.youtube.com/watch?v=onuQSDAm3Y
Subscribe to our channel here https://bit.ly/2CGu262
VersatileKnowledge
In this Video, I have talked about a method by which you can turn on dark mode on all websites and web pages into DARK MODE in your Google Chrome on Android.

Xem thêm :  Game bắn súng sinh tồn free fire ob32

Watch other Versatile Knowledge Videos here
https://www.youtube.com/watch?v=8uxyR…
https://www.youtube.com/watch?v=WJpHo…
https://www.youtube.com/watch?v=3eXM_…
https://www.youtube.com/watch?v=Ltm2Y…
https://www.youtube.com/watch?v=zvnmQ…
https://www.youtube.com/watch?v=6qd1O…
https://www.youtube.com/watch?v=vxnz5…

Please Use this link to buy from Amazon https://amzn.to/2WsK5M6
Hello Everyone. Welcome to our channel Versatile Knowledge. Please subscribe to us and help us grow on this Online News \u0026 Media platform. Subscribe for new interesting video EVERY DAY.
Subscribe to our channel here https://bit.ly/2CGu262

OUR YOUTUBE GEARS:
1. MY CAMERA https://amzn.to/2OrHJdS
https://amzn.to/2CDUBJe
2. MY PHONE https://amzn.to/2JIgzR4
https://amzn.to/2WtsZy2
3. MY TRIPODS https://amzn.to/2WoqgWl
https://amzn.to/2WwNlXb
4. MY LAPTOP https://amzn.to/2CDUJsc
5. MY CHAIR https://amzn.to/2WsLkLg
6. LAPTOP COOLING PAD, KEYBOARD https://amzn.to/2TC8qgT
https://amzn.to/2U3iN2f
7. MY SPEAKERS https://amzn.to/2JWDKrh
https://amzn.to/2Wqefja
8. Buy Electronic products from here https://amzn.to/2WoVrAT

Links to our Social Media Handles –
Website https://versatileknowledgemediagroup….
Youtube – http://www.youtube.com/versatileknowl…
Instagram – https://www.instagram.com/versatilekn…
Twitter – https://twitter.com/versatileknow
Facebook –https://www.facebook.com/versatilekno…

Please help us to grow our channel \u0026 online news \u0026 media company Versatile Knowledge by buying from the following links
Buy from Amazon using this link – http://bit.ly/2EfKjQy
Buy from Flipkart using this link – https://bit.ly/2Ei2qpj
Buy from Myntra using this link – http://bit.ly/2V2dGvl
Buy from Nykaa using this link – http://bit.ly/2SZeoMt
Buy from PayTm mall using this link – http://bit.ly/2T1jfg8
Buy from Bewakoof.com using this link – https://bit.ly/2SUZgQq
Buy from BangGood.com using this link – https://bit.ly/2V3YDS0
Buy from GearBest.com using this link – https://bit.ly/2EgKjjk

NOTE: All content used is copyrighted to Versatile Knowledge Media Group, Use or commercial display or editing of the content without proper authorization is not allowed. Respect original content.

Xem thêm bài viết thuộc chuyên mục: Tổng Hợp Tại xmccomplex.com.vn

Related Articles

Back to top button