Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[FEATURE REQUEST] Add Dark Mode

See original GitHub issue

Add dark mode feature like

by default dark, switch set to true

<el-tiptap dark  >

otherwise light mode

Or better color schemes

Issue Analytics

State:
Created 3 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

Timomscommented, Feb 14, 2021

Hi there @duferic,

This should include most of the stylings in element tiptap, sure there might be some more but nevertheless it should work. Keep in mind you need to define some variables in the file “_variables.scss” (might have forgotten some vars, check for yourself):

⚠️ This is just a boilerplate with variables, not a switch to choose between light and dark!

/* IMPORTANT: Replace --var with a hex or rgb value! */
$back-color: var(--app-back-color);
$page-back-color: var(--app-page-back-color);
$text-color: var(--app-text-color);
$placeholder-color: var(--app-placeholder-color);
$border-color: var(--app-border-color);
$hover-color: var(--app-hover-color);

Take a look at this snippet:

@import 'variables.scss';

.el-tiptap-editor__menu-bar {
  background-color: $page-back-color;
  border: 1px solid $border-color;
}

.el-dropdown {
  color: $text-color;
}

.el-tooltip.el-tiptap-editor__command-button > svg {
  color: $text-color;
}
.el-tooltip.el-tiptap-editor__command-button > i {
  color: $text-color;
}

.el-tiptap-editor > .el-tiptap-editor__content {
  background-color: $page-back-color;
  border: 1px solid $border-color;
  color: $text-color;
}
.el-tiptap-editor__menu-bar:before {
  background-color: $page-back-color;
}
.el-tiptap-editor__footer {
  background-color: $page-back-color;
  color: $text-color;
  border: 1px solid $border-color;
}

.el-tiptap-editor__command-button--active {
  background-color: $hover-color;
  border: 1px solid $border-color;
}

.el-tiptap-editor__command-button:hover {
  background-color: $page-back-color;
  color: $text-color;
}

.el-dropdown-menu {
  background-color: $page-back-color;
  color: $text-color;
  border: 1px solid $border-color;
}
.el-tiptap-dropdown-menu .el-tiptap-dropdown-menu__item--active {
  background-color: $hover-color;
  color: $text-color;
}
.el-tiptap-dropdown-menu .el-tiptap-dropdown-menu__item {
  color: $text-color;
  &:hover {
    background-color: $hover-color;
    color: $text-color;
  }
}

.el-dialog.el-tiptap-edit-link-dialog {
  min-width: 175px;
}

.el-tiptap-editor__menu-bubble {
  background-color: $hover-color;
  color: $text-color;
}

.el-dialog {
  background: $back-color;
}
.el-dialog__title,
.el-form-item__label {
  color: $text-color;
}
.el-button.el-button--primary {
  $color: $text-color !important;
  $background-color: $primary-color !important;
}
.el-button.el-button--primary.el-button--small.is-round {
  $color: $text-color !important;
  $background-color: $primary-color !important;
}
.el-input > input {
  background: $page-back-color;
  $color: $text-color;
  border: 1px solid $border-color;
  &:focus {
    border: 1px solid $border-color;
  }
}
.el-input__inner {
  $color: $text-color;
}
.el-button {
  border: 1px solid $border-color;
  color: $text-color;
  background: $primary-color;
  &:hover {
    background: $primary-color;
  }
}

.el-checkbox__label {
  color: $text-color;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: $text-color;
}
.el-checkbox__inner {
  color: $primary-color;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  color: $primary-color;
}
.el-popover {
  background: $back-color;
  border: 1px solid $border-color;
  color: $text-color;
}
.el-popper[x-placement^='bottom'] .popper__arrow {
  border-bottom-color: $border-color;
}

.el-tiptap-editor__content > div {
  height: 100%;
}

.el-tiptap-popper__menu__item {
  color: $text-color;
}
.el-tiptap-popper__menu__item__separator {
  border-top: 1px solid $border-color;
}

.table-grid-size-editor__cell {
  background: $back-color;
}
.table-grid-size-editor__cell--selected .table-grid-size-editor__cell__inner {
  background-color: #ecf5ff;
  border-color: #409eff;
}

.el-popper.el-tiptap-image-popper {
  background: $back-color;
}

.el-tiptap-editor__content .image-resizer__handler {
  background-color: $primary-color;
}
.el-tiptap-editor__content .image-resizer {
  border-color: $primary-color;
}
.el-input.is-disabled .el-input__inner {
  background-color: $page-back-color;
  border-color: $border-color;
}

// Codemirror Style overrides
// Code-view left number bar
.CodeMirror-gutters {
  background-color: $page-back-color;
  border-right: 1px solid $border-color;
}
.CodeMirror-linenumber {
  color: $text-color;
}
.CodeMirror-lines {
  background-color: $page-back-color;
  color: $text-color;
}
.CodeMirror-scroll {
  background-color: $page-back-color;
}
.CodeMirror-line {
  span &::selection {
    background: $primary-color;
    color: black;
  }
}

1reaction

dufericcommented, Feb 12, 2021

@Leecason when i can expect this feature?

I’ve created a dark theme with SCSS variables. May I share it, or create a pull request for that? @Leecason