Just wanted to share a little personal theme I’ve been working on for a cozier / warmer dark mode feel.
My favorite change here is the removal of the rounded backgrounds from my widgets. I love how clean it feels now.
As an aside, does anyone know how I can get the tabs bar to cooperate?
Also would love to align the type colors to my tag colors, but those don’t seem to have a token assigned to them (just inline style hex code assignments from what I’m seeing in dev tools). Any ideas on how to modify those?
@import url('https://use.typekit.net/fqw8njb.css');
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
:root {
--font-size-title: 40px;
--line-height-title: 54px;
--letter-spacing-title: .5px;
--font-weight-title: 400;
--font-size-header1: 32px;
--line-height-header1: 40px;
--letter-spacing-header1: .5px;
--font-weight-header1: 300;
--font-size-header2: 24px;
--line-height-header2: 32px;
--letter-spacing-header2: -0.48px;
--font-weight-header2: 300;
--font-size-header3: 22px;
--line-height-header3: 26px;
--letter-spacing-header3: -0.28px;
--font-weight-header3: 300;
}
/* typeface changes */
.block.blockText.textTitle ,
.block.blockText.textHeader1,
.block.blockText.textHeader2,
.block.blockText.textHeader3,
.menus .menu.vertical .titleWrapper .title {
font-family: "bookmania", serif;
font-style: normal;
font-weight: 300;
}
.widget .head .clickable, .head, .title {
font-family: "broadsheet", serif;
font-weight: 400;
font-style: italic;
letter-spacing: .5px;
}
.widget .head .clickable .name {
font-size: 18px;
}
.sidebar .sidebarPage .spaceName .nameWrap .name {
font-size: 24px;
}
.block.blockText.textTitle ,
.block.blockText.textHeader1,
.blocks .block.blockDataview .dataviewControls,
.blocks .block.blockDataview .dataviewControls .viewItem,
.sidebar .sidebarPage .spaceName .nameWrap .name {
font-family: "broadsheet", serif;
font-weight: 400;
font-style: italic;
letter-spacing: .5px;
}
.block.blockText.textDescription {
font-family: "bookmania", serif;
font-weight: 300;
font-size: 18px;
}
html.themeDark {
--color-text-primary: #d0bdac;
--color-text-primary-70: rgba(225, 225, 225, 0.75);
--color-text-secondary: #a4908a;
--color-text-tertiary: #654a3f;
--color-text-inversion: #171717;
--color-shape-primary: #402519;
--color-shape-secondary: #402519;
--color-shape-tertiary: #402519;
--color-shape-highlight-dark: rgba(255, 255, 255, .11);
--color-shape-highlight-medium: rgba(255, 255, 255, .05);
--color-shape-highlight-light: rgba(255, 255, 255, .0);
--color-shape-highlight-light-solid: rgba(255, 255, 255, .0);
--color-control-accent: #816136;
--color-control-active: #654a3f;
--color-control-inactive: #414141;
--color-control-bg: #fff;
--color-bg-primary: #2a160f;
--color-bg-primary-90: rgba(23, 23, 23, .9);
--color-bg-secondary: #210d06;
--color-bg-loader: rgba(0, 0, 0, .7);
--color-attachment-loader: rgba(255, 255, 255, .7);
--color-very-light-yellow: #3a240e;
--color-light-yellow: #693d10;
--color-yellow: #f38516;
--color-dark-yellow: #facda2;
--color-very-light-orange: #391f14;
--color-light-orange: #66321b;
--color-orange: #ed6931;
--color-dark-orange: #f7c3ac;
--color-very-light-red: #38171c;
--color-light-red: #63222a;
--color-red: #e64157;
--color-dark-red: #f5b3bc;
--color-very-light-pink: #391a2d;
--color-light-pink: #65274e;
--color-pink: #e94eb0;
--color-dark-pink: #f6b8df;
--color-very-light-purple: #311b37;
--color-light-purple: #552962;
--color-purple: #c154e2;
--color-dark-purple: #e6baf3;
--color-very-light-blue: #23253a;
--color-light-blue: #383e68;
--color-blue: #7a88f0;
--color-dark-blue: #c9cff9;
--color-very-light-ice: #1c2e33;
--color-light-ice: #2b4e59;
--color-ice: #59b1cc;
--color-dark-ice: #bcdfeb;
--color-very-light-teal: #1a2b25;
--color-light-teal: #264a3c;
--color-teal: #4da783;
--color-dark-teal: #b7dbcd;
--color-very-light-lime: #292d1c;
--color-light-lime: #464d2b;
--color-lime: #9cae58;
--color-dark-lime: #d7debc;
--color-very-light-grey: #24201f;
--color-light-grey: #3a3332;
--color-grey: #7e6d69;
--color-dark-grey: #cbc4c3;
--color-tag-grey: #7e6d69;
--color-system-accent-125: #105aef;
--color-system-accent-50: #699bff;
--color-system-accent-25: #9bbcff;
--color-system-highlight: rgba(55, 122, 255, .15);
--color-system-selection: rgba(55, 122, 255, .25);
--color-system-destructive-50: #74321e;
--color-system-destructive-25: #3b251e;
--color-icon: #816136;
--color-icon-hover: #402519;
}
/* spaces background colors */
.sidebar .sidebarPage.pageVault,
.sidebar .pageWrapper {
background: var(--color-bg-secondary);
}
/* hides chat box */
.socialBlockWrap {
display: none
}
/* scrollbar colors */
html.themeDark {
scrollbar-color: var(--color-shape-primary) var(--color-bg-primary);
}
html.themeDark .sidebar>#containerWidget>.body {
scrollbar-color: var(--color-shape-primary) var(--color-shape-highlight-light-hex);
}
/* highlight background colors */
html.themeDark .blocks .block.blockText markupbgcolor.bgColor-grey {
background: var(--color-light-grey) !important;
}
html.themeDark .blocks .block.blockText markupbgcolor.bgColor-yellow {
background: var(--color-light-yellow) !important;
}
html.themeDark .blocks .block.blockText markupbgcolor.bgColor-orange {
background: var(--color-light-orange) !important;
}
html.themeDark .blocks .block.blockText markupbgcolor.bgColor-red {
background: var(--color-light-red) !important;
}
html.themeDark .blocks .block.blockText markupbgcolor.bgColor-pink {
background: var(--color-light-pink) !important;
}
html.themeDark .blocks .block.blockText markupbgcolor.bgColor-purple {
background: var(--color-light-purple) !important;
}
html.themeDark .blocks .block.blockText markupbgcolor.bgColor-blue {
background: var(--color-light-blue) !important;
}
html.themeDark .blocks .block.blockText markupbgcolor.bgColor-ice {
background: var(--color-light-ice) !important;
}
html.themeDark .blocks .block.blockText markupbgcolor.bgColor-teal {
background: var(--color-light-teal) !important;
}
html.themeDark .blocks .block.blockText markupbgcolor.bgColor-lime {
background: var(--color-light-lime) !important;
}
html.themeDark .menus .menu .icon.color .inner.bgColor-yellow {
background: var(--color-light-yellow) !important;
}
html.themeDark .menus .menu .icon.color .inner.bgColor-orange {
background: var(--color-light-orange) !important;
}
html.themeDark .menus .menu .icon.color .inner.bgColor-red {
background: var(--color-light-red) !important;
}
html.themeDark .menus .menu .icon.color .inner.bgColor-pink {
background: var(--color-light-pink) !important;
}
html.themeDark .menus .menu .icon.color .inner.bgColor-purple {
background: var(--color-light-purple) !important;
}
html.themeDark .menus .menu .icon.color .inner.bgColor-blue {
background: var(--color-light-blue) !important;
}
html.themeDark .menus .menu .icon.color .inner.bgColor-ice {
background: var(--color-light-ice) !important;
}
html.themeDark .menus .menu .icon.color .inner.bgColor-teal {
background: var(--color-light-teal) !important;
}
html.themeDark .menus .menu .icon.color .inner.bgColor-lime {
background: var(--color-light-lime) !important;
}
html.themeDark .menus .menu .colorMark.bgColor-default {
background: transparent;
}
html.themeDark .menus .menu .colorMark.bgColor-grey {
background: var(--color-light-grey) !important;
}
html.themeDark .menus .menu .colorMark.bgColor-yellow {
background: var(--color-light-yellow) !important;
}
html.themeDark .menus .menu .colorMark.bgColor-orange {
background: var(--color-light-orange) !important;
}
html.themeDark .menus .menu .colorMark.bgColor-red {
background: var(--color-light-red) !important;
}
html.themeDark .menus .menu .colorMark.bgColor-pink {
background: var(--color-light-pink) !important;
}
html.themeDark .menus .menu .colorMark.bgColor-purple {
background: var(--color-light-purple) !important;
}
html.themeDark .menus .menu .colorMark.bgColor-blue {
background: var(--color-light-blue) !important;
}
html.themeDark .menus .menu .colorMark.bgColor-ice {
background: var(--color-light-ice) !important;
}
html.themeDark .menus .menu .colorMark.bgColor-teal {
background: var(--color-light-teal) !important;
}
html.themeDark .menus .menu .colorMark.bgColor-lime {
background: var(--color-light-lime) !important;
}