Modifying Sidebar Font Size

Theme modification is not encouraged and could be overwritten with an update. That caveat said, how can I increase the font size in Bear’s sidebars? They’re legible on a smartphone but headache-small on a high-resolution monitor. Here is the .theme code I have (and think it looks pretty spiffy), but I can find no hooks for font size. Also, why is there a font-size limit in the editor?

{
  "base": {
    "text color": "#203b4d",
    "text secondary color": "#6E7681",
    "text tertiary color": "#676f7e",
    "background color": "#fefcf8",
    "background secondary color": "#F5F6FA",
    "background tertiary color": "#E0E2E9",
    "stroke color": "#DCDFE3",
    "accent color": "#d37e7e",
    "search primary color": "#FFFA5E",
    "search secondary color": "$base.selection color",
    "highlight color": "#d3ffa4",
    "selection color": "#D3E6FB"
  },
  "notes": {
    "title color": "#5f1600",
    "subtitle color": "$base.text secondary color",
    "placeholder color": "$base.text secondary color",
    "date color": "$base.text secondary color",
    "pin color": "$base.accent color",
    "separator color": "$base.stroke color",
    "search background color": "$base.search primary color",
    "attachment background color": "$base.background secondary color",
    "encrypted token color": "$base.background tertiary color",
    "selection background color": "$base.background secondary color",
    "ribbon color": "#7D98C1",
    "toolbar": {
      "background color": "$base.background color",
      "text color": "$base.text color",
      "icon color": "#6483B2",
      "hover color": "$base.background secondary color"
    }
  },
  "sidebar": {
    "text color": "#000011",
    "text secondary color": "#ffffff",
    "background color": "#e2e2e2",
    "background secondary color": "#2e5573",
    "stroke color": "$sidebar.background color",
    "accent color": "#3b6b90",
    "icon color": "#070d0d",
    "selected icon color": "#ffffff",
    "toolbar": {
      "background color": "$sidebar.background color",
      "icon color": "$sidebar.icon color",
      "hover color": "$sidebar.background secondary color"
    }
  },
  "placeholder": {
    "background color": "$base.background color",
    "background stroke color": "#E2E8F0",
    "shadow color": "#E7ECF3",
    "stroke color": "#a8bad6"
  },
  "editor": {
    "background color": "$base.background color",
    "text color": "$base.text color",
    "text light color": "$base.text secondary color",
    "accent color": "$base.accent color",
    "cursor color": "$base.accent color",
    "link color": "#83060e",
    "list marker color": "$base.accent color",
    "marker color": "#B9C5DD",
    "selection color": "$base.selection color",
    "selection inactive color": "$base.background tertiary color",
    "line height multiplier": 1.5,
    "headers": {
      "text color": "#075589",
      "font": "BearSansUIHeading-Regular",
      "modular scale": 1.125,
      "line height multiplier": 1.3,
      "add top bottom padding": 1,
      "padding top multiplier": 0.5,
      "padding bottom multiplier": 0.3
    },
    "code": {
      "text color": "$base.text color",
      "border color": "$base.text tertiary color",
      "background color": "$base.background secondary color",
      "font": "RobotoMono-Regular",
      "syntax highlight": {
        "comment": "#737577",
        "constant": "#782b87",
        "number": "#762727",
        "string": "#ad435b",
        "entity": "#0b3587",
        "keyword": "#0f60da",
        "function": "#782b87",
        "variable": "#0b3587"
      } 
    },
    "task": {
      "background color": "$base.background color",
      "border color": "#9EB0CE",
      "check color": "#9EB0CE"
    },
    "tag": {
      "background color": "#B1BDCD",
      "text color": "#FFFFFF",
      "marker color": "#436AA3"
    },
    "highlighter": {
      "background color": "$base.highlight color",
      "text color": "$base.text color"
    },
    "separator": {
      "border color": "#9EB0CE"
    },
    "table": {
      "border color": "$base.stroke color",
      "cell background color": "$base.background color",
      "cell alternate background color": "$base.background secondary color"
    },
    "toolbar": {
      "icon color": "$notes.toolbar.icon color",
      "hover color": "$base.background secondary color"
    }
  }
}
1 Like

Bear does consider only colors (not text sizes, line height, etc…) specified in the theme files. We should remove those as they are fluoridating.

Sorry to hear that, but it is your product to direct. Thanks for the reply.

Separate from this theme solution, would indeed like some more flexibility to create much larger fonts in the sidebar for Mac and in the notes list on iOS and iPadOS. I love the large fonts for my notes, but it is often hard for me to read the list of notes due to the small font.

1 Like