Dark mode

 

Hello Freinds 

in this post you can read responsive design for dark mode for exemple buttons ,icons ,colors and size  

Here we go 

for Box Shadow

don't use a big color opacity

css setting 

  .class {
               width: 500px;
    height: 400px;
    border-radius: 20px;
    background-color: rgb(26, 26, 26);
    margin-left: 1%;
    margin-right: auto;
    margin-top: 5rem;
    box-shadow: 6px 6px 20px rgba(218, 218, 218, 0.211); 
        }
  

for the primary surface color for components.

hex color #121212

A dark theme uses dark grey, rather than black, as the primary surface color for components. Dark grey surfaces can express a wider range of color, elevation, and depth, because it's easier to see shadows on grey (instead of black).

To be able to differentiate between a background and an object.

Dark grey surfaces also reduce eye strain, as light text on a dark grey surface has less contrast than light text on a black surface.

The Color System

Primary Color

For Primary color you can use (in dark mode) Purple hex color :  #bb86fc 

or use this color (in light mode) Blue hex color :  #3700b3

you may use primary color in button ,links  and primary info bar.

Secondary Color 

A secondary color can be used to accent select parts of your UI for example views number bar. In a dark theme, a secondary color can be desaturated to meet the 4.5:1 contrast level.

Tickle Me Pink hex color : #ff7597

Robin's Egg Blue hex color : #03dac5

you may use secondary color in notification bar , second button, icons hover and active color .

for Surface containers

Note For surface containers that use the "Primary" color, their state overlay is white.