{"id":13771983,"url":"https://github.com/mgmeyers/obsidian-style-settings","last_synced_at":"2025-05-15T16:06:22.247Z","repository":{"id":40683662,"uuid":"352429422","full_name":"mgmeyers/obsidian-style-settings","owner":"mgmeyers","description":"A dynamic user interface for adjusting theme, plugin, and snippet CSS variables within Obsidian","archived":false,"fork":false,"pushed_at":"2024-08-24T17:44:50.000Z","size":435,"stargazers_count":1509,"open_issues_count":83,"forks_count":120,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-04-07T22:05:24.780Z","etag":null,"topics":["obsidian","obsidian-md","obsidian-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mgmeyers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"mgmeyers","custom":"https://www.buymeacoffee.com/mgme"}},"created_at":"2021-03-28T20:17:29.000Z","updated_at":"2025-04-07T13:32:07.000Z","dependencies_parsed_at":"2024-03-11T20:32:29.677Z","dependency_job_id":"c21a2993-cfe5-466d-9ce1-617c8853c7ad","html_url":"https://github.com/mgmeyers/obsidian-style-settings","commit_stats":{"total_commits":124,"total_committers":12,"mean_commits":"10.333333333333334","dds":"0.25806451612903225","last_synced_commit":"dfa9f7c81f9345b9bca47c128339e0e00ecd2aee"},"previous_names":[],"tags_count":49,"template":false,"template_full_name":"obsidianmd/obsidian-sample-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgmeyers%2Fobsidian-style-settings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgmeyers%2Fobsidian-style-settings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgmeyers%2Fobsidian-style-settings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mgmeyers%2Fobsidian-style-settings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mgmeyers","download_url":"https://codeload.github.com/mgmeyers/obsidian-style-settings/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374470,"owners_count":22060611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["obsidian","obsidian-md","obsidian-plugin"],"created_at":"2024-08-03T17:00:58.434Z","updated_at":"2025-05-15T16:06:22.223Z","avatar_url":"https://github.com/mgmeyers.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mgmeyers","https://www.buymeacoffee.com/mgme"],"categories":["Creating Themes","TypeScript","🔌 Recommended Plugins"],"sub_categories":[],"readme":"# Obsidian Style Settings Plugin\r\n\r\nThis plugin allows snippet, theme, and plugin CSS files to define a set of configuration options. It then allows users to see all the tweakable settings in one settings pane. Style Settings allows both toggling classes on and off the `body` element, as well as setting numeric, string, and color CSS variables.\r\n\r\n**[This CSS Snippet](obsidian-default-theme.css) can be used to adjust every CSS variable of the default Obsidian theme.** \r\n\r\nConfigurable settings are defined by comments within CSS files beginning with `/* @settings`. These comments must contain YAML with `name`, `id`, and `settings` properties. Style Settings will scan for these comments in all CSS loaded by Obsidian from the `snippets`, `themes`, and `plugins` directories under your vault's configuration directory (`%yourVault%/.obsidian/`).  Please see the [Obsidian Docs](https://help.obsidian.md/Home) for more information.\r\n\r\nFor example, adding this to a CSS snippet in your vault's snippets directory (`%yourVault%/.obsidian/snippets`):\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: my-title\r\n        title: My Settings\r\n        type: heading\r\n        level: 3\r\n    - \r\n        id: accent\r\n        title: Accent Color\r\n        type: variable-color\r\n        format: hsl-split\r\n        default: '#007AFF'\r\n    - \r\n        id: text\r\n        title: UI font\r\n        description: Font used for the user interface\r\n        type: variable-text\r\n        default: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif\r\n\r\n*/\r\n```\r\n\r\nwill result in:\r\n\r\n\u003cimg src=\"https://raw.githubusercontent.com/mgmeyers/obsidian-style-settings/main/screenshots/example01.png\" alt=\"Example output of plugin\" /\u003e\r\n\r\nEach setting definition must be separated by a dash (`-`). There are 7 setting types.\r\n\r\nAll settings definitions must have these parameters:\r\n\r\n- `id`: A unique id for the setting parameter\r\n- `title`: The name of the setting\r\n- `description` (optional): a description of the setting\r\n- `type`: The type of setting. Can be one of:\r\n  - `heading`: a heading element for organizing settings\r\n  - `class-toggle`: a switch to toggle classes on the `body` element\r\n  - `class-select`: a dropdown menu of predefined options to add classes on the `body` element\r\n  - `variable-text`: a text-based CSS variable\r\n  - `variable-number`: a numeric CSS variable\r\n  - `variable-number-slider`: a numeric CSS variable represented by a slider\r\n  - `variable-select`: a text-based CSS variable displayed as a dropdown menu of predefined options\r\n  - `variable-color`: a color CSS variable with corresponding color picker\r\n\r\n\r\n## `heading`\r\n\r\n`heading`s can be used to organize and group settings into collapsable nested sections. Along with the required attributes, `heading`s must contain a `level` attribute between `1` and `6`, and can optionally contain a `collapsed` attribute:\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: this-is-a-heading\r\n        title: My Heading\r\n        type: heading\r\n        level: 2\r\n        collapsed: true\r\n\r\n*/\r\n```\r\n\r\n## `info-text`\r\n\r\n`info-text` displays arbitrary informational text to users. The `description` may contain markdown if `markdown` is set to `true`.\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: my-info-text\r\n        title: Information\r\n        description: \"This is *informational* text\"\r\n        type: info-text\r\n        markdown: true\r\n\r\n*/\r\n```\r\n\r\n## `class-toggle`\r\n\r\n`class-toggle`s will toggle a css class on and off of the `body` element, allowing CSS themes and snippets to toggle features on and off. The `id` of the setting will be used as the class name. The `default` parameter can optionally be set to `true`. `class-toggle` also supports the `addCommand` property. When set to `true` a command will be added to obsidian to toggle the class via a hotkey or the command palette.\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: my-css-class\r\n        title: My Toggle\r\n        description: Adds my-css-class to the body element\r\n        type: class-toggle\r\n\r\n*/\r\n```\r\n\r\n## `class-select`\r\n\r\n`class-select` creates a dropdown of predefined options for a CSS variable. The `id` of the setting will be used as the variable name.\r\n\r\n- When `allowEmpty` is `false`, a `default` option **must** be specified.\r\n- When `allowEmpty` is `true`, the `default` attribute is optional, and may be set to `none`.\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: theme-variant\r\n        title: Theme variant\r\n        description: Variations on a theme\r\n        type: class-select\r\n        allowEmpty: false\r\n        default: my-class\r\n        options:\r\n            - my-class\r\n            - my-other-class\r\n            - and-yet-another\r\n\r\n*/\r\n```\r\n\r\nOptions may also be given a label:\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: theme-variant\r\n        title: Theme variant\r\n        description: Variations on a theme\r\n        type: class-select\r\n        allowEmpty: false\r\n        default: my-class\r\n        options:\r\n            - \r\n                label: My Class\r\n                value: my-class\r\n            - \r\n                label: My Other Class\r\n                value: my-other-class\r\n*/\r\n```\r\n\r\n## `variable-text`\r\n\r\n`variable-text` represents any text based CSS value. The `id` of the setting will be used as the variable name. The output will be wrapped in quotes if `quotes` is set to true. `variable-text` settings require a `default` attribute.\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: text\r\n        title: UI font\r\n        description: Font used for the user interface\r\n        type: variable-text\r\n        default: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif\r\n\r\n*/\r\n```\r\n\r\nThis will output the variable:\r\n\r\n```\r\n--text: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n```\r\n\r\nUsing `quotes`:\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    -\r\n        id: icon\r\n        title: Bullet Icon\r\n        description: Text used in bullet points\r\n        type: variable-text\r\n        default: •\r\n        quotes: true\r\n*/\r\n```\r\n\r\nThis will output the variable:\r\n\r\n```\r\n--icon: '•'\r\n```\r\n\r\n## `variable-number`\r\n\r\n`variable-number` represents any numeric CSS value. The `id` of the setting will be used as the variable name. `variable-number` settings require a `default` attribute. Optionally, a `format` attribute can be set. This value will be appended to the number. Eg `format: px` will result in `42px`\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: line-width\r\n        title: Line width\r\n        description: The maximum line width in rem units\r\n        type: variable-number\r\n        default: 42\r\n        format: rem\r\n\r\n*/\r\n```\r\n\r\nThis will output the variable:\r\n\r\n```\r\n--line-width: 42rem;\r\n```\r\n\r\n## `variable-number-slider`\r\n\r\n`variable-number-slider` represents any numeric CSS value. The `id` of the setting will be used as the variable name. `variable-number-slider` settings require a `default` attribute, as well as these three attributes:\r\n\r\n- `min`: The minimum possible value of the slider\r\n- `max`: The maximum possible value of the slider\r\n- `step`: The size of each \"tick\" of the slider. For example, a step of 100 will only allow the slider to move in increments of 100.\r\n\r\nOptionally, a `format` attribute can be set. This value will be appended to the number. Eg `format: px` will result in `42px`\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: line-width\r\n        title: Line width\r\n        description: The maximum line width in rem units\r\n        type: variable-number-slider\r\n        default: 42\r\n        min: 10\r\n        max: 100\r\n        step: 1\r\n\r\n*/\r\n```\r\n\r\nThis will output the variable:\r\n\r\n```\r\n--line-width: 42;\r\n```\r\n\r\n## `variable-select`\r\n\r\n`variable-select` creates a dropdown of predefined options for a CSS variable. The `id` of the setting will be used as the variable name. `variable-select` settings require a `default` attribute as well as a list of `options`.\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: text\r\n        title: UI font\r\n        description: Font used for the user interface\r\n        type: variable-select\r\n        default: Roboto\r\n        options:\r\n            - Roboto\r\n            - Helvetica Neue\r\n            - sans-serif\r\n            - Segoe UI\r\n\r\n*/\r\n```\r\n\r\nOptions can optionally be given a label:\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: text\r\n        title: UI font\r\n        description: Font used for the user interface\r\n        type: variable-select\r\n        default: Roboto\r\n        options:\r\n            - \r\n                label: The best font\r\n                value: Roboto\r\n            - \r\n                label: The next best font\r\n                value: Helvetica Neue\r\n*/\r\n```\r\n\r\nThis will output the variable:\r\n\r\n```\r\n--text: Roboto;\r\n```\r\n\r\n## `variable-color`\r\n\r\n`variable-color` creates a color picker with a variety of output format options. A `default` attribute is required in `hex` or `rgb` format. **Note: hex color values must be wrapped in quotes.** A `format` attribute is also required. \r\n\r\nOptional parameters:\r\n-  Setting `opacity` to `true` will enable opacity support in all output formats.\r\n-  A list of alternate output formats can be supplied via the `alt-format` setting\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: accent\r\n        title: Accent Color\r\n        type: variable-color\r\n        opacity: false\r\n        format: hex\r\n        alt-format:\r\n            -\r\n                id: accent-rgb\r\n                format: rgb\r\n        default: '#007AFF'\r\n\r\n*/\r\n```\r\n\r\nThis will output the variable:\r\n\r\n```\r\n--accent: #007AFF;\r\n--accent-rgb: rgb(0, 123, 255);\r\n```\r\n\r\n## `variable-themed-color`\r\n\r\n`variable-themed-color` is identical to `variable-color` except that it generates two color pickers for a light and dark variant.\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: accent\r\n        title: Accent Color\r\n        type: variable-themed-color\r\n        format: hex\r\n        opacity: false\r\n        default-light: '#007AFF'\r\n        default-dark: '#2DB253'\r\n\r\n*/\r\n```\r\n\r\nThis will output the variables:\r\n\r\n```\r\nbody.theme-light.css-settings-manager { --accent: #007AFF; } \r\nbody.theme-dark.css-settings-manager { --accent: #2DB253; }\r\n```\r\n\r\n### `variable-color` formatting options\r\n\r\nThere are 8 formatting options:\r\n\r\n- `hex`\r\n\r\n```\r\n--accent: #007AFF;\r\n```\r\n\r\nWhen `opacity` is set to `true`:\r\n\r\n```\r\n--accent: #007AFFFF;\r\n```\r\n\r\n- `rgb`\r\n\r\n```\r\n--accent: rgb(0, 122, 255);\r\n```\r\n\r\nWhen `opacity` is set to `true`:\r\n\r\n```\r\n--accent: rgba(0, 122, 255, 1);\r\n```\r\n\r\n- `rgb-values`\r\n\r\n```\r\n--accent: 0, 122, 255;\r\n```\r\n\r\nWhen `opacity` is set to `true`:\r\n\r\n```\r\n--accent: 0, 122, 255, 1;\r\n```\r\n\r\n- `rgb-split`\r\n\r\n```\r\n--accent-r: 0;\r\n--accent-g: 122;\r\n--accent-b: 255;\r\n```\r\n\r\nWhen `opacity` is set to `true`:\r\n\r\n```\r\n--accent-r: 0;\r\n--accent-g: 122;\r\n--accent-b: 255;\r\n--accent-a: 1;\r\n```\r\n\r\n- `hsl`\r\n\r\n```\r\n--accent: hsl(211, 100%, 50%);\r\n```\r\n\r\nWhen `opacity` is set to `true`:\r\n\r\n```\r\n--accent: hsla(211, 100%, 50%, 1);\r\n```\r\n\r\n- `hsl-values`\r\n\r\n```\r\n--accent: 211, 100%, 50%;\r\n```\r\n\r\nWhen `opacity` is set to `true`:\r\n\r\n```\r\n--accent: 211, 100%, 50%, 1;\r\n```\r\n\r\n- `hsl-split`\r\n\r\n```\r\n--accent-h: 211;\r\n--accent-s: 100%;\r\n--accent-l: 50%;\r\n```\r\n\r\nWhen `opacity` is set to `true`:\r\n\r\n```\r\n--accent-h: 211;\r\n--accent-s: 100%;\r\n--accent-l: 50%;\r\n--accent-a: 1;\r\n```\r\n\r\n- `hsl-split-decimal`\r\n\r\n```\r\n--accent-h: 211;\r\n--accent-s: 1;\r\n--accent-l: 0.5;\r\n```\r\n\r\nWhen `opacity` is set to `true`:\r\n\r\n```\r\n--accent-h: 211;\r\n--accent-s: 1;\r\n--accent-l: 0.5;\r\n--accent-a: 1;\r\n```\r\n\r\n## `color-gradient`\r\n\r\n`color-gradient` outputs a fixed number of colors along a gradient between two existing color variables. A `format` attribute is also required. *Note: The `to` variable must be set in style settings for the gradient to be generated. Also, gradients will only be generated using colors defined under the current style settings `id`.*\r\n\r\nParameters:\r\n- `from`: The starting color, or color that will be at step 0\r\n- `to`: The ending color, or color that will be at step 100\r\n- `step`: The increment at which to output a CSS variable. For example, setting `step` to `10` will output `--var-0`, `--var-10`, `--var-20`, etc...\r\n- `format`: Can be one of: `hsl`, `rgb`, or `hex`;\r\n- `pad`?: When set, the number section of the variable will be padded with `0`'s until it contains this number of digits. For example, setting `pad` to `3` and `step` to `10` will output `--var-000`, `--var-010`, `--var-020`\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    -\r\n        id: color-base\r\n        type: color-gradient\r\n        from: color-base-00\r\n        to: color-base-100\r\n        step: 5\r\n        pad: 2\r\n        format: hex\r\n\r\n*/\r\n```\r\n\r\n## Plugin Support\r\n\r\nPlugins can specify a style setting config in the plugin's CSS. Plugins must call `app.workspace.trigger(\"parse-style-settings\")` when the plugin loads in order for Style Settings to be notified of CSS changes.\r\n\r\n## Localization Support\r\n\r\nTranslations for titles and descriptions can be supplied for each language Obsidian supports by using one of the following postfixes:\r\n\r\n```\r\nen: English\r\nzh: 简体中文\r\nzh-TW: 繁體中文\r\nru: Pусский\r\nko: 한국어\r\nit: Italiano\r\nid: Bahasa Indonesia\r\nro: Română\r\npt-BR: Portugues do Brasil\r\ncz: čeština\r\nde: Deutsch\r\nes: Español\r\nfr: Français\r\nno: Norsk\r\npl: język polski\r\npt: Português\r\nja: 日本語\r\nda: Dansk\r\nuk: Український\r\nsq: Shqip\r\ntr: Türkçe (kısmi)\r\nhi: हिन्दी (आंशिक)\r\nnl: Nederlands (gedeeltelijk)\r\nar: العربية (جزئي)\r\n```\r\n\r\nFor example:\r\n\r\n```css\r\n/* @settings\r\n\r\nname: Your Section Name Here\r\nid: a-unique-id\r\nsettings:\r\n    - \r\n        id: my-css-class\r\n        title: My Toggle\r\n        title.de: Mein Toggle\r\n        title.ko: 내 토글\r\n        description: Adds my-css-class to the body element\r\n        description.de: Fügt my-css-class zum body-Element hinzu\r\n        description.ko: my-css-class를 body 요소에 추가합니다.\r\n        type: class-toggle\r\n\r\n*/\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmgmeyers%2Fobsidian-style-settings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmgmeyers%2Fobsidian-style-settings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmgmeyers%2Fobsidian-style-settings/lists"}