lakelib 0.3.4 → 0.3.6

package/lib/lake.css

@@ -5,16 +5,20 @@
   --lake-text-color: #000000e0;
   --lake-secondary-text-color: #000000a6;
   --lake-border-color: #d9d9d9;
-  --lake-background-hover-color: #0000000a;
-  --lake-background-active-color: #0000000d;
+  --lake-background-color: #fff;
   --lake-success-color: #52c41a;
   --lake-warning-color: #faad14;
   --lake-error-color: #ff4d4f;
   /* selection */
   --lake-selection-background-color: #1ba2e333;
+  /* mark */
+  --lake-code-background-color: #8e96aa24;
   /* link */
   --lake-link-color: #1677ff;
   --lake-link-hover-color: #69b1ff;
+  /* block quotation */
+  --lake-blockquote-text-color: #000000a6;
+  --lake-blockquote-border: 4px solid #0505050f;
   /* box */
   --lake-box-border-color: #d9d9d9;
   --lake-box-border-focus-color: #1677ff;
@@ -23,17 +27,56 @@
   --lake-popup-z-index: 822;
   --lake-popup-font-size: 14px;
   --lake-popup-border-color: #d9d9d9;
+  --lake-popup-background-color: #fff;
   --lake-popup-shadow: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
   /* button */
   --lake-button-font-size: 14px;
+  --lake-button-border-color: #d9d9d9;
+  --lake-button-background-hover-color: #0000000a;
+  --lake-button-background-active-color: #0000000d;
   --lake-button-shadow: 0 2px 0 #00000005;
   --lake-button-outline: 2px solid #69b1ff;
-  /* input element, text field */
+  /* text field */
   --lake-input-border-color: #d9d9d9;
   --lake-input-border-hover-color: #69b1ff;
   --lake-input-outline: 2px solid #69b1ff;
 }
 
