Coder Social home page Coder Social logo

openmindculture / intellij-cute-pink-dark-theme Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 2.16 MB

Cute Pink Dark Theme is a dark IDE theme for JetBrains IDEs (PhpStorm, WebStorm, IntelliJ IDEA, etc.) adding cute pink colors to your IDE. theme

Home Page: https://plugins.jetbrains.com/plugin/20367-cute-pink-dark-theme

License: MIT License

Shell 100.00%
dark-theme intellij-plugin intellij-theme phpstorm pink theme theme-development

intellij-cute-pink-dark-theme's Introduction

Cute Pink Dark Theme

Cute Pink Dark Theme is a dark IDE theme for JetBrains IDEs (PhpStorm, WebStorm, IntelliJ IDEA, etc.) adding cute pink colors to your IDE. theme), Unlike the original Cute Pink Light Theme, which has been inspired by a theme for VisualStudio Code, Cute Pink Dark Theme is based on the default dark mode editor scheme.

BETA: This theme is usable, but still unfinished!

If you like to support development, you can open a pull request on GitHub.

For JetBrains IDEs, version 2020.2 and above. Tested up to 2023.3 (233). It will probably work on older builds like 2019.1 as well, but untested.

To install:

  • Go to Settings (Preferences) | Plugins, find the theme plugin and install it
  • (or download from JetBrains Plugins page
  • Restart IDE
  • Go to Settings (Preferences) | Appearance & Behavior | Appearance and see the Theme dropdown Report an issue | on GitHub.

If you only want to install the theme, you do not need this repository. You can install the theme from JB marketplace (inside your IDE) or install zip file (see below).

Screenshot

screenshot

Local Installation

In build/distributions there is a zip file that I can manually import into my regular PhpStorm installation (Settings -> Plugins -> Gear Icon -> install plugin from disk).

Development

Cute Pink Dark Theme (intellij-cute-pink-dark-theme) is a fork from Cute Pink Light Theme (openmindculture/intellij-cute-pink-light-theme) which can be used an upstream repository:

git checkout [email protected]:openmindculture/intellij-cute-pink-dark-theme.git
cd intellij-cute-pink-dark-theme.git
git remote add upstream [email protected]:openmindculture/intellij-cute-pink-light-theme.git
git merge upstream/main

Copy colors for side bar, title, border etc. from src/main/resources/cute_pink_light_theme.json to src/main/resources/cute_pink_dark_theme.json.

git checkout [email protected]:openmindculture/intellij-cute-pink-dark-theme.git
cd intellij-cute-pink-dark-theme.git
git remote add upstream [email protected]:openmindculture/intellij-cute-pink-light-theme.git

Recommended development environment is IntelliJ IDEA Ultimate, to benefit from pre-configured build actions etc. like described by JetBrains in the custom UI theme workflow. But this is not necessary for a simple theme plugin.

A plugin consisting of a single .jar file is placed in the /plugins directory. Source: https://plugins.jetbrains.com/docs/intellij/plugin-content.html

For anyone planning to create a new theme plugin: you probably do not need a complex Gradle setup, as there is a new wizard for creating a UI theme. See:

To find out the internal names of UI elements, we can now use the UI inspector:

The UI Inspector is a powerful tool to investigate the IntelliJ-based IDE UI elements to get an internal description of each element. In addition, UI elements can be tested interactively with Ctrl+Alt+Click on the element.

Before using the UI Inspector, it must be enabled by selecting the menu item Tools | Internal Actions | UI | UI Inspector. The enabled state of the UI Inspector is modal; it remains enabled until it is disabled by selecting the menu item again.

If the menu item Tools | Internal Actions is not available in IntelliJ IDEA, then the first step is Enabling Internal Mode:

From the main menu, select Help | Edit Custom Properties... This selection opens IntelliJ IDEA's idea.properties file. If it does not exist, IntelliJ IDEA will prompt to create one.

Add the line shown below to the idea.properties file:

idea.is.internal=true Save the idea.properties file and restart IntelliJ IDEA.

More information about colors and fonts can be found here: https://www.jetbrains.com/help/idea/configuring-colors-and-fonts.html

Development, Build and Export

  • Edit colors in src/main/META-INF/cute_pink_dark_theme.json.
  • As a contributor:
    • create a pull request on GitHub.
  • As a maintainer:
    • Edit theme version, supported IDE versions, and other data, in
      • src/main/resources/META-INF/plugin.xml
      • src/main/resources/META-INF/MANIFEST.MF
      • package.json
      • gradle.properties (only used for IntelliJ gradle build)
      • build.gradle.kts (only used for IntelliJ gradle build)
    • Build using one of the methods described below.
    • Add a change log in CHANGELOG.md.
    • Add a git tag, create a release, and add the theme zip.
    • Upload the theme zip to JetBrains marketplace.

Shell Build (beta)

npm run build

  • requires bash/sh!
  • creates a build/distributions/intellij-cute-pink-light-theme-x.y.z.zip

Alternative Manual Export

Create an archive intellij-cute-pink-dark-theme-x.y.z.zip containing:

  • intellij-cute-pink-dark-theme/
    • lib/
      • intellij-cute-pink-dark-theme-x.y.z.jar The .jar file is another zip archive containing the contents of src/resources with **no additional folder in between, e.g.:
        • cute_pink_dark.theme.json
        • cute_pink_dark.xml
        • META-INF/
          • plugin.xml
          • pluginIcon.svg
          • MANIFEST.MF

A valid MANIFEST.MF example is included to simplify theme export and update.

You can use the build script ./build.sh $version to build, e.g. ./build.sh 2.9.0

Fix Problems and Incompatibilities

If the build does not run anymore, try to

Upgrade Plugin for new IDEA versions

  • bump plugin version
  • add current IDEA version to supported targets
  • rebuild artifacts as described above

Author

I am Ingo Steinke (@openmindculture on GitHub) a creative web developer, creating sustainable software and websites. If you like my talks and articles, feel free to support me on patreon, buy me a coffee or hire me as a freelancer.


Plugin based on the IntelliJ Platform Plugin Template.

intellij-cute-pink-dark-theme's People

Contributors

actions-user avatar dependabot[bot] avatar openmindculture avatar

Watchers

 avatar  avatar

intellij-cute-pink-dark-theme's Issues

editor style glitch when both light + dark theme variation installed

Unreproducible bugs in IntelliJ Cute Pink Light Theme, like

  • dark editor pane when no file open
  • unreadable text in refactor rename file name dialog (TODO link issue)
    seem to occur only if both
  • Cute Pink Light Theme, and
  • Cute Pink Dark Theme
    are installed and active.

I suspect both theme share a certain resource which they should not.
TODO: check namespace, could the dark theme possibly overwrite light theme values?

Choosing theme colors

Which colors to choose for UI and editor scheme?

We did explicitly not want to recreate another Pink as Heck, as discussed in enhancement Cute pink dark theme? suggested by @demonlol

Could I expect a togglable white/dark theme for this project? I'm a fan of pink themes, but I can't stand the white... If you're unable to, I can. I figured I'd ask first, seeing this repo is still somewhat active. Thanks in advance!

There are existing dark pink themes (at least I know one, Pink as Heck , but a togglable dark/light would be very cool!
Maybe we only need to change the editor theme and/or base theme, but I see you seem to have an idea already.

I've taken a look at Pink As Heck, but the dev(s) went a little too overboard with the pink. I like your attempt much better.

not showing up

hey i just tried this theme and it isnt working for me unfortunatly, its just white

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.