eryn/hugo-theme-termlite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
hugo-theme-termlite/assets/css/010_colors.css

75 lines
1.5 KiB
CSS
Raw Normal View History

Meta: Remove all the block comments at the top of CSS assets
2024-07-25 13:11:40 -07:00
CSS Checkpoint - Add the system_css template - Name the CSS files in the css directory with a numeric prefix so they sort by priority.
2024-06-28 09:03:28 -07:00
/*********
# COLORS
*********/
:root {
--gray1: rgb(14 16 27);
--gray2: rgb(28 33 49);
--gray3: rgb(52 59 82);
--gray4: rgb(87 94 120);
--gray5: rgb(138 144 166);
--gray6: rgb(200 204 217);
--gray7: rgb(249 251 255);
Bring over the gradient from erynwells.me as a .text-color--gradient class
2024-06-29 10:28:41 -07:00
--light-blue: rgb(69 212 243);
--blue: rgb(28 168 239);
--dark-blue: rgb(63 46 231);
--lilac: rgb(187 121 245);
--purple: rgb(197 141 244);
Colors: Allow setting the color scheme explicitly In addition to the color scheme changing based on the system setting, enable setting the color scheme explicitly by adding a color-scheme="light | dark" attribute on the <html> element. Doing this was a bit tricky. I originally implemented the grayscale ramp by reversing it when prefers-color-scheme: dark. This was convenient, but meant that setting the color scheme explicitly didn't work. Along the way I discovered the light-dark() CSS function. Deploy that as the preferred style if the browser supports it. Otherwise, fall back on the prefers-color-scheme media queries. This function only works if color-scheme: light dark is set on the :root element.
2024-07-27 22:59:56 -07:00
color-scheme: light dark;
CSS Checkpoint - Add the system_css template - Name the CSS files in the css directory with a numeric prefix so they sort by priority.
2024-06-28 09:03:28 -07:00
}
Colors: Allow setting the color scheme explicitly In addition to the color scheme changing based on the system setting, enable setting the color scheme explicitly by adding a color-scheme="light | dark" attribute on the <html> element. Doing this was a bit tricky. I originally implemented the grayscale ramp by reversing it when prefers-color-scheme: dark. This was convenient, but meant that setting the color scheme explicitly didn't work. Along the way I discovered the light-dark() CSS function. Deploy that as the preferred style if the browser supports it. Otherwise, fall back on the prefers-color-scheme media queries. This function only works if color-scheme: light dark is set on the :root element.
2024-07-27 22:59:56 -07:00
@media screen and (prefers-color-scheme: light) {
:root {
--background-color: var(--gray7);
--hr-color: var(--gray1);
--text-color-primary: var(--gray1);
--text-color-secondary: var(--gray4);
--text-color-light: var(--gray5);
}
}
@media screen and (prefers-color-scheme: dark) {
CSS Checkpoint - Add the system_css template - Name the CSS files in the css directory with a numeric prefix so they sort by priority.
2024-06-28 09:03:28 -07:00
:root {
Colors: Allow setting the color scheme explicitly In addition to the color scheme changing based on the system setting, enable setting the color scheme explicitly by adding a color-scheme="light | dark" attribute on the <html> element. Doing this was a bit tricky. I originally implemented the grayscale ramp by reversing it when prefers-color-scheme: dark. This was convenient, but meant that setting the color scheme explicitly didn't work. Along the way I discovered the light-dark() CSS function. Deploy that as the preferred style if the browser supports it. Otherwise, fall back on the prefers-color-scheme media queries. This function only works if color-scheme: light dark is set on the :root element.
2024-07-27 22:59:56 -07:00
--background-color: var(--gray1);
--hr-color: var(--gray7);
--text-color-primary: var(--gray7);
--text-color-secondary: var(--gray5);
--text-color-light: var(--gray4);
CSS Checkpoint - Add the system_css template - Name the CSS files in the css directory with a numeric prefix so they sort by priority.
2024-06-28 09:03:28 -07:00
}
}
Colors: Allow setting the color scheme explicitly In addition to the color scheme changing based on the system setting, enable setting the color scheme explicitly by adding a color-scheme="light | dark" attribute on the <html> element. Doing this was a bit tricky. I originally implemented the grayscale ramp by reversing it when prefers-color-scheme: dark. This was convenient, but meant that setting the color scheme explicitly didn't work. Along the way I discovered the light-dark() CSS function. Deploy that as the preferred style if the browser supports it. Otherwise, fall back on the prefers-color-scheme media queries. This function only works if color-scheme: light dark is set on the :root element.
2024-07-27 22:59:56 -07:00
:root {
--background-color: light-dark(var(--gray7), var(--gray1));
Tweak <hr> so it looks good in dark mode
2024-11-19 20:53:28 -08:00
--hr-color: var(--text-color-secondary);
Colors: Allow setting the color scheme explicitly In addition to the color scheme changing based on the system setting, enable setting the color scheme explicitly by adding a color-scheme="light | dark" attribute on the <html> element. Doing this was a bit tricky. I originally implemented the grayscale ramp by reversing it when prefers-color-scheme: dark. This was convenient, but meant that setting the color scheme explicitly didn't work. Along the way I discovered the light-dark() CSS function. Deploy that as the preferred style if the browser supports it. Otherwise, fall back on the prefers-color-scheme media queries. This function only works if color-scheme: light dark is set on the :root element.
2024-07-27 22:59:56 -07:00
--text-color-primary: light-dark(var(--gray1), var(--gray7));
--text-color-secondary: light-dark(var(--gray4), var(--gray5));
--text-color-light: light-dark(var(--gray5), var(--gray4));
}
:root[color-scheme="dark"] {
color-scheme: only dark;
}
:root[color-scheme="light"] {
color-scheme: only light;
}
CSS Checkpoint - Add the system_css template - Name the CSS files in the css directory with a numeric prefix so they sort by priority.
2024-06-28 09:03:28 -07:00
body {
background-color: var(--background-color);
Colors: Allow setting the color scheme explicitly In addition to the color scheme changing based on the system setting, enable setting the color scheme explicitly by adding a color-scheme="light | dark" attribute on the <html> element. Doing this was a bit tricky. I originally implemented the grayscale ramp by reversing it when prefers-color-scheme: dark. This was convenient, but meant that setting the color scheme explicitly didn't work. Along the way I discovered the light-dark() CSS function. Deploy that as the preferred style if the browser supports it. Otherwise, fall back on the prefers-color-scheme media queries. This function only works if color-scheme: light dark is set on the :root element.
2024-07-27 22:59:56 -07:00
color: var(--text-color-primary);
CSS Checkpoint - Add the system_css template - Name the CSS files in the css directory with a numeric prefix so they sort by priority.
2024-06-28 09:03:28 -07:00
}
hr {
border: 0;
Fix <hr> elements
2024-11-07 09:11:07 -08:00
border-bottom: 2px dashed var(--hr-color);
CSS Checkpoint - Add the system_css template - Name the CSS files in the css directory with a numeric prefix so they sort by priority.
2024-06-28 09:03:28 -07:00
color: var(--hr-color);
Fix <hr> elements
2024-11-07 09:11:07 -08:00
width: 100%;
CSS Checkpoint - Add the system_css template - Name the CSS files in the css directory with a numeric prefix so they sort by priority.
2024-06-28 09:03:28 -07:00
}
Reference in a new issue Copy permalink