+.lake-dark {
+  /* common */
+  --lake-text-color: #f0f6fc;
+  --lake-secondary-text-color: #9198a1;
+  --lake-border-color: #3d444d;
+  --lake-background-color: #1b1b1f;
+  /* selection */
+  --lake-selection-background-color: #184c9d;
+  /* mark */
+  --lake-code-background-color: #65758529;
+  /* link */
+  --lake-link-color: #4493f8;
+  --lake-link-hover-color: #58a6ff;
+  /* block quotation */
+  --lake-blockquote-text-color: #9e9e9e;
+  --lake-blockquote-border: 4px solid #3d444d;
+  /* box */
+  --lake-box-border-color: #3d444d;
+  --lake-box-border-focus-color: #4493f8;
+  --lake-box-background-color: #3d444d;
+  /* popup */
+  --lake-popup-border-color: #3d444d;
+  --lake-popup-background-color: #252525;
+  --lake-popup-shadow: #0000001f 0px 8px 4px, #0000003d 0px 8px 16px;
+  /* button */
+  --lake-button-border-color: #3d444d;
+  --lake-button-background-hover-color: #343434;
+  --lake-button-background-active-color: #343434;
+  --lake-button-outline: 2px solid #58a6ff;
+  /* text field */
+  --lake-input-border-color: #3d444d;
+  --lake-input-border-hover-color: #58a6ff;
+  --lake-input-outline: 2px solid #58a6ff;
+}
+
 @keyframes lakerotate {
   0% {
     transform: rotate(0);
@@ -46,6 +89,7 @@
 .lake-container-wrapper {
   position: relative;
 }
+
 .lake-container {
   box-sizing: border-box;
   font-family: var(--lake-font-family);
@@ -54,19 +98,23 @@
   line-height: 1.45;
   padding: 16px 24px;
 }
+
 .lake-container:focus {
   outline: none;
 }
+
 .lake-container::selection,
 .lake-container ::selection {
   color: inherit;
   background: var(--lake-selection-background-color);
 }
+
 .lake-container *,
 .lake-container ::before,
 .lake-container ::after {
   box-sizing: border-box;
 }
+
 .lake-container.lake-placeholder::before {
   position: absolute;
   top: 8px;
@@ -75,22 +123,28 @@
   content: attr(placeholder);
   pointer-events: none;
 }
+
 .lake-container bookmark {
   display: inline;
 }
+
 .lake-container p {
   margin: 0;
   padding: 0;
   margin-bottom: 8px;
 }
+
 .lake-container a {
+  font-weight: normal;
   color: var(--lake-link-color);
   text-decoration: none;
 }
+
 .lake-container a:hover {
   color: var(--lake-link-hover-color);
   text-decoration: underline;
 }
+
 .lake-drop-indication {
   position: absolute;
   height: 2px;
@@ -99,6 +153,7 @@
   pointer-events: none;
   display: none;
 }
+
 .lake-drop-indication svg {
   position: absolute;
   top: -7.5px;
@@ -109,32 +164,42 @@
   pointer-events: none;
 }
 
+.lake-dark {
+  color-scheme: dark;
+}
+
 .lake-container strong {
   font-weight: 600;
 }
+
 .lake-container i {
   font-style: italic;
 }
+
 .lake-container u {
   text-decoration: underline;
 }
+
 .lake-container s {
   text-decoration: line-through;
 }
+
 .lake-container sub {
   vertical-align: sub;
   font-size: 0.85em;
 }
+
 .lake-container sup {
   vertical-align: super;
   font-size: 0.85em;
 }
+
 .lake-container code {
   font-family: Consolas, Courier, monospace;
   font-size: 0.9em;
   border-radius: 3px;
   padding: 0.2em 0.4em;
-  background-color: #0000000a;
+  background-color: var(--lake-code-background-color);
 }
 
 lake-box {
@@ -142,35 +207,44 @@ lake-box {
   padding: 0;
   text-indent: 0;
 }
+
 lake-box[type="inline"] {
   display: inline flex;
 }
+
 lake-box[type="block"] {
   display: block grid;
   grid-template-columns: 1px calc(100% - 2px) 1px;
 }
+
 lake-box .lake-box-strip {
   display: block;
   min-width: 1px;
 }
+
 lake-box[type="inline"] .lake-box-strip {
   align-self: flex-end;
 }
+
 lake-box[type="block"] .lake-box-strip {
   align-self: stretch;
 }
+
 lake-box .lake-box-strip ::selection {
   background: transparent;
 }
+
 lake-box .lake-box-container {
   display: block;
   align-self: center;
 }
+
 lake-box .lake-box-hovered .lake-corner-toolbar,
 lake-box .lake-box-focused .lake-corner-toolbar,
 lake-box .lake-box-activated .lake-corner-toolbar {
   display: flex;
 }
+
 lake-box .lake-box-focused .lake-resizer {
   display: block;
 }
@@ -181,7 +255,7 @@ button.lake-button {
   font-family: Arial;
   font-size: var(--lake-button-font-size);
   color: var(--lake-text-color);
-  background-color: #fff;
+  background-color: transparent;
   padding: 0;
   margin: 0 1px;
   line-height: 0;
@@ -189,13 +263,16 @@ button.lake-button {
   cursor: pointer;
   user-select: none;
 }
+
 button.lake-button:focus-visible {
   outline: var(--lake-button-outline);
 }
+
 button.lake-button[disabled] {
   opacity: 0.25;
   cursor: default;
 }
+
 button.lake-button svg,
 button.lake-button img {
   display: inline-block;
@@ -203,39 +280,52 @@ button.lake-button img {
   height: 16px;
   margin: 6px;
 }
+
+button.lake-button svg {
+  fill: var(--lake-text-color);
+}
+
 button.lake-icon-button.lake-button-hovered {
-  background-color: var(--lake-background-hover-color);
+  background-color: var(--lake-button-background-hover-color);
 }
+
 button.lake-icon-button.lake-button-selected {
-  background-color: var(--lake-background-active-color);
+  background-color: var(--lake-button-background-active-color);
 }
+
 button.lake-text-button {
   background-color: transparent;
-  border: 1px solid var(--lake-border-color);
+  border: 1px solid var(--lake-button-border-color);
   padding: 8px 16px;
   line-height: normal;
 }
+
 button.lake-text-button.lake-button-hovered {
-  background-color: var(--lake-background-hover-color);
+  background-color: var(--lake-button-background-hover-color);
 }
+
 button.lake-text-button.lake-button-selected {
-  background-color: var(--lake-background-active-color);
+  background-color: var(--lake-button-background-active-color);
 }
+
 button.lake-text-button svg {
   background-color: transparent;
   margin: 0 6px 0 0;
   vertical-align: middle;
 }
+
 button.lake-text-button span {
   display: inline-block;
   line-height: 16px;
   vertical-align: middle;
 }
+
 button.lake-primary-button {
   color: #fff;
   border-color: transparent;
   background-color: #5672cd;
 }
+
 button.lake-primary-button.lake-button-hovered {
   background-color: #3a5ccc;
 }
@@ -247,13 +337,14 @@ button.lake-primary-button.lake-button-hovered {
   font-size: var(--lake-button-font-size);
   user-select: none;
 }
+
 .lake-dropdown button.lake-dropdown-title {
   border-radius: 5px;
   border: 0;
   font-family: Arial;
   font-size: var(--lake-button-font-size);
   color: var(--lake-text-color);
-  background-color: #fff;
+  background-color: transparent;
   padding: 0;
   display: flex;
   align-items: center;
@@ -261,18 +352,22 @@ button.lake-primary-button.lake-button-hovered {
   margin-right: 4px;
   cursor: pointer;
 }
+
 .lake-dropdown[disabled] button.lake-dropdown-title {
   opacity: 0.25;
   cursor: default;
 }
+
 .lake-dropdown.lake-list-dropdown button.lake-dropdown-title-hovered,
 .lake-dropdown.lake-icon-dropdown button.lake-dropdown-title-hovered,
 .lake-dropdown.lake-character-dropdown button.lake-dropdown-title-hovered {
-  background-color: var(--lake-background-hover-color);
+  background-color: var(--lake-button-background-hover-color);
 }
+
 .lake-dropdown button.lake-dropdown-title.lake-dropdown-title-no-down {
   margin-right: 0;
 }
+
 .lake-dropdown .lake-dropdown-text {
   height: 16px;
   line-height: normal;
@@ -281,42 +376,60 @@ button.lake-primary-button.lake-button-hovered {
   white-space: nowrap;
   color: var(--lake-text-color);
 }
+
 .lake-dropdown .lake-dropdown-icon {
   position: relative;
   line-height: 0;
   border-radius: 5px 0 0 5px;
 }
+
 .lake-dropdown .lake-dropdown-icon-hovered {
-  background-color: var(--lake-background-hover-color);
+  background-color: var(--lake-button-background-hover-color);
 }
+
 .lake-dropdown .lake-dropdown-icon svg,
 .lake-dropdown .lake-dropdown-icon img {
   width: 16px;
   height: 16px;
   margin: 6px 2px 6px 4px;
 }
+
+.lake-dropdown .lake-dropdown-icon svg {
+  fill: var(--lake-text-color);
+}
+
 .lake-dropdown.lake-color-dropdown .lake-dropdown-icon svg:last-child {
   position: absolute;
   left: 0;
   bottom: 0;
+  fill: none;
 }
+
 .lake-dropdown button.lake-dropdown-title-no-down .lake-dropdown-icon svg,
 .lake-dropdown button.lake-dropdown-title-no-down .lake-dropdown-icon img {
   margin: 6px;
 }
+
+.lake-dropdown button.lake-dropdown-title-no-down .lake-dropdown-icon svg {
+  fill: var(--lake-text-color);
+}
+
 .lake-dropdown .lake-dropdown-down-icon {
   line-height: 0;
   border-radius: 0 5px 5px 0;
 }
+
 .lake-dropdown .lake-dropdown-down-icon-hovered {
-  background-color: var(--lake-background-hover-color);
+  background-color: var(--lake-button-background-hover-color);
 }
+
 .lake-dropdown .lake-dropdown-down-icon svg {
   width: 12px;
   height: 12px;
   margin: 8px 2px;
   fill: var(--lake-secondary-text-color);
 }
+
 /* menu */
 .lake-dropdown .lake-dropdown-menu,
 .lake-dropdown-menu {
@@ -329,15 +442,17 @@ button.lake-primary-button.lake-button-hovered {
   padding: 6px 0;
   border: 1px solid var(--lake-popup-border-color);
   border-radius: 5px;
-  background-color: #fff;
+  background-color: var(--lake-popup-background-color);
   box-shadow: var(--lake-popup-shadow);
   user-select: none;
   display: none;
 }
+
 .lake-dropdown-menu.lake-dropdown-menu-with-scroll {
   overflow-y: scroll;
   scrollbar-width: thin;
 }
+
 .lake-dropdown .lake-dropdown-menu li,
 .lake-dropdown-menu li {
   display: flex;
@@ -345,87 +460,112 @@ button.lake-primary-button.lake-button-hovered {
   cursor: pointer;
   margin: 0;
 }
+
 /* list type */
 .lake-list-dropdown-menu li {
   padding: 6px 24px 6px 10px;
 }
+
 .lake-list-dropdown-menu li.lake-dropdown-item-hovered {
-  background-color: var(--lake-background-hover-color);
+  background-color: var(--lake-button-background-hover-color);
 }
+
 .lake-list-dropdown-menu li.lake-dropdown-item-selected {
-  background-color: var(--lake-background-active-color);
+  background-color: var(--lake-button-background-hover-color);
 }
+
 .lake-list-dropdown-menu li .lake-dropdown-menu-check {
   line-height: 0;
   visibility: hidden;
 }
+
 .lake-list-dropdown-menu li .lake-dropdown-menu-check svg {
   width: 12px;
   height: 12px;
+  fill: var(--lake-text-color);
 }
+
 .lake-list-dropdown-menu li .lake-dropdown-menu-icon {
   line-height: 0;
   margin-left: 10px;
 }
+
 .lake-list-dropdown-menu li .lake-dropdown-menu-icon svg {
   width: 16px;
   height: 16px;
+  fill: var(--lake-text-color);
 }
+
 .lake-list-dropdown-menu li .lake-dropdown-menu-text {
   margin-left: 10px;
   white-space: nowrap;
 }
+
 /* icon type */
 .lake-icon-dropdown-menu {
   flex-wrap: wrap;
   justify-content: center;
 }
+
 .lake-icon-dropdown-menu li {
   padding: 0;
   border-radius: 2px;
 }
+
 .lake-icon-dropdown-menu li.lake-dropdown-item-hovered {
-  background-color: var(--lake-background-hover-color);
+  background-color: var(--lake-button-background-hover-color);
 }
+
 .lake-icon-dropdown-menu li.lake-dropdown-item-selected {
-  background-color: var(--lake-background-active-color);
+  background-color: var(--lake-button-background-hover-color);
 }
+
 .lake-icon-dropdown-menu li .lake-dropdown-menu-check {
   display: none;
 }
+
 .lake-icon-dropdown-menu li .lake-dropdown-menu-icon {
   line-height: 0;
   margin: 5px;
 }
+
 .lake-icon-dropdown-menu li .lake-dropdown-menu-icon svg,
 .lake-icon-dropdown-menu li .lake-dropdown-menu-icon img {
   width: 32px;
   height: 32px;
 }
+
 .lake-icon-dropdown-menu li .lake-dropdown-menu-text {
   display: none;
 }
+
 /* character type */
 .lake-character-dropdown-menu {
   flex-wrap: wrap;
   justify-content: center;
 }
+
 .lake-character-dropdown-menu li {
   padding: 0;
   border-radius: 2px;
 }
+
 .lake-character-dropdown-menu li.lake-dropdown-item-hovered {
-  background-color: var(--lake-background-hover-color);
+  background-color: var(--lake-button-background-hover-color);
 }
+
 .lake-character-dropdown-menu li.lake-dropdown-item-selected {
-  background-color: var(--lake-background-active-color);
+  background-color: var(--lake-button-background-active-color);
 }
+
 .lake-character-dropdown-menu li .lake-dropdown-menu-check {
   display: none;
 }
+
 .lake-character-dropdown-menu li .lake-dropdown-menu-icon {
   display: none;
 }
+
 .lake-character-dropdown-menu li .lake-dropdown-menu-text {
   text-align: center;
   font-size: 24px;
@@ -433,21 +573,26 @@ button.lake-primary-button.lake-button-hovered {
   height: 42px;
   line-height: 42px;
 }
+
 /* color type */
 .lake-color-dropdown-menu {
   flex-wrap: wrap;
   justify-content: center;
 }
+
 .lake-color-dropdown-menu li {
   position: relative;
   padding: 0;
 }
+
 .lake-color-dropdown-menu li.lake-dropdown-item-hovered {
-  background-color: var(--lake-background-hover-color);
+  background-color: var(--lake-button-background-hover-color);
 }
+
 .lake-color-dropdown-menu li.lake-dropdown-item-selected {
-  background-color: var(--lake-background-active-color);
+  background-color: var(--lake-button-background-active-color);
 }
+
 .lake-color-dropdown-menu li .lake-dropdown-menu-check {
   position: absolute;
   top: 6px;
@@ -456,41 +601,50 @@ button.lake-primary-button.lake-button-hovered {
   line-height: 0;
   visibility: hidden;
 }
+
 .lake-color-dropdown-menu li .lake-dropdown-menu-check svg {
   width: 12px;
   height: 12px;
   fill: #fff;
 }
+
 .lake-color-dropdown-menu li[value^="#f" i] .lake-dropdown-menu-check svg,
 .lake-color-dropdown-menu li[value^="#e6" i] .lake-dropdown-menu-check svg {
   fill: #000;
 }
+
 .lake-color-dropdown-menu li .lake-dropdown-menu-icon {
   line-height: 0;
 }
+
 .lake-color-dropdown-menu li .lake-dropdown-menu-icon svg {
   width: 16px;
   height: 16px;
   margin: 3px 4px;
+  fill: var(--lake-text-color);
 }
+
 .lake-color-dropdown-menu li .lake-dropdown-menu-text {
   font-size: 0;
   box-sizing: content-box;
-  border: 1px solid var(--lake-background-hover-color);
+  border: 1px solid var(--lake-button-background-hover-color);
   border-radius: 2px;
   width: 16px;
   height: 16px;
   margin: 3px;
 }
+
 .lake-color-dropdown-menu li:first-child {
   width: 100%;
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 4px;
 }
+
 .lake-color-dropdown-menu li:first-child .lake-dropdown-menu-check {
   display: none;
 }
+
 .lake-color-dropdown-menu li:first-child .lake-dropdown-menu-text {
   width: 100%;
   font-size: var(--lake-button-font-size);
@@ -506,14 +660,17 @@ button.lake-primary-button.lake-button-hovered {
   line-height: normal;
   color: var(--lake-text-color);
 }
+
 .lake-popup *,
 .lake-popup ::before,
 .lake-popup ::after {
   box-sizing: border-box;
 }
+
 .lake-popup .lake-text-button {
   box-shadow: var(--lake-button-shadow);
 }
+
 .lake-popup input[type="text"] {
   font-family: var(--lake-font-family);
   font-size: var(--lake-popup-font-size);
@@ -522,13 +679,16 @@ button.lake-primary-button.lake-button-hovered {
   border: 1px solid var(--lake-input-border-color);
   padding: 4px 10px;
 }
+
 .lake-popup input[type="text"]:hover {
   border: 1px solid var(--lake-input-border-hover-color);
 }
+
 .lake-popup input[type="text"]:focus-visible {
   outline: var(--lake-input-outline);
   outline-offset: -2px;
 }
+
 .lake-popup .lake-row {
   padding-bottom: 8px;
 }
@@ -544,7 +704,7 @@ button.lake-primary-button.lake-button-hovered {
   margin: 0;
   padding: 4px 8px;
   width: fit-content;
-  background-color: #fff;
+  background-color: var(--lake-popup-background-color);
   box-shadow: var(--lake-popup-shadow);
   display: none;
   max-height: 180px;
@@ -552,6 +712,7 @@ button.lake-primary-button.lake-button-hovered {
   scrollbar-width: thin;
   user-select: none;
 }
+
 .lake-menu .lake-menu-item {
   display: flex;
   align-items: center;
@@ -561,14 +722,16 @@ button.lake-primary-button.lake-button-hovered {
   border-radius: 5px;
   scroll-margin: 4px 0;
 }
+
 .lake-menu .lake-menu-item-selected {
-  background-color: var(--lake-background-active-color);
+  background-color: var(--lake-button-background-active-color);
 }
 
 .lake-resizer {
   user-select: none;
   display: none;
 }
+
 .lake-resizer-top-left,
 .lake-resizer-top-right,
 .lake-resizer-bottom-left,
@@ -582,26 +745,31 @@ button.lake-primary-button.lake-button-hovered {
   border-radius: 6px;
   background-color: var(--lake-box-border-focus-color);
 }
+
 .lake-resizer-top-left {
   top: -5px;
   left: -5px;
   cursor: nwse-resize;
 }
+
 .lake-resizer-top-right {
   top: -5px;
   right: -5px;
   cursor: nesw-resize;
 }
+
 .lake-resizer-bottom-left {
   bottom: -5px;
   left: -5px;
   cursor: nesw-resize;
 }
+
 .lake-resizer-bottom-right {
   bottom: -5px;
   right: -5px;
   cursor: nwse-resize;
 }
+
 .lake-resizer-info {
   position: absolute;
   bottom: 8px;
@@ -630,6 +798,7 @@ button.lake-primary-button.lake-button-hovered {
   padding: 0 6px;
   display: none;
 }
+
 .lake-corner-toolbar button {
   border-radius: 5px;
   border: 0;
@@ -641,6 +810,7 @@ button.lake-primary-button.lake-button-hovered {
   cursor: pointer;
   user-select: none;
 }
+
 .lake-corner-toolbar button svg {
   fill: #fff;
   width: 16px;
@@ -665,26 +835,32 @@ button.lake-primary-button.lake-button-hovered {
   margin: 0;
   padding: 0;
 }
+
 .lake-container h1 {
   font-size: 36px;
   margin-bottom: 16px;
 }
+
 .lake-container h2 {
   font-size: 30px;
   margin-bottom: 14px;
 }
+
 .lake-container h3 {
   font-size: 24px;
   margin-bottom: 14px;
 }
+
 .lake-container h4 {
   font-size: 20px;
   margin-bottom: 12px;
 }
+
 .lake-container h5 {
   font-size: 18px;
   margin-bottom: 10px;
 }
+
 .lake-container h6 {
   font-size: 16px;
   margin-bottom: 8px;
@@ -697,89 +873,109 @@ button.lake-primary-button.lake-button-hovered {
   margin-bottom: 4px;
   padding: 0;
 }
+
 .lake-container ol lake-box[name="emoji"],
 .lake-container ul lake-box[name="emoji"] {
   vertical-align: middle;
 }
+
 .lake-container ol[indent="1"],
 .lake-container ul[indent="1"] {
   padding-left: 2em;
 }
+
 .lake-container ol[indent="2"],
 .lake-container ul[indent="2"] {
   padding-left: 4em;
 }
+
 .lake-container ol[indent="3"],
 .lake-container ul[indent="3"] {
   padding-left: 6em;
 }
+
 .lake-container ol[indent="4"],
 .lake-container ul[indent="4"] {
   padding-left: 8em;
 }
+
 .lake-container ol[indent="5"],
 .lake-container ul[indent="5"] {
   padding-left: 10em;
 }
+
 .lake-container ol[indent="6"],
 .lake-container ul[indent="6"] {
   padding-left: 12em;
 }
+
 .lake-container ol[indent="7"],
 .lake-container ul[indent="7"] {
   padding-left: 14em;
 }
+
 .lake-container ol[indent="8"],
 .lake-container ul[indent="8"] {
   padding-left: 16em;
 }
+
 .lake-container ol[indent="9"],
 .lake-container ul[indent="9"] {
   padding-left: 18em;
 }
+
 .lake-container ol[indent="10"],
 .lake-container ul[indent="10"] {
   padding-left: 20em;
 }
+
 .lake-container ol li,
 .lake-container ul li {
   margin-left: 20px;
   padding-left: 4px;
 }
+
 .lake-container ol li {
   list-style: decimal;
 }
+
 .lake-container ul li {
   list-style: disc;
 }
+
 .lake-container ol[indent="1"] li,
 .lake-container ol[indent="4"] li,
 .lake-container ol[indent="7"] li,
 .lake-container ol[indent="10"] li {
   list-style-type: lower-alpha;
 }
+
 .lake-container ol[indent="2"] li,
 .lake-container ol[indent="5"] li,
 .lake-container ol[indent="8"] li {
   list-style-type: lower-roman;
 }
+
 .lake-container ul[indent="1"] li,
 .lake-container ul[indent="4"] li,
 .lake-container ul[indent="7"] li,
 .lake-container ul[indent="10"] li {
   list-style-type: circle;
 }
+
 .lake-container ul[indent="2"] li,
 .lake-container ul[indent="5"] li,
 .lake-container ul[indent="8"] li {
   list-style-type: square;
 }
+
 .lake-container ul[type="checklist"] li {
   list-style: none;
   position: relative;
   margin-left: 0;
   padding-left: 24px;
 }
+
 .lake-container ul[type="checklist"] li::before {
   box-sizing: content-box;
   content: '';
@@ -790,14 +986,17 @@ button.lake-primary-button.lake-button-hovered {
   height: 16px;
   border-radius: 4px;
 }
+
 .lake-container ul[type="checklist"] li[value="true"]::before {
   border: 1px solid #1890ff;
   background-color: #1890ff;
 }
+
 .lake-container ul[type="checklist"] li[value="false"]::before {
   border: 1px solid var(--lake-border-color);
   background-color: #fff;
 }
+
 .lake-container ul[type="checklist"] li::after {
   box-sizing: content-box;
   content: '';
@@ -813,9 +1012,11 @@ button.lake-primary-button.lake-button-hovered {
   border-radius: 1px;
   transform: rotate(45deg) scale(1) translate(-50%,-50%);
 }
+
 .lake-container[contenteditable="true"] ul[type="checklist"] li::before {
   cursor: pointer;
 }
+
 .lake-container[contenteditable="true"] ul[type="checklist"] li::after {
   cursor: pointer;
 }
@@ -824,9 +1025,10 @@ button.lake-primary-button.lake-button-hovered {
   margin: 0;
   margin-bottom: 8px;
   padding: 8px 12px;
-  color: var(--lake-secondary-text-color);
-  border-left: 4px solid #0505050f;
+  color: var(--lake-blockquote-text-color);
+  border-left: var(--lake-blockquote-border);
 }
+
 .lake-container blockquote[type] {
   margin: 16px 0;
   padding: 16px 20px;
@@ -834,15 +1036,19 @@ button.lake-primary-button.lake-button-hovered {
   border: 1px solid transparent;
   border-radius: 8px;
 }
+
 .lake-container blockquote[type="info"] {
   background-color: #8e96aa24;
 }
+
 .lake-container blockquote[type="tip"] {
   background-color: #646cff24;
 }
+
 .lake-container blockquote[type="warning"] {
   background-color: #eab30824;
 }
+
 .lake-container blockquote[type="danger"] {
   background-color: #f43f5e24;
 }
@@ -858,11 +1064,13 @@ button.lake-primary-button.lake-button-hovered {
   flex-wrap: wrap;
   align-items: center;
 }
+
 .lake-toolbar *,
 .lake-toolbar ::before,
 .lake-toolbar ::after {
   box-sizing: border-box;
 }
+
 .lake-toolbar .lake-toolbar-divider {
   width: 1px;
   height: 20px;
@@ -870,9 +1078,11 @@ button.lake-primary-button.lake-button-hovered {
   border-left: 1px solid var(--lake-border-color);
   user-select: none;
 }
+
 .lake-toolbar .lake-upload {
   line-height: 0;
 }
+
 .lake-toolbar .lake-upload input[type="file"] {
   display: none;
 }
@@ -882,14 +1092,15 @@ button.lake-primary-button.lake-button-hovered {
   top: 0;
   left: 0;
   z-index: var(--lake-popup-z-index);
-  border: 1px solid var(--lake-border-color);
+  border: 1px solid var(--lake-popup-border-color);
   border-radius: 5px;
-  background-color: #fff;
+  background-color: var(--lake-popup-background-color);
   box-shadow: var(--lake-button-shadow);
   padding: 4px;
   display: flex;
   align-items: center;
 }
+
 .lake-floating-toolbar .lake-toolbar-divider {
   width: 1px;
   height: 20px;
@@ -905,20 +1116,24 @@ button.lake-primary-button.lake-button-hovered {
   margin: 20px 0;
   overflow: visible;
 }
+
 .lake-container table tr,
 .lake-container table tr:nth-child(n) {
   border: 0;
   background-color: transparent;
 }
+
 .lake-container table td {
   font-size: var(--lake-font-size);
   padding: 8px 16px;
   min-width: 33px;
   border: 1px solid var(--lake-border-color);
 }
+
 .lake-container table td p {
   margin-bottom: 0;
 }
+
 .lake-container table td.lake-td-focused {
   outline: var(--lake-input-outline);
 }
@@ -932,31 +1147,37 @@ button.lake-primary-button.lake-button-hovered {
   border-radius: 5px;
   padding: 16px;
   width: fit-content;
-  background-color: #fff;
+  background-color: var(--lake-popup-background-color);
   box-shadow: var(--lake-popup-shadow);
   display: none;
 }
+
 .lake-link-popup .lake-url-row {
   display: flex;
   align-items: center;
 }
+
 .lake-link-popup .lake-button-row {
   padding-top: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+
 .lake-link-popup input[type="text"] {
   width: 220px;
   margin-right: 4px;
 }
+
 .lake-link-popup button[name="copy"] svg:first-child {
   display: inline;
 }
+
 .lake-link-popup button[name="copy"] svg:nth-child(2) {
   display: none;
   fill: var(--lake-success-color);
 }
+
 .lake-link-popup button[name="copy"] svg:last-child {
   display: none;
   fill: var(--lake-error-color);
@@ -965,24 +1186,30 @@ button.lake-primary-button.lake-button-hovered {
 lake-box[name="hr"] {
   margin-bottom: 8px;
 }
+
 .lake-hr {
   height: 21px;
   display: flex;
   align-items: center;
 }
+
 .lake-container[contenteditable="true"] .lake-hr {
   cursor: pointer;
 }
+
 .lake-container[contenteditable="false"] .lake-hr {
   cursor: default;
 }
+
 .lake-container[contenteditable="true"] lake-box[name="hr"] .lake-box-hovered .lake-hr {
   background-color: var(--lake-box-background-color);
 }
+
 lake-box[name="hr"] .lake-box-selected .lake-hr,
 lake-box[name="hr"] .lake-box-focused .lake-hr {
   background-color: var(--lake-selection-background-color);
 }
+
 .lake-hr hr {
   width: 100%;
   margin: 0;
@@ -991,62 +1218,109 @@ lake-box[name="hr"] .lake-box-focused .lake-hr {
   border-top: 1px solid var(--lake-border-color);
 }
 
+/* custom properties */
+:root {
+  --lake-code-highlight-keyword: #af00db;
+  --lake-code-highlight-name: #444d56;
+  --lake-code-highlight-function: #005cc5;
+  --lake-code-highlight-constant: #0550ae;
+  --lake-code-highlight-definition: #444d56;
+  --lake-code-highlight-type: #0550ae;
+  --lake-code-highlight-operator: #444d56;
+  --lake-code-highlight-comment: #008000;
+  --lake-code-highlight-heading: #000080;
+  --lake-code-highlight-boolean: #0550ae;
+  --lake-code-highlight-string: #a31515;
+  --lake-code-highlight-number: #098658;
+  --lake-code-highlight-invalid: #cd3131;
+}
+
+.lake-dark {
+  --lake-code-highlight-keyword: #b392f0;
+  --lake-code-highlight-name: #e1e4e8;
+  --lake-code-highlight-function: #61afef;
+  --lake-code-highlight-constant: #9ecBff;
+  --lake-code-highlight-definition: #e1e4e8;
+  --lake-code-highlight-type: #9ecBff;
+  --lake-code-highlight-operator: #e1e4e8;
+  --lake-code-highlight-comment: #6a9955;
+  --lake-code-highlight-heading: #569cd6;
+  --lake-code-highlight-boolean: #9ecBff;
+  --lake-code-highlight-string: #ce9178;
+  --lake-code-highlight-number: #b5cea8;
+  --lake-code-highlight-invalid: #f44747;
+}
+
 /* CodeMirror */
 .cm-editor {
   font-size: 14px;
   border-radius: 5px;
+  color: var(--lake-text-color);
   background-color: var(--lake-box-background-color);
 }
+
 .cm-editor.cm-focused {
   outline: none;
 }
+
 .cm-editor .cm-content {
   font-family: Consolas, Courier, monospace;
   margin: 16px 20px;
+  caret-color: var(--lake-text-color);
 }
 
 /* code block */
 lake-box[name="codeBlock"] {
   margin-bottom: 16px;
 }
+
 lake-box[name="codeBlock"] .lake-box-focused .lake-code-block,
 lake-box[name="codeBlock"] .lake-box-activated .lake-code-block {
   border-color: var(--lake-box-border-color);
 }
+
 .lake-code-block {
   position: relative;
   border: 1px solid transparent;
   border-radius: 5px;
 }
+
 .lake-code-block .lake-dropdown {
   position: absolute;
   top: 2px;
   inset-inline-end: 2px;
   display: none;
 }
+
 lake-box[name="codeBlock"] .lake-box-focused .lake-code-block .lake-dropdown,
 lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   display: block;
 }
+
 .lake-code-block .lake-dropdown .lake-dropdown-title {
   margin: 0;
   padding-right: 4px;
   background-color: var(--lake-box-background-color);
 }
+
 .lake-code-block .lake-dropdown.lake-list-dropdown .lake-dropdown-title-hovered {
-  background-color: var(--lake-background-active-color);
+  background-color: var(--lake-button-background-active-color);
 }
+
 .lake-code-block .lake-dropdown .lake-dropdown-text {
   margin: 3px 6px;
 }
+
 .lake-code-block .lake-dropdown .lake-dropdown-down-icon svg {
   margin: 5px 2px;
 }
+
 .lake-code-block .lake-dropdown .lake-dropdown-menu {
   top: 24px;
   left: auto;
   right: 0;
 }
+
 .lake-code-block-error {
   font-size: 14px;
   color: var(--lake-error-color);
@@ -1055,38 +1329,51 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   padding: 16px 20px;
 }
 
+:root {
+  --lake-image-placeholder-background-color: #fafafa;
+}
+
+.lake-dark {
+  --lake-image-placeholder-background-color: #343434;
+}
+
 .lake-image-placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid transparent;
-  background-color: #fafafa;
+  background-color: var(--lake-image-placeholder-background-color);
   border-radius: 4px;
   width: 100%;
   height: 100%;
 }
+
 .lake-image-placeholder svg {
-  fill: #d9d9d9;
   width: 50%;
   max-width: 64px;
   height: 50%;
   max-height: 64px;
+  fill: #d9d9d9;
 }
+
 .lake-image {
   position: relative;
   line-height: 0;
   border: 1px solid transparent;
   border-radius: 4px;
 }
+
 .lake-image .lake-image-img {
   border: 0;
   border-radius: 4px;
   width: 100%;
   height: 100%;
 }
+
 lake-box[name="image"] .lake-box-focused .lake-image {
   border-color: var(--lake-box-border-focus-color);
 }
+
 .lake-image-caption {
   -webkit-user-modify: read-write-plaintext-only;
   position: relative;
@@ -1098,9 +1385,11 @@ lake-box[name="image"] .lake-box-focused .lake-image {
   padding-bottom: 8px;
   display: none;
 }
+
 .lake-image-caption:focus {
   outline: 0;
 }
+
 .lake-image-caption.lake-placeholder::before {
   position: absolute;
   top: 2px;
@@ -1109,10 +1398,12 @@ lake-box[name="image"] .lake-box-focused .lake-image {
   content: attr(placeholder);
   pointer-events: none;
 }
+
 /* uploading status */
 .lake-image-uploading .lake-image-img {
   opacity: 0.5;
 }
+
 .lake-image .lake-progress {
   position: absolute;
   bottom: 8px;
@@ -1125,6 +1416,7 @@ lake-box[name="image"] .lake-box-focused .lake-image {
   align-items: center;
   padding: 0 6px;
 }
+
 .lake-image .lake-progress svg {
   fill: #fff;
   width: 16px;
@@ -1132,45 +1424,55 @@ lake-box[name="image"] .lake-box-focused .lake-image {
   margin: 6px;
   animation: lakerotate 1s linear 0s infinite normal none;
 }
+
 .lake-image .lake-progress .lake-percent {
   font-size: 14px;
   color: #fff;
   margin: 6px;
   white-space: nowrap;
 }
+
 /* error status */
 .lake-image .lake-error {
   padding: 16px;
 }
+
 .lake-image.lake-image-error {
   border: 1px solid var(--lake-box-border-color);
 }
+
 .lake-image.lake-image-error ::selection {
   background-color: transparent;
 }
+
 lake-box[name="image"] .lake-box-selected .lake-image-error {
   background-color: var(--lake-selection-background-color);
 }
+
 .lake-image .lake-error-icon {
   line-height: 0;
   text-align: center;
   margin-bottom: 8px;
 }
+
 .lake-image .lake-error-icon svg {
   fill: var(--lake-error-color);
   width: 64px;
   height: 64px;
 }
+
 .lake-image .lake-error-name {
   color: var(--lake-error-color);
   line-height: normal;
 }
+
 /* full screen */
 .lake-pswp .pswp__button svg {
   fill: #fff;
   width: 24px;
   height: 24px;
 }
+
 .lake-pswp .pswp__img,
 .lake-pswp.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img,
 .lake-pswp.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
@@ -1184,15 +1486,20 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
   line-height: 0;
   border: 1px solid transparent;
 }
+
 lake-box[name="video"] .lake-box-hovered .lake-resizer {
   display: block;
 }
+
 .lake-video .lake-video-form {
   padding: 16px;
   line-height: normal;
+  color: var(--lake-text-color);
   border: 1px solid var(--lake-box-border-color);
+  background-color: var(--lake-box-background-color);
   border-radius: 4px;
 }
+
 .lake-video input[type="text"] {
   font-family: var(--lake-font-family);
   font-size: 14px;
@@ -1202,24 +1509,30 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
   padding: 4px 10px;
   width: 100%;
 }
+
 .lake-video input[type="text"]:hover {
   border: 1px solid var(--lake-input-border-hover-color);
 }
+
 .lake-video input[type="text"]:focus-visible {
   outline: var(--lake-input-outline);
   outline-offset: -2px;
 }
+
 .lake-video .lake-row {
   padding-bottom: 8px;
 }
+
 .lake-video .lake-desc-row {
   padding-top: 8px;
   padding-bottom: 16px;
   color: var(--lake-secondary-text-color);
 }
+
 .lake-video .lake-button-row {
   padding-top: 16px;
 }
+
 .lake-video .lake-button-row button {
   width: 100%;
 }
@@ -1232,61 +1545,77 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
   border: 1px solid transparent;
   border-radius: 4px;
 }
+
 .lake-container[contenteditable="true"] .lake-file {
   cursor: default;
   user-select: none;
 }
+
 .lake-container[contenteditable="false"] .lake-file {
   cursor: pointer;
   user-select: auto;
 }
+
 lake-box[name="file"] .lake-box-strip {
   align-self: center;
 }
+
 .lake-file .lake-file-info {
   display: flex;
   align-items: center;
 }
+
 .lake-file .lake-file-type svg {
   width: 16px;
   height: 16px;
   margin: 4px;
+  fill: var(--lake-text-color);
 }
+
 .lake-file .lake-file-name {
   line-height: 24px;
   margin-right: 6px;
   color: var(--lake-link-color);
 }
+
 lake-box[name="file"] .lake-box-hovered .lake-file {
   background-color: var(--lake-box-background-color);
 }
+
 lake-box[name="file"] .lake-box-selected .lake-file {
   background-color: var(--lake-selection-background-color);
 }
+
 lake-box[name="file"] .lake-box-focused .lake-file {
   background-color: var(--lake-selection-background-color);
 }
+
 /* uploading status */
 .lake-file-uploading .lake-progress {
   display: flex;
   align-items: center;
   margin-right: 6px;
 }
+
 .lake-file-uploading .lake-progress svg {
   width: 16px;
   height: 16px;
   margin: 4px;
   animation: lakerotate 1s linear 0s infinite normal none;
+  fill: var(--lake-text-color);
 }
+
 .lake-file-uploading .lake-progress .lake-percent {
   line-height: 24px;
   margin-left: 4px;
   white-space: nowrap;
 }
+
 /* error status */
 .lake-file-error .lake-file-type svg {
   fill: var(--lake-error-color);
 }
+
 .lake-file-error .lake-file-name {
   color: var(--lake-error-color);
 }
@@ -1296,12 +1625,14 @@ lake-box[name="file"] .lake-box-focused .lake-file {
   border: 1px solid transparent;
   border-radius: 2px;
 }
+
 .lake-emoji img {
   border: 0;
   border-radius: 2px;
   width: 32px;
   height: 32px;
 }
+
 lake-box[name="emoji"] .lake-box-focused .lake-emoji {
   border-color: var(--lake-selection-background-color);
   background-color: var(--lake-selection-background-color);
@@ -1313,40 +1644,49 @@ lake-box[name="emoji"] .lake-box-focused .lake-emoji {
   border: 1px solid transparent;
   border-radius: 4px;
 }
+
 .lake-container[contenteditable="true"] .lake-equation {
   user-select: none;
 }
+
 lake-box[name="equation"] .lake-box-strip {
   align-self: center;
 }
+
 lake-box[name="equation"] .lake-box-selected .lake-equation {
   background-color: var(--lake-selection-background-color);
 }
+
 lake-box[name="equation"] .lake-box-focused .lake-equation {
   background-color: var(--lake-selection-background-color);
 }
+
 .lake-equation .lake-equation-view {
   padding: 0 6px;
 }
+
 .lake-equation .lake-equation-form {
   position: absolute;
   top: 28px;
   left: 0;
   z-index: 1;
-  border: 1px solid var(--lake-border-color);
+  border: 1px solid var(--lake-popup-border-color);
   border-radius: 5px;
   padding: 16px;
   width: fit-content;
-  background-color: #fff;
+  background-color: var(--lake-popup-background-color);
   box-shadow: var(--lake-popup-shadow);
   display: none;
 }
+
 lake-box[name="equation"] .lake-box-focused .lake-equation-form,
 lake-box[name="equation"] .lake-box-activated .lake-equation-form {
   display: flex;
 }
+
 .lake-equation .lake-equation-form textarea {
   border: 0;
+  background-color: var(--lake-popup-background-color);
   font-family: Consolas, Courier, monospace;
   font-size: 14px;
   color: var(--lake-text-color);
@@ -1357,15 +1697,18 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
   resize: none;
   scrollbar-width: thin;
 }
+
 .lake-equation .lake-equation-form textarea:focus-visible {
   outline: 0;
 }
+
 .lake-equation .lake-equation-form .lake-button-row {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-end;
 }
+
 /* error status */
 .lake-equation-error {
   padding: 0 6px;
@@ -1377,21 +1720,25 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
 .lake-mention-menu {
   max-height: 208px;
 }
+
 .lake-mention-menu .lake-mention-avatar {
   margin-inline-end: 8px;
   line-height: 0;
 }
+
 .lake-mention-menu .lake-mention-avatar img {
   border-radius: 100%;
   width: 32px;
   height: 32px;
 }
+
 .lake-mention-menu .lake-mention-nickname {
   margin-inline-end: 4px;
   font-weight: 500;
   color: var(--lake-text-color);
   white-space: nowrap;
 }
+
 .lake-mention-menu .lake-mention-name {
   color: #8c8c8c;
 }
@@ -1400,46 +1747,69 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
   border: 1px solid transparent;
   border-radius: 2px;
 }
+
 .lake-container[readonly="false"] .lake-mention a:hover {
   color: var(--lake-link-color);
   text-decoration: none;
 }
+
 lake-box[name="mention"] .lake-box-focused .lake-mention {
   border-color: var(--lake-selection-background-color);
   background-color: var(--lake-selection-background-color);
 }
 
+:root {
+  --lake-slash-icon-border-color: #d9d9d9;
+  --lake-slash-icon-background-color: #fff;
+}
+
+.lake-dark {
+  --lake-slash-icon-border-color: #3d444d;
+  --lake-slash-icon-background-color: #252525;
+}
+
 .lake-slash-menu {
   max-height: 332px;
 }
+
 .lake-slash-menu .lake-menu-item {
   height: 54px;
 }
+
 .lake-slash-menu .lake-menu-item input[type="file"] {
   display: none;
 }
+
 .lake-slash-menu .lake-slash-icon {
   margin-inline-end: 8px;
   border-radius: 5px;
-  border: 1px solid var(--lake-border-color);
-  background-color: #fff;
+  border: 1px solid var(--lake-slash-icon-border-color);
+  background-color: var(--lake-slash-icon-background-color);
   line-height: 0;
 }
+
 .lake-slash-menu .lake-slash-icon svg,
 .lake-slash-menu .lake-slash-icon img {
   width: 32px;
   height: 32px;
   margin: 6px;
 }
+
+.lake-slash-menu .lake-slash-icon svg {
+  fill: var(--lake-text-color);
+}
+
 .lake-slash-menu .lake-slash-text {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
+
 .lake-slash-menu .lake-slash-title {
   font-weight: 500;
   color: var(--lake-text-color);
 }
+
 .lake-slash-menu .lake-slash-description {
   color: #8c8c8c;
 }