Code Monkey home page Code Monkey logo

Comments (6)

mbeckrich avatar mbeckrich commented on June 9, 2024 1

A first go at this has just been pushed to main. I'll leave this issue open for the time being in case anyone has feedback. Didn't have time tonight, but I will integrate the font color choices with Style Settings soon.

from obsidian.

AnubisNekhet avatar AnubisNekhet commented on June 9, 2024

@mbeckrich this should be doable but it'll need a dedicated decorations.scss file I think
Using catppuccin accents for decorations which can be selected independently means that we'll need to add individual selector classes for both bold and italic elements

from obsidian.

mbeckrich avatar mbeckrich commented on June 9, 2024

@qdgiang01 Will implement.

@AnubisNekhet Sounds good, going to get started on it rn but have appointments all afternoon so might not get done until tomorrow-ish.

from obsidian.

mbeckrich avatar mbeckrich commented on June 9, 2024

This is what I'm looking at right now for the full palette theme @AnubisNekhet. Open to any changes, put this on development for the time being. Will tackle the Style Settings/accent themes when I get home.

image

from obsidian.

AnubisNekhet avatar AnubisNekhet commented on June 9, 2024

Sounds good πŸ‘

from obsidian.

mbeckrich avatar mbeckrich commented on June 9, 2024

As of 24020e3, people with the Style Settings plugin should be able to swap out the default theme's colors for headings, italics, bold, strikethrough, and blockquote with their preferred colors from the palette.

For anyone who wants to make their own modifications (e.g. change default colors themselves, mess with opacity, etc.), I thought I would be able to do something in Style Settings like:

id: ctp-bold
type: variable-select
default: var(--ctp-sapphire)
strong,
cm-strong {
--bold-color: rgb(var(--ctp-bold);
}

But this method only works once the user selects a color. The --ctp-sapphire variable doesn't seem to go anywhere until then and if you do pick the color and then hit the plugin's default button, the color resets to grey and not the default from the yaml. If this is common knowledge, my bad, but the type: class-select in Anubis's contribution works how I would have expected type: variable-select to work, so this threw me for a loop. Anyway, I found I needed to add a fallback variable as the real default (the user-selected color seems to persist through opening/closing the app and enabling/disabling the plugin, but not sure if that will always be the case):

/*_typography.scss*/
strong,
.cm-strong {
  --bold-color: rgb(var(--ctp-bold, var(--ctp-sapphire)));
}

from obsidian.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.