starred/floccus

Fork 0

mirror of https://github.com/floccusaddon/floccus.git synced 2026-04-25 14:16:12 +03:00

[GH-ISSUE #894] Add Dark Theme #582

New issue

Closed

opened 2026-02-25 22:37:33 +03:00 by kerem · 3 comments

kerem commented

2026-02-25 22:37:33 +03:00

Owner

Originally created by @xf- on GitHub (Jun 27, 2021).
Original GitHub issue: https://github.com/floccusaddon/floccus/issues/894

Current state only fits the light theme

Describe the solution you'd like

Add a media query that uses preferred theme and adjust the colors. Easiest is to use var(--your-color) and just overwrite a few variables after the switch.

Originally created by @xf- on GitHub (Jun 27, 2021). Original GitHub issue: https://github.com/floccusaddon/floccus/issues/894 ### Is your feature request related to a problem? Please describe. Current state only fits the light theme ### Describe the solution you'd like Add a media query that uses preferred theme and adjust the colors. Easiest is to use `var(--your-color)` and just overwrite a few variables after the switch.

kerem

2026-02-25 22:37:33 +03:00

closed this issue
added the
enhancement

🙁 Not following issue template
labels

kerem commented

2026-02-25 22:37:33 +03:00

Author

Owner

@github-actions[bot] commented on GitHub (Jun 27, 2021):

Hi @xf-! This issue is being automatically closed because it does not follow the issue template.

@github-actions[bot] commented on GitHub (Jun 27, 2021): Hi @xf-! This issue is being automatically closed because it does not follow the issue template.

kerem commented

2026-02-25 22:37:33 +03:00

Author

Owner

@xf- commented on GitHub (Jun 27, 2021):

This resolves the "issue" for me.

@media (prefers-color-scheme: dark) {
  html .v-application .light-blue.lighten-5 {
    background-color: #333 !important;
    border-color: #333 !important;
  }

  html footer,
  html .theme--light.v-application,
  html .theme--light.v-card,
  html .v-application .white,
  html .v-btn.v-btn--has-bg {
    background-color: #000 !important;
    color: #ffffffde !important;
  }

  html .v-btn.v-btn--has-bg {
    background-color: #444 !important;
  }

  html .v-btn.v-btn--icon,
  html .v-label,
  html .v-input input,
  html .v-input textarea,
  html .v-input,
  html .v-icon,
  html .v-messages {
    color: #ffffffde !important;
  }

  html .v-expansion-panels .v-expansion-panel {
    background-color: #222 !important;
    border-color: #222 !important;
    color: #ffffffde !important;
  }

  html .v-input__slot::before {
    border-color: #eee !important;
  }
}

Also, I added this to get rid of huge scrollbars in Firefox

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #ffffffde  #333;
}

@xf- commented on GitHub (Jun 27, 2021): This resolves the "issue" for me. ```css @media (prefers-color-scheme: dark) { html .v-application .light-blue.lighten-5 { background-color: #333 !important; border-color: #333 !important; } html footer, html .theme--light.v-application, html .theme--light.v-card, html .v-application .white, html .v-btn.v-btn--has-bg { background-color: #000 !important; color: #ffffffde !important; } html .v-btn.v-btn--has-bg { background-color: #444 !important; } html .v-btn.v-btn--icon, html .v-label, html .v-input input, html .v-input textarea, html .v-input, html .v-icon, html .v-messages { color: #ffffffde !important; } html .v-expansion-panels .v-expansion-panel { background-color: #222 !important; border-color: #222 !important; color: #ffffffde !important; } html .v-input__slot::before { border-color: #eee !important; } } ``` Also, I added this to get rid of huge scrollbars in Firefox ```css html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #ffffffde #333; } ```

kerem commented

2026-02-25 22:37:33 +03:00

Author

Owner

@github-actions[bot] commented on GitHub (May 24, 2023):

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions[bot] commented on GitHub (May 24, 2023): This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/floccus#582

No description provided.

Rows
Columns