Dark mode for editor and app

chrda81 commented 2 months ago

Maybe this helps and can be included somehow. I played around with some styling ops and created this stylesheet for bringing dark mode to my editor and app. It's not perfect and misses some styling ops, but maybe it's a start:

content of static/theme.css:

/* Light mode */
/*
.ComponentRenderer {
  --accentColor: #29cf00;
  --buttonColor: #ffffff;
  --emptinessColor: #e9eef1;
  --separatorColor: rgba(0, 0, 0, .07);
  --primaryTextColor: #202829;
  --buttonTextColor: #202829;
  --secondaryTextColor: #5d7275;
  --containerBackgroundColor: #ffffff;
}
*/

/* Dark mode */
@media (prefers-color-scheme: dark) {

  .ComponentRenderer {
    --accentColor: #0094d1 !important;
    --buttonColor: #0094d1 !important;
    --emptinessColor: #1e1e1e !important;
    --separatorColor: rgba(255, 255, 255, .05) !important;
    --primaryTextColor: #f0f0f0 !important;
    --buttonTextColor: #f0f0f0 !important;
    --secondaryTextColor: #c0c0c0 !important;
    --containerBackgroundColor: #353535 !important;
    --buttonShadow: 3px 2px 2px 1px #1e1e1e !important;
    --containerShadow: 3px 2px 2px 1px #1e1e1e !important;
  }

  .BuilderApp {
    --builderBackgroundColor: #353535 !important;
    --builderAccentColor: #29cf00 !important;
    --builderSuccessColor: #29cf00 !important;
    --builderErrorColor: #ff3d00 !important;
    --builderHeaderBackgroundColor: #353535 !important;
    --builderHeaderBackgroundHoleColor: #202020 !important;
    --builderPrimaryTextColor: #f0f0f0 !important;
    --builderSecondaryTextColor: #c0c0c0 !important;
    --builderAreaSeparatorColor: rgba(0, 0, 0, .2) !important;
    --builderSeparatorColor: rgba(0, 0, 0, .1) !important;
    --builderSubtleSeparatorColor: rgba(255, 255, 255, .05) !important;
    --builderIntenseSeparatorColor: rgba(0, 0, 0, .2) !important;
    --builderSelectedColor: rgba(159, 169, 174, 0.8) !important;
    --builderMatchingColor: #f8dccc !important;
    --builderIntenseSelectedColor: #0094d1 !important;
    --builderSubtleHighlightColor: rgba(255, 255, 255, .05) !important;
    --builderSubtleHighlightColorSolid: #2b2b2b !important;
    --builderDisabledColor: rgb(180, 180, 180) !important;
    --builderSidebarWidth: max(265px, 27vh) !important;
    --builderSettingsWidth: max(265px, 27vh) !important;
    --builderActionOngoingColor: rgba(0, 0, 0, .7) !important;
    --builderTopBarHeight: 48px !important;
    --builderWarningTextColor: white !important;
    --builderWarningColor: #ff3d00 !important;
    background: #1e1e1e !important;
    border: 1px solid var(--builderHeaderBackgroundHoleColor) !important;
    color: var(--builderPrimaryTextColor) !important;
  }

  .BuilderTreeBranch>.main,
  .BuilderTreeBranch>.main>.type {
    color: var(--builderPrimaryTextColor) !important;
  }

  .BuilderFieldsColor,
  .BuilderFieldsShadow,
  .BuilderFieldsText>.content {
    border: 1px solid var(--builderHeaderBackgroundHoleColor) !important;
  }

  .BuilderSettingsHandlers .fieldWrapperMain>span {
    top: -10px !important;
  }
}

I then included this .css file at the bottom into my main.py:

# initial_state.import_stylesheet(
#     "reset-css", "https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"
# )
initial_state.import_stylesheet("theme", "/static/theme.css")

_update_message(initial_state)

chrda81 commented 2 months ago

It seems that some of the BuilderApp color styles are wrong assigned. With my above style.css some button styles are broken:

I think it is not the best case to set the button text color by the defined background color.

ramedina86 commented 1 week ago

Thanks for the contribution, that CSS might come in handy. We don't plan to work on this feature soon, it'll be challenging to implement this in a reliable way and we have other priorities at the moment, so I'm closing this ticket.

writer / writer-framework

Dark mode for editor and app #468