Quinta/chiaroscuroflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

seems done

Browse Source
This commit is contained in:
Quinta
2024-07-14 17:00:19 +02:00
parent 3210364839
commit 478cd39c9d
5 changed files with 86 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+47 -81
View File
@@ -1,95 +1,61 @@
This is a sample theme for Obsidian ([https://obsidian.md](https://obsidian.md/)).
![intro.png](image.png)
## First Time publishing a theme?
# Chiaroscuro Flow Obsidian Theme
### Quick start
Chiaroscuro Flow is a visually appealing and highly customizable theme for Obsidian that brings a unique blend of light and dark aesthetics to your note-taking experience. This theme features smooth gradients, elegant fonts, and configurable settings to match your preferences in both light and dark modes.
<img width="244" alt="Pasted image 20220822135601" src="https://user-images.githubusercontent.com/693981/186000386-4f4da987-fcaf-4aa5-aed4-e34b5901255d.png">
## Requirements
First, choose **Use this template**. That will create a copy of this repository (repo) under your Github profile. Then, you will want to _clone_ your new repository to your computer.
- **Style Settings Plugin:** This theme requires the [Style Settings Plugin](https://github.com/mgmeyers/obsidian-style-settings) to customize the theme settings. Make sure to install and enable this plugin to take full advantage of Chiaroscuro Flow's customization options.
Once you have the repo locally on your computer, there are a couple of placeholder fields you will need to fill in.
## Features
1. Inside the `manifest.json` file, change the "name" field to whatever you want the name of your theme to be. For example:
### Custom Fonts
- **Body Font:** The default body font is `Manrope`, providing a clean and modern look to your notes.
- **Header Font:** The header font is `Nunito Sans Bold`, giving a bold and striking appearance to your headings.
```json
{
"name": "Moonstone",
"version": "0.0.0",
"minAppVersion": "1.0.0"
}
```
### Color Customization
- **Light Mode:**
- Primary Background: `#FFFFFF` (customizable)
- Secondary Background: `#F0F0F0` (customizable)
- Text Color: `#333333` (customizable)
- Code Block Background: `#F0F0F0` (customizable)
- Math Block Background: `#F0F0F0` (customizable)
2. Also inside the manifest.json file, you can include your name under next to the "author" field.
![](graph.png)
After you have those fields configured, all that's left to do is add your styles! All of your CSS needs to be inside the file `theme.css` which is located at root of your repository.
- **Dark Mode:**
- Primary Background: `#1E1E1E` (customizable)
- Secondary Background: `#2D2D2D` (customizable)
- Text Color: `#DDDDDD` (customizable)
- Code Block Background: `#2D2D2D` (customizable)
- Math Block Background: `#2D2D2D` (customizable)
## Adding your theme to the Theme Gallery
![](canvas.png)
### Gradients and Backgrounds
- **Light Mode Gradients:**
- Soft Peach, Pale Gold, Light Coral, Powder Blue, Mint Green, Pale Blue, Lavender, and Light Pink
![](intropt2.png)
- **Dark Mode Gradients:**
- Deep Purple, Dark Slate Blue, Midnight Blue, Dark Magenta, Dark Cyan, Dark Slate Gray, Dark Olive Green, and Dim Gray
![](intropt1.png)
### Print/PDF Export Compatibility
- The theme includes specific styles to ensure that gradient backgrounds are not applied when exporting to PDF, ensuring a clean and professional look for your exported documents.
### Add a screenshot thumbnail
### Readability Enhancements
- Text shadows are applied to headings to improve readability.
- Proper contrast adjustments are made for UI elements to ensure visibility in both light and dark modes.
Inside the repository, include a screenshot thumbnail of your theme. You can name the file anything, for example `screenshot.png`. This image will be used for the small preview in the theme list.
### How to Use
1. Download and install the `Chiaroscuro Flow` theme through the community theme store.
2. Install and enable the [Style Settings Plugin](https://github.com/mgmeyers/obsidian-style-settings).
3. Activate the theme from the Obsidian settings.
4. Customize the theme settings according to your preferences via the Style Settings Plugin panel.
Your screenshot file should be `16:9` aspect ratio.
The recommended size is 512x288.
### Customization
You can further customize the theme by modifying the CSS variables defined in the theme file. Here's an example of how to adjust the primary background color in light mode:
### Submit your theme for review
To have your theme included in the Theme Gallery, you will need to submit a Pull Request to [`obsidianmd/obsidian-releases`](https://github.com/obsidianmd/obsidian-releases#community-theme).
## Releasing Versions _(Optional)_
If your theme is getting more and more complex, you might want to start thinking about how your theme will stay compatible with different versions of Obsidian. Introduced in v0.16 of Obsidian, themes support [Github Releases](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository). This means that you can specify which versions of your theme are compatible with which versions of Obsidian.
### Steps for releasing the initial version of your theme (1.0.0)
1. From your theme's repository, click on "Releases".
<img width="235" alt="Pasted image 20220822145001" src="https://user-images.githubusercontent.com/693981/186000441-287a1a97-65f6-4b5f-ba66-810ceae91cd3.png">
2. On the Releases page, there should be a button to **Draft a new Release**. Press it.
<img width="202" alt="Pasted image 20220822145048" src="https://user-images.githubusercontent.com/693981/186000664-6c63ae14-f685-4d39-bfe6-324f95cd9669.png">
3. Fill out the Release information form.
- **Choose a Tag**: Type in the name of the version number here. At the bottom of the dropdown should be a button to create a new tag with your latest theme changes. Choose this option.
<img width="340" alt="Pasted image 20220822145648" src="https://user-images.githubusercontent.com/693981/186000848-bd1c2619-ea09-4e70-a886-40769cda6921.png">
- **Release Title**: This can be the version number.
- **Description** _Optional_: Anything that changed
- **Files:** The most important part of this form is uploading the files. You can do this by dragging 'n dropping the `manifest.json` file and the `theme.css` file your for theme inside the file upload field.
<img width="946" alt="Pasted image 20220822145356" src="https://user-images.githubusercontent.com/693981/186000772-e689ecea-c3b7-4e9d-9204-7ad62c0123aa.png">
4. Click "Publish Release."
5. Make sure that `versions.json` is set up correctly. This file is a map.
```json
{
"1.0.0": "0.16.0"
}
```
This means that version 1.0.0 of your theme is compatible with version 0.16.0 of Obsidian. For the initial release of your theme, you shouldn't need to make any changes to this file.
### Steps for releasing new versions
Releasing a new version of your theme is the same as releasing the initial version.
1. From your theme's repository, click on "Releases."
2. On the Releases page, there should be a button to **Draft a new Release**. Press it.
3. Fill out the Release information form.
- **Choose a Tag**: Type in the name of the version number here. At the bottom of the dropdown should be a button to create a new tag with your latest theme changes. Choose this option.
<img width="333" alt="Pasted image 20220822145812" src="https://user-images.githubusercontent.com/693981/186000912-f494def9-0f67-4662-92bf-bd278082455f.png">
- **Release Title**: This can be the version number.
- **Description** _Optional_: Anything that changed
- **Files:** The most important part of this form is uploading the files. You can do this by dragging 'n dropping the `manifest.json` file and the `theme.css` file your for theme inside the file upload field.
4. Click "Publish Release."
5. Update the `versions.json` file in your repository. For the initial release of your theme, you probably didn't need to make any changes to the `versions.json` file. When you release subsequent versions of your theme; however, it's best practice to include the new version as entry in the versions.json file. So this might look like:
```json
{
"1.0.0": "0.16.0",
"1.0.1": "0.16.0"
}
```
What's important to note here is: the new version is included as the "key" and the "value" is the minimum version of Obsidian that your theme compatible with. So if the new version of your theme is only compatible with an Insider version of Obsidian, it's important to set this value accordingly. This will prevent users on older versions of Obsidian from updating to the newer version of your theme.
```css
:root {
--background-primary-light: #FFFAF0; /* Light Ivory */
}
image.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

intropt1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

intropt2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

theme.css
+39
View File
@@ -279,6 +279,45 @@ body, .cm-s-obsidian {
margin-bottom: 0.5em;
}
.theme-light h3 {
font-size: 1.5em;
margin-bottom: 0.5em;
}
.theme-dark h3 {
font-size: 1.5em;
margin-bottom: 0.5em;
}
.theme-light h4 {
font-size: 1.25em;
margin-bottom: 0.5em;
}
.theme-dark h4 {
font-size: 1.25em;
margin-bottom: 0.5em;
}
.theme-light h5 {
font-size: 1em;
margin-bottom: 0.5em;
}
.theme-dark h5 {
font-size: 1em;
margin-bottom: 0.5em;
}
.theme-light h6 {
font-size: 0.75em;
margin-bottom: 0.5em;
}
.theme-dark h6 {
font-size: 0.75em;
margin-bottom: 0.5em;
}
/* Background for code and math blocks in light mode */