Git Product home page Git Product logo

easyedathemes's Introduction

EasyEda Themes Extension

๐Ÿ“– Overview

This extension revamps the entire EasyEda UI with several unique Dark ๐Ÿ•ถ๏ธ and some Light themes.

It is all contained in an extension that can run on the EasyEda website or standalone app, in any browser (tested chrome and firefox).

๐Ÿ’พ Installing

  1. Download the latest release.
  2. Now in EasyEda, open the extensions window by going to: Advanced > Extensions > Extensions Settings.
  3. Select Load Extension > Select Files.
  4. Select all of the files from the extension folder from the downloaded repository.
  5. Make sure that the Extension ID field says themer. Then load the extension.
  6. Thats it! The themes extension is now mounted.
  7. You can now go to Theme Settings > Select Theme to select a theme.

Note: If you remount the extension, it is reccomended that you reload the page (Right Click > Reload on standalone app).

๐Ÿ“ท Screenshots

Some notable themes.

One Dark

Darker

Monokai Pro

Dracula

Oceanic

Light Owl

๐Ÿ”จ Contributing

Whether you want to add to the project, edit it for yourself, or fix some CSS that I missed, the following can help you out a bit when it comes to the project and EasyEda extensions.

File Structure

File Description
easyeda-helper.js Some helper methods for the EasyEda api
main.js The main code for the extension.
manifest.json Must be present to identify the extension.
style.txt The CSS styling. It is a .txt as .css is not allowed to be uploaded in EasyEda.
themes.json Themes and their colors.
/extra/style.css Use this to develop the CSS, when uploading, copy this over to style.txt

CSS Considerations

  • Extensions can only mount certain filetypes (js, jpg, png, gif, svg, txt, json, md).
  • Because of the above, the stylesheet mounted is uploaded as a .txt file. The actual stylesheet for development purposes can be found in extra/style.css. It can then be copied over to the txt for upload.
  • To make CSS editing much easier, there is a tool in Theme Settings > Edit CSS, which allows you to update the CSS without remounting the extension. You can also force reload the CSS in this dialog.

Other Considerations

  • All theme info is stored in themes.json, you can simply add a new theme by adding to the json using the existing structure.
  • EasyEda can load resources that were uploaded, in this case: themes.json and style.txt; Using an api call. These are loaded as blobs and must be processed.
  • EasyEda has some basic documentation and outdated examples for their api. You can use developer tools and prettify the main.min.js, and explore it to see what api calls are possible and what arguments should be used.

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.