Adding Dark mode

[Ritwik880]

Is your feature request related to a problem? Please describe. The design reduces the light emitted by device screens while maintaining the minimum color contrast ratios required for readability. The advantages of Dark Mode are, it enhances visual ergonomics by reducing eye strain, facilitating screens to adjust according to current light conditions and providing comfort of use at night or in dark environments.

Describe the solution you'd like The themes are activated by CSS classes on the root element, . When the page is loaded, I want to apply the theme that most likely suits the visitor (you!) best. After all, most people don’t like configuring websites before they can read a blog post, so the the whole theming feature would likely remain unused otherwise. So I have to make a guess about what the visitor wants and expects.

Describe alternatives you've considered When a visitor navigates from page to page, the theme shouldn’t change. That’s why I save the state of the theme selection, so it can be loaded by the next page.

[makseq]

On what pages do you want to see a dark mode? Labeling page? Or everywhere?

[Ritwik880]

If we put a switch on the top of the corner which helps people to choose in which mode they want see the website. If they want to see the website in dark mode then they can simply turn on the switch.

[SelvaVigneshcit]

Can I have that too bro?

[ClaytonSmith]

A couple of hours labeling with the bright white screen is killing my eyes.

Its unclear when a dark-mode will be released so here's a workaround to get dark mode:

1. Download StyleBot https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha

2. Open LS and apply this style sheet:

@import url(https://fonts.googleapis.com/css2?family=Helvetica:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);

div.lsf-main-view {
  background-color: #000000;
  color: #ffffff;
  font-family: Helvetica;
}

label span span {
  color: #ffffff;
  background-color: #000000;
}

div div div {
  color: #f3f3f3;
}

div.dm-table__cell.dm-select-row {
  background-color: #000000;
}

div.dm-table__row-wrapper {
  background-color: #000000;
}

div.dm-table-head__extra {
  background-color: #434343;
}

div.dm-table-head__draggable {
  background-color: #000000;
}

li.ls-main-menu__spacer {
  background-color: #434343;
}

ul.ls-main-menu {
  background-color: #434343;
  color: #ffffff;
}

a.ls-main-menu__item {
  color: #ffffff;
}

span.ls-main-menu__item.ls-main-menu__item.ls-main-menu__item_active.ls-sidebar__pin {
  color: #ffffff;
}

div.dm-tab-panel {
  background-color: #000000;
  color: #ffffff;
}

div.dm-tabs__item-left {
  background-color: #434343;
}

div.dm-select__selected.dm-dropdown__trigger {
  background-color: #000000;
  
}

div.dm-sidebar__title {
  color: #ffffff;
  background-color: #000000;
}

div div span {
  background-color: #434343;
  color: #ffffff;
}

div.dm-sidebar__header {
  background-color: #000000;
}

div.dm-sidebar {
  background-color: #000000;
}

div.dm-filters__list.dm-filters__list_withFilters {
  background-color: #000000;
}

div.dm-filters__actions {
  background-color: #000000;
}

button.dm-button.dm-button_size_small.dm-button_type_primary.dm-button_withIcon {
  background-color: #000000;
}

input.dm-input.dm-input_size_small {
  background-color: #434343;
  color: #ffffff;
}

div.dm-select__value {
  background-color: #000000;
}

div.dm-tabs {
  background-color: #000000;
}

div.ls-menu-header__context {
  background-color: #434343;
}

div.ls-menu-header {
  background-color: #434343;
  color: #ffffff;
}

div div img {
  color: #ffffff;
}

div label span {
  color: #ffffff;
  background-color: #000000;
  
}

div.lsf-outliner__empty {
  color: #ffffff;
  background-color: #434343;
}

div.lsf-tabs__contents {
  background-color: #000000;
  color: #ffffff;
}

div.lsf-topbar__group {
  background-color: #000000;
}

div.lsf-annotation-button.lsf-annotation-button_selected {
  background-color: #666666;
}

div.lsf-tabs-panel__header {
  background-color: #434343;
}

div.lsf-panel-tabs__draggable-tab {
  background-color: #434343;
}

div.lsf-panel-tabs__tab.lsf-panel-tabs__tab_active {
  background-color: #666666;
}

div.ls-projects-page {
  background-color: #666666;
  color: #ffffff;
  
}

div.ls-project-card__header {
  background-color: #434343;
}

div.ls-project-card__info {
  background-color: #434343;
}

div.ls-project-card__description {
  background-color: #ff9900;
}

Note: It's not pretty but it is easy on the eyes. I've only tried this with text labelling. Other labelling modes may have elements that need additional stylings applied.

Happy labeling !!

[GangababuGB]

Amazing Dark Mode Extension works

[nicofretti]

For an easy dark mode solution, consider adding the Dark Reader extension.

[ice6]

it works now! can this issue be closed?

[AbubakarSaad]

Hello,

I'm closing this issue. Dark mode is supported natively in LS now!! https://labelstud.io/blog/label-studio-1-18/?_gl=117b59p_gcl_auMTM5NzgwNjY2OC4xNzYxNjU4NTIy_gaODAzNDQ1MTguMTc2MDAyOTgwNg.._ga_NQELN45JRH*czE3NjE3NTQ2MjIkbzQxJGcxJHQxNzYxNzU1MzcyJGoxOSRsMCRoMA..

[spidersouris]

Are there any plans to support color scheme-specific styles with <Style>? For example, define a specific background-color for a Header element if dark mode is toggled on, and another one if light mode is used. prefers-color-scheme works but it's based on the preferred system-wide color scheme, and it's not overridden by the chosen theme in Light Studio.