Theemey.js

A theme engine built in jQuery and Stylus.

Generate Convert Improve

Install / Use

/learn @CKH4/Theemey.js

About this skill

Quality Score

0/100

README

theemey.js

demo - http://ckh4.github.io/theemey.js/

How to use?

Setup

Include the script in your page:

JS

<script src="assets/theemey.js"></script>

##Making Your Theme

Include the Stylus mixin in your page:

CSS

theme($name, /* theme properties go here */)
  /#{$name} &
    //theme goes here

Only use variable properties here, otherwise you'll have redundant code.

<br> Write the rest of your theme like normal: ###### CSS ```Stylus body margin 0

header width 100% height 64px


<br>
Call the themes on the <body> element:
###### CSS
```Stylus
body
  theme(/* name */, /* properties */)

Example

Setup your HTML:

HTML

<html>
 <head>
   <link href="assets/style.css" type="text/css" rel="stylesheet"></link>
 </head>

  <body>
    <header>Header</header>

    <article>
      <h3>Lorem Ipsum...</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a dapibus mi. Donec vitae tempor magna. Vestibulum orci leo, porttitor ac nisi nec, lacinia imperdiet leo. Nam luctus, felis sed molestie pretium, turpis orci eleifend est, eget ullamcorper metus risus aliquam justo. Aenean est leo, pharetra vitae tempor ac, vestibulum non dolor. Cras vulputate sed justo nec auctor. Ut sit amet semper augue. Vivamus erat diam, iaculis eget libero at, accumsan consectetur ante. Morbi sagittis arcu sollicitudin hendrerit fermentum.</p>
    </article>

    <script src="assets/theemey.js"></script>
  </body>
</html>

<br> Setup your CSS: ###### CSS ```Stylus theme($name, $background, $color, $font) #{$name} & background $background color $color font-family $font

body margin 0 theme(default, #333, #bdbdbd, sans-serif) theme(red, #c00, #000, serif)

header width 100% paddding 32px

article width 600px max-width 90% margin 32px auto


<br>
##Changelog
- v1.0 First Release, basic functionality

##Future Plans
- v1.5 Add support for other CSS preprocessors
- v2.0 Remove jQuery Dependency

Related Skills

node-connect

349.7k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

109.7k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

349.7k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

349.7k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。