Daily Note Themes.css

/*------------------------------------------------------------------------------
                     Daily Note Themes by CyanVoxel v1.0.5

These are a set of 7 main CSS classes that can be used to apply individual color
schemes to daily notes for each day of the week.
To customize the colors for each day, just swamp out the colors values under
the main "day of the week" classes.

NOTE: By default, this snippet relies on the "Bai Jamjuree" or
"JetBrainsMono Nerd Font Mono" fonts. If you don't wish to use these, then just
change or remove those font-family lines from this snippet.
                
------------------------------------------------------------------------------*/
:root {
  --highlight: #ffffff;
  --primary: #aaaaaa;
  --dark: #333333;
}

.daily {
  --dark: var(--dark);
  color: var(--highlight);
  background-color: var(--dark);
  --text-normal: var(--highlight);
  --text-muted: var(--highlight);
  --text-faint: var(--highlight);
  --checklist-done-color: var(--highlight);
  --metadata-label-text-color: var(--highlight);
  --metadata-input-text-color: var(--highlight);
  --tag-color: var(--dark);
  --tag-background: var(--primary);
  --hr-color: var(--primary);
  --blockquote-border-color: var(--primary);
  --interactive-accent: var(--primary);
  --collapse-icon-color-collapsed: var(--primary);
  --checkbox-color: var(--primary);
  --checkbox-marker-color: var(--dark);
  --checkbox-color-hover: var(--highlight);
  --checkbox-border-color: var(--highlight);
  --list-marker-color: var(--highlight);
  --code-background: black;
  --code-normal: var(--primary);

  --background-modifier-border-focus: var(--primary);
  --background-modifier-border: color-mix(in srgb, var(--highlight) 60%, transparent);
  --background-modifier-hover: color-mix(in srgb, var(--highlight) 60%, transparent);
  --pill-cover-hover: color-mix(in srgb, var(--highlight) 60%, transparent);
}

.sunday, .Sunday {
  --highlight: #f39caa;
  --primary: #f6466f;
  --dark: #2d0916;
}
.monday, .Monday {
  --highlight: #fcadaa;
  --primary: #f65848;
  --dark: #3c0e0b;
}
.tuesday, .Tuesday {
  --highlight: #aedbfa;
  --primary: #3b87f0;
  --dark: #070615;
}
.wednesday, .Wednesday {
  --highlight: #fff3c4;
  --primary: #ffd63d;
  --dark: #2c1404;
}
.thursday, .Thursday {
  --highlight: #f7b79b;
  --primary: #ed6022;
  --dark: #210b04;
}
.friday, .Friday {
  --highlight: #e9f9b7;
  --primary: #92e649;
  --dark: #192108;
}
.saturday, .Saturday{
  --highlight: #f39caa;
  --primary: #e22c3c;
  --dark: #100305;
}

.daily :is(h1, .HyperMD-header.HyperMD-header-1) {
  color: var(--primary);
  text-align: center;
  font-size: 60px;
  font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono", "JetBrains Mono";
  padding: 0 !important;
}
.daily :is(h2, .HyperMD-header.HyperMD-header-2) {
  color: var(--highlight);
  text-align: center;
  font-size: 30px;
  font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono", "JetBrains Mono";
  font-style: italic;
  padding: 0 !important;
}
.daily :is(h3, .HyperMD-header.HyperMD-header-3) {
  color: var(--primary);
  text-align: center;

  font-size: 32px;
  font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono", "JetBrains Mono";
  padding-top: 0;
}
.daily :is(h4, .HyperMD-header.HyperMD-header-4) {
  background-color: var(--primary);
  color: var(--dark);
  /* border-color: var(--primary); */
  /* font-family: "JetBrainsMono Nerd Font Mono", "JetBrains Mono", monospace; */
  font-weight: 900;
  margin-bottom: 0;
  padding-top: 0;
  font-size: 20px;
  width: fit-content;
  padding-left: 6px;
  padding-right: 6px;
  /* border: solid; */
  border-radius: 8px;
  /* border-width: 2px; */
  word-wrap: normal;
}
.daily p {
  margin-top: 4px;
  margin-bottom: 4px;
}
.daily :is(a:link, .cm-hmd-internal-link) {
  color: var(--primary);
}
.daily :is(a:hover, .cm-hmd-internal-link:hover) {
  color: var(--highlight);
}
.daily hr {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.daily img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

:is(.sunday, .Sunday,
.monday, .Monday,
.tuesday, .Tuesday,
.wednesday, .Wednesday,
.thursday, .Thursday,
.friday, .Friday,
.saturday, .Saturday
  )
  svg {
  color: color-mix(in srgb, var(--highlight) 60%, transparent);
}