如何切换整个页面的深色主题? [英] How to toggle dark theme for whole page?

问题描述

按html和flask的复选框，我设法切换了深色主题和浅色主题.但是，如何使深色主题不仅可以覆盖某些div元素，还可以覆盖整个页面?边距仍然是轻巧的主题...下面的CSS代码:

I have managed to toggle dark theme and light theme at press of checkbox in html and flask. But how can i make the dark theme cover the whole page, not just some div elements? The margins are still light theme... CSS code below:

.container {
  display: flow;
  width: 100%;
  height: 100%;
  background: var(--color-secondary);
}
        .theme-light {
            --color-primary: #0060df;
            --color-secondary: #fbfbfe;
            --color-accent: #fd6f53;
            --font-color: #000000;
        }

        .theme-dark {
            --color-primary: #17ed90;
            --color-secondary: #2a2c2d;
            --color-accent: #12cdea;
            --font-color: #ffffff;
            width: 100%;
            height: 100%;
        }

这是当前的黑暗主题:

This is the present dark theme:

推荐答案

body{
   background: var(--color-secondary);
}
.container {
   display: flow;
   width: 100%;
   height: 100%;
   background: var(--color-secondary);
}
    .theme-light {
        --color-primary: #0060df;
        --color-secondary: #fbfbfe;
        --color-accent: #fd6f53;
        --font-color: #000000;
    }

    .theme-dark {
        --color-primary: #17ed90;
        --color-secondary: #2a2c2d;
        --color-accent: #12cdea;
        --font-color: #ffffff;
        width: 100%;
        height: 100%;
    }

这篇关于如何切换整个页面的深色主题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！