Cybertron - Theme

[nickmilo]

A revised retro theme for Obsidian inspired by Cyberpunk 2077, Dynalist, Tron, The Terminator, Synthwave, and Keanu Reeves.

Notables:

• Dark mode only
• Bold has its own color
• Italics has its own color
• Andy Mode v2 (thanks @death.au)
• cool checkboxes (thanks @death.au)

Download at the github link: https://github.com/nickmilo/Cybertron

UPDATE 20200729: Minor tweaks, new version on github

This is my true love (formerly known as CyberDynalSynth), which has been rebooted as “Cybertron”. You will either love this theme, or avoid it at all costs.

Although it’s inspired to be retro, it’s crazy how useful I find it. I get an incredible amount of work accomplished in it. I do my creative work in Cybertron.

Enjoy!

PS: Please let me know if I’m not crazy and this theme inspires on some level, especially in getting actual creative work done.

[j.split]

Particularly love the yellow highlight and clipped corner on the active note. Great example of fully fledged custom CSS, nice work!

[bbain]

Nick, is it different than the CyberDynalSynth on community themes? I’m using that and like it. I don’t think, though, highlighting text works when searching in file. How would I change css to alter it (not used yet to working in css file, so if too complicated to explain, no need as it is not a big deal)

[bbain]

Ooops, wrote too soon. Downloaded it and tried it and I can highlighting works. It looks great.

[nickmilo]

(I see you got it to work without me! I’ll keep this here for others.)

Highlighting text works in this updated theme. I think I can walk you through this.

• Download this obsidian.css file linked to above
• Go to you notes folder in MacOS or Windows.
• Drag and drop the downloaded file there.

Your computer will ask if you want to replace the existing file called obsidian.css. Select yes.

That should do it!

[bbain]

Again, done. Much appreciated. Your work (and you) have been big help. I’m all in!

[Silver]

@nickmilo: Do you want me to update the entry in community themes to this? Do you feel like it’s the 2.0 of CyberDynalSynth or should it be something of its own?

[nickmilo]

Yes it’s the 2.0 of CyberDynalSynth. Yes please, update whenever time allows!

[edoreld]

I absolutely love this theme! I only wish there was an alternate version with the title of the note on top instead of on the side.

[MooddooM]

You just want delete those css related to andy mode. Here is one:
obsidian.css (15.9 KB)

[nickmilo]

Thanks @MooddooM !

[randulfr]

Hey @nickmilo , am liking Cybertron, been using it for a month now (plus a few additional minor customizations tacked on the end).

One part is giving me a little trouble though: the color of selected text (in both editor and preview) is such a dark blue I can barely make it out against the dark background.

Do you have a thought on a theme-appropriate alternative color that has a little higher contrast? (and how I’d apply it, I’m closer to a css noob than not).

Thanks

[randulfr]

FYI, I figured it out…at least, one way to do it.

Seems it’s not something that cybertron even sets, so it’s using some default.

To address, I added to the .theme-dark selector at top:

 --text-selection: #164f92;

Not sure if that particular color choice fits the vibe you are going for in cybertron (no doubt it can be improved to fit better), but it fixes my ability to see the selection well enough without being too garish, at least for now.

[randulfr]

Also, the little toast notification that appears when you change a note filename that has links to it, the default yellow background made it very difficult to read the text, so this adjusts it (in this case, I gave it same color as the selected text style, in prev post above):

.theme-dark .notice {
    background-color: #164f92;
    color: var(--text-on-accent);
}

[nickmilo]

These are great additions, thank you! Keep going if you find any other areas that you bump on.

I’ve pushed the changes to github. I kept your highlight color and used your provided css code to adjust the ‘toast notification’ to cybertron specs

[nickmilo]

Finally gave the graph some basic attention:

[kinkeymonkey]

Hey @nickmilo , I’m loving your style compared to all other available themes. But this one small part with lines along bullets bugs me. Is it possible to remove them ?

[nickmilo]

Yep, open the css file, scroll to the very bottom and delete this:

/***************************************/
/* at a rule line before ul list */
/***************************************/

ul ul { position: relative; }
ul ul::before { content:''; border-left: 1px solid #2c8ba0; position: absolute; }
ul ul::before { left: -1em; top: 0; bottom: 0; }

/* rule line when there are checkboxes*/
ul .task-list-item ul::before {left: 0.15em !important}

[Mr_V]

Hi @nickmilo,
1st of all, thanks for making this wonderful theme!

I wanted to know if I can change the color of font of top header (where ‘Go Forward’, ‘Go Back’, ‘Minimize’ etc. options are present). It is very dim in Windows 10. I can barely see it.
Just look at the image below

[nickmilo]

Hey, I just pushed changes the the CSS, so you can make changes yourself. You’ll know you have the latest version if they are now a dim blue.

In the CSS, go to lines 1143-1169 and modify the color and opacity options.

/* Title Bar Button */
/***************************************/

.titlebar-button {
    -webkit-app-region: no-drag;
    padding: 0 10px;
    cursor: pointer;
    opacity: 0.5;
    display: inline-block;
    color: #52c1da;
}


.titlebar-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    flex-grow: 1;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0.05em;
    opacity: 0.2;
    color: #52c1da;
}