Skip to content

Default Obsidian Theme CSS Styling

Source: https://github.com/mgmeyers/obsidian-style-settings/blob/main/obsidian-default-theme.css

@settings

name: Obsidian Default Theme
id: obsidian-default-theme
settings:
  - 
    id: heading-fonts
    title: Fonts
    title.de: FONTIESSSS
    type: heading
    level: 1
    collapsed: true
  - 
    id: default-font
    title: Base Font
    type: variable-text
    default: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif'
  - 
    id: mermaid-font
    title: Mermaid Font
    type: variable-text
    default: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif'
  - 
    id: reveal-font
    title: Reveal Font
    type: variable-text
    default: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif'
  - 
    id: font-monospace
    title: Monospace Font
    title.de: MONOSPACIE FONTIEEE
    description: Used for codeblocks, tables, etc.
    description.de: CODIE BLOCKIES
    type: variable-text
    default: '"Source Code Pro", monospace'

  - 
    id: heading-translucency
    title: Translucency
    type: heading
    level: 1
    collapsed: true
  -
    id: opacity-translucency-light
    title: Light Theme Translucency
    type: variable-number-slider
    default: 0.6
    min: 0
    max: 1
    step: 0.01
  -
    id: opacity-translucency-dark
    title: Dark Theme Translucency
    type: variable-number-slider
    default: 0.75
    min: 0
    max: 1
    step: 0.01

  - 
    id: heading-colors-background
    title: Background Colors
    type: heading
    level: 1
    collapsed: true
  -
    id: background-primary
    title: Background Primary
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#ffffff'
    default-dark: '#202020'
  -
    id: background-primary-alt
    title: Background Primary (alt)
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#f5f6f8'
    default-dark: '#1a1a1a'
  -
    id: background-secondary
    title: Background Secondary
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#f2f3f5'
    default-dark: '#161616'
  -
    id: background-secondary-alt
    title: Background Secondary (alt)
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#e3e5e8'
    default-dark: '#000000'
  -
    id: background-modifier-border
    title: 'Background Modifier: Border'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#dddddd'
    default-dark: '#333333'
  -
    id: background-modifier-form-field
    title: 'Background Modifier: Form Field'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#ffffffff'
    default-dark: '#0000004d'
  -
    id: background-modifier-form-field-highlighted
    title: 'Background Modifier: Form Field (highlighted)'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#ffffffff'
    default-dark: '#00000038'
  -
    id: background-modifier-box-shadow
    title: 'Background Modifier: Box Shadow'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#0000001a'
    default-dark: '#0000004d'
  -
    id: background-modifier-success
    title: 'Background Modifier: Success'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#A4E7C3'
    default-dark: '#197300'
  -
    id: background-modifier-error
    title: 'Background Modifier: Error'
    type: variable-themed-color
    opacity: false
    format: hex
    alt-format:
      -
        id: background-modifier-error-rgb
        format: rgb-values
    default-light: '#990000'
    default-dark: '#3d0000'
  -
    id: background-modifier-error-hover
    title: 'Background Modifier: Error (hover)'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#bb0000'
    default-dark: '#470000'
  -
    id: background-modifier-cover
    title: 'Background Modifier: Cover'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#000000cc'
    default-dark: '#000000cc'

  - 
    id: heading-colors-text
    title: Text Colors
    type: heading
    level: 1
    collapsed: true
  -
    id: text-accent
    title: 'Text: Accent'
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#705dcf'
    default-dark: '#7f6df2'
  -
    id: text-accent-hover
    title: 'Text: Accent (hover)'
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#7a6ae6'
    default-dark: '#8875ff'
  -
    id: text-normal
    title: 'Text: Normal'
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#2e3338'
    default-dark: '#dcddde'
  -
    id: text-muted
    title: 'Text: Muted'
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#888888'
    default-dark: '#999999'
  -
    id: text-faint
    title: 'Text: Faint'
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#999999'
    default-dark: '#666666'
  -
    id: text-error
    title: 'Text: Error'
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#800000'
    default-dark: '#ff3333'
  -
    id: text-error-hover
    title: 'Text: Error (hover)'
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#990000'
    default-dark: '#990000'
  -
    id: text-highlight-bg
    title: 'Text: Highlight Background'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#ffff0066'
    default-dark: '#ffff0066'
  -
    id: text-highlight-bg-active
    title: 'Text: Highlight Background (active)'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#ff800066'
    default-dark: '#ff800066'
  -
    id: text-selection
    title: 'Text: Selection Background'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#cce6fffc'
    default-dark: '#17304dfc'
  -
    id: text-selection
    title: 'Text: On Accent'
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#f2f2f2'
    default-dark: '#dcddde'

  - 
    id: heading-colors-interactive
    title: Interactive Colors
    type: heading
    level: 1
    collapsed: true
  -
    id: interactive-normal
    title: 'Interactive: Normal'
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#f2f3f5'
    default-dark: '#2a2a2a'
  -
    id: interactive-hover
    title: 'Interactive: Hover'
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#e9e9e9'
    default-dark: '#303030'
  -
    id: interactive-accent
    title: 'Interactive: Accent'
    type: variable-themed-color
    opacity: false
    format: hex
    alt-format:
      -
        id: interactive-accent-rgb
        format: rgb-values
    default-light: '#7b6cd9'
    default-dark: '#483699'

  -
    id: interactive-accent-hover
    title: 'Interactive: Accent (hover)'
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#8273e6'
    default-dark: '#4d3ca6'
  -
    id: interactive-success
    title: 'Interactive: Success'
    type: variable-themed-color
    opacity: false
    format: hex
    default-light: '#197300'
    default-dark: '#197300'

  - 
    id: heading-colors-scrollbar
    title: Scrollbar Colors
    type: heading
    level: 1
    collapsed: true
  -
    id: scrollbar-bg
    title: 'Scrollbar: Background'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#0000000d'
    default-dark: '#ffffff0d'
  -
    id: scrollbar-thumb-bg
    title: 'Scrollbar: Thumb Background'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#0000001a'
    default-dark: '#ffffff1a'
  -
    id: scrollbar-active-thumb-bg
    title: 'Scrollbar: Active Thumb Background'
    type: variable-themed-color
    opacity: true
    format: rgb
    default-light: '#00000033'
    default-dark: '#ffffff33'

Backlinks:

list from [[Default Obsidian Theme CSS Styling]] AND -"Changelog"