Skip to content

Instantly share code, notes, and snippets.

@Gioni06
Last active May 1, 2020 07:14
Show Gist options
  • Save Gioni06/d182ce9b1a22c66022f655409d465379 to your computer and use it in GitHub Desktop.
Save Gioni06/d182ce9b1a22c66022f655409d465379 to your computer and use it in GitHub Desktop.
dark mode with css
:root {
--background-color: #fff;
--page-width: 70em;
--primary-color: #151513;
--font-color: #151513;
--subtle-primary-color: #151513;
--block-background-color: #f1f3f4;
--menu-item-color: #000;
--menu-item-hover-color: #000;
--menu-item-alert-bg: #ffffff;
--menu-item-alert-shadow: #dfe1e7;
--alert-border-color: #dfe1e7;
--tertiary-color: #727680;
}
@media (prefers-color-scheme: light) {
:root {
--background-color: #fff;
--page-width: 70em;
--primary-color: #151513;
--font-color: #151513;
--subtle-primary-color: #151513;
--block-background-color: #f1f3f4;
--menu-item-color: #000;
--menu-item-hover-color: #000;
--menu-item-alert-bg: #ffffff;
--menu-item-alert-shadow: #dfe1e7;
--alert-border-color: #dfe1e7;
--tertiary-color: #727680;
}
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #1e1e1e;
--primary-color: #157efb;
--font-color: #dedede;
--subtle-primary-color: #151513;
--block-background-color: #323232;
--menu-item-color: #dedede;
--menu-item-hover-color: #157efb;
--menu-item-alert-bg: #151513;
--menu-item-alert-shadow: #151513;
--alert-border-color: #000;
--tertiary-color: #727680;
}
}
@Gioni06
Copy link
Author

Gioni06 commented Sep 7, 2019

You missed a colon in the very beginning

Good catch! Thanks. I fixed it.

@nibl
Copy link

nibl commented Apr 30, 2020

Typo: two colons in --tertiary-color:: #727680;

Two occurrences, in top and bottom sections.

@Gioni06
Copy link
Author

Gioni06 commented May 1, 2020

Fixed! Thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment