a personal site

better bear dashboard

The Bear dashboard hurts my eyes. But that's okay because it's customizable! I've revamped it to use Rosé Pine Dawn and Catpuccin Frappe colors (these are also colors used on my site). Here's what it looks like:

You'll notice I've also added some other nifty features that Bear dashboard does not have by default. Below is the CSS, which you can customize to your heart's content!

CSS (click to expand) 
/* Better Bear Dashboard */
:root {
  --width: 800px;
  --font-main: Verdana, sans-serif;
  --font-secondary: Verdana, sans-serif;
  --font-scale: 1em;
  --background-color: #faf4ed;
  --heading-color: #575279;
  --text-color: #575279;
  --link-color: #56949f;
  --code-background-color: #f4ede8;
  --blockquote-color: #907aa9;
  --border-color: #cecacd;
  --theme-muted: #9893a5;
  --theme-red: #d7827e;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #303446; /* --ctp-frappe-base */
    --heading-color: #c6d0f5; /* --ctp-frappe-text */
    --text-color: #c6d0f5; /* --ctp-frappe-text */
    --visited-color: #8caaee; /* --ctp-frappe-blue */
    --link-color: #8caaee; /* --ctp-frappe-blue */
    --code-background-color: #232634; /* --ctp-frappe-crust */
    --border-color: #babbf1; /* --ctp-frappe-lavender */
  }

  textarea,
  input:not([type="submit"]),
  .editable {
    background-color: #232634;
  }
}

/* Layout */
body {
  max-width: 1024px;
}

.sticky-controls {
  background-color: var(--background-color);
}

/* Buttons and Forms */
button,
input[type="submit"] {
  padding: 10px 15px;
  background-color: var(--text-color);
  color: var(--background-color);
  border-radius: 10px;
  border: 0;
}

#unpublish-button {
  background-color: var(--theme-muted);
  color: var(--background-color) !important;
}

#delete-button {
  background-color: var(--theme-red);
  color: var(--background-color) !important;
}

#searchInput {
  border: 0px !important;
  background-color: var(--code-background-color) !important;
  color: var(--text-color) !important;
  padding: 5px 15px !important;
  flex: 0 0 200px;
  margin-left: auto;
  font-size: 0.85em;
  border-radius: 4px;
  box-sizing: border-box;
}

.post-form textarea:required,
input:required:not([type="submit"]) {
  border-left: 2px solid var(--text-color);
}

.helptext {
  background-color: var(--code-background-color) !important;
  padding-left: 1em !important;
  padding-right: 1em !important;
}

/* Lists */
li {
  border-bottom: 1px solid var(--border-color) !important;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-block: 2rem 0;
  font-size: 0.95em;
}

.pagination a {
  cursor: pointer;
}

.pagination #pageInfo {
  opacity: 0.7;
  white-space: nowrap;
}

.pagination a[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.pagination #prevPage::before {
  content: "« ";
}

.pagination #nextPage::after {
  content: " »";
}

/* Navigation */
.filter-nav {
  font-size: 0.75em;
  text-transform: uppercase;
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  flex: 0 1 auto;
}

Making Posts and Pages more organized

Coming from Ghost, there are a few things I wish the Bear dashboard had. Like search1, post counts2, categorizing by month3, pagination4, and auto-saving.5 The code for these had already been put published by others, but I remixed them a bit and put them together. see footnotes

<script src="https://cdn.jsdelivr.net/gh/cruciferousgreens/bear-dashboard-improvements/dashboard-improvements.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Note

For some reason if you do not load chart.js in the customize dashboard footer, the charts on the analytics page break. I spent a lot of time debugging this but am not smart enough to figure it out.

If you can figure it out please email me!

More screenshots (click to expand)

  1. Search box is a very slight alteration on Herman's search plugin.↩

  2. My post counters are clickable and more subtle than Herman's, but based directly on Herman's post-counter plugin.↩

  3. Just changed Yordi's Blog Posts by Month to be on the dashboard instead.↩

  4. Pagination is Herman's code but on the dashboard.↩

  5. Post saving is verbatim from Herman.↩

#bear #tech