Bear Theme File Parameter Documentation?

Support
1

I’ve been playing around with making my own custom Bear themes, but was wondering if there is any documentation that explains or illustrates how/where the various parameters in the theme files are used within the app. Some of the parameters are pretty self explanatory, but for example in the Dracula theme code below… where are the base secondary/tertiary text/background colors used? Or what things does the accent color affect, and does that change if you set different color parameters for things in other sections? Thanks for any help you all can offer.

{
  "base": {
    "text color": "#ffffff",
    "text secondary color": "#C8C9CC",
    "text tertiary color": "#ffffff",
    "background color": "#353846",
    "background secondary color": "#303343",
    "background tertiary color": "#262937",
    "stroke color": "#232430",
    "accent color": "#cdaef9",
    "search primary color": "#7F2D5E",
    "search secondary color": "$base.selection color",
    "highlight color": "#5f6375",
    "selection color": "#585370"
  },
  "notes": {
    "title color": "$editor.headers.text color",
    "subtitle color": "$base.text secondary color",
    "placeholder color": "$base.text secondary color",
    "date color": "$base.text secondary color",
    "pin color": "#8CEEFF",
    "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": "$base.accent color",
    "toolbar": {
      "background color": "$base.background color",
      "text color": "$base.text color",
      "icon color": "#8CE8FE",
      "hover color": "$base.background secondary color"
    }
  },
  "sidebar": {
    "text color": "#8be9fd",
    "text secondary color": "#ffffff",
    "background color": "#232530",
    "background secondary color": "#8f3a6d",
    "stroke color": "$sidebar.background color",
    "accent color": "#b0548b",
    "icon color": "#CDADF9",
    "selected icon color": "#ffffff",
    "toolbar": {
      "background color": "$sidebar.background color",
      "icon color": "$sidebar.icon color",
      "hover color": "#2B2C38"
    }
  },
  "placeholder": {
    "background color": "$base.background color",
    "background stroke color": "#5694a4",
    "shadow color": "$base.background color",
    "stroke color": "#5694a4"
  },
  "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": "#8AE9FD",
    "list marker color": "#CDAEF9",
    "marker color": "#CDAEF9",
    "selection color": "$base.selection color",
    "selection inactive color": "$base.background tertiary color",
    "text font": "BearSansUI-Regular",
    "text size": 15,
    "line height multiplier": 1.5,
    "headers": {
      "text color": "#50FA7B",
      "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": "#7587b3",
        "constant": "#5af78e",
        "number": "#caa9fa",
        "string": "#f4f99d",
        "entity": "#ff92d0",
        "keyword": "#73d5e9",
        "function": "#ff92d0",
        "variable": "#ff92d0"
      }
    },
    "task": {
      "background color": "$base.background color",
      "border color": "#CDAEF9",
      "check color": "#CDAEF9"
    },
    "tag": {
      "background color": "#812F89",
      "text color": "$base.text color",
      "marker color": "$base.text secondary color"
    },
    "highlighter": {
      "background color": "$base.highlight color",
      "text color": "$base.text color"
    },
    "separator": {
      "border color": "#CDAEF9"
    },
    "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
2

I’m afraid there isn’t any documentation available regarding themes.

where are the base secondary/tertiary text/background colors used?

Bear’s theming is based on 3 backgrounds and 3 text colors system to handle the different UI cases so both keys are used in multiple locations. background secondary is used for note list selection and code inside the editor. Tertiary is used for the folding icon background, locked notes “brick” subtitle, and separators, …

Or what things does the accent color affect, and does that change if you set different color parameters for things in other sections?

the accent color is, for example, the red of the default theme and it’s used across all the app. I don’t understand the rest of the question.

3

thanks for taking time to help me understand those parameters better, those descriptions were helpful.

4

one related follow-up question… is there any way at this point to create or customize your own themes for ios?

5

Somewhat related @trix180 - is there any way (in desktop app) to have list items show as regular dashes and not as circled bullets?

6

I’m afraid I’m not aware of a way to achieve this at the moment.

No, this is not possible as well.

7

Is there an accepted process for designing and submitting a custom theme for consideration of adoption by the official app, iOS and desktop? If so, what is the proper/best deliverable? Resource file (code)? Visual design “kitchen sink?”

8

We don’t have a procedure for submitting themes but, if you already have a .theme file you want to share, feel free to send it to our support or share it here.

If you saw a theme in another app and you’d like to see it in Bear, share a link to it.

2 Likes