How to keep the blue background color after right clicking the selected text in QLabel to generate a QMenu? - pyside2

I want to keep the selected text keep the blue background color,but when i right clicked the text to generate a menu,the selected text will turn gray.how should i do.
when i clicked the qlabel text to make it selected,the result is like this picture.
And when i right click the selected text,the blue color turn gray.
here is my demo code.
import pyperclip
import sys
from PySide2.QtCore import Qt
from PySide2.QtGui import QCursor
from PySide2.QtWidgets import QLabel,QMenu,QAction,QHBoxLayout,QApplication,QWidget
class moreInfoLabel(QLabel):
def __init__(self, *args, **kw):
super().__init__(*args, **kw)
self.setTextInteractionFlags(Qt.TextSelectableByMouse)
self.setContextMenuPolicy(Qt.CustomContextMenu)
self.customContextMenuRequested.connect(self.rightMenuShow)#开放右键策略
self.setStyleSheet('''
QMenu {
border: Opx;
font-size: 9pt;
width:100px;
background-color:white
}
QMenu::item {
width:160px;
font-family: "Microsoft YaHei";
border: 0px;
min-height: 15px;
max-height: 26px;
padding:10px 15px 10px 15px;
font-size: 9pt;
}
QMenu::item:selected {
background-color: #f9f9f9;
}
QLabel{
font-size:13px;
font-family:微软雅黑;
}
''')
def rightMenuShow(self, pos):
print(self)
menu = QMenu(self)
menu.addAction(QAction('复制', menu))
menu.addAction(QAction('全选', menu))
menu.triggered.connect(self.menuSlot)
menu.exec_(QCursor.pos())
self.setStyleSheet('''
QMenu {
border: Opx;
font-size: 9pt;
width:100px;
background-color:white
}
QMenu::item {
width:160px;
font-family: "Microsoft YaHei";
border: 0px;
min-height: 15px;
max-height: 26px;
padding:10px 15px 10px 15px;
font-size: 9pt;
}
QMenu::item:selected {
background-color: #f9f9f9;
}
QLabel{
font-size:13px;
font-family:微软雅黑;
background-color: #f9f9f9;
}
''')
def menuSlot(self, act):
if act.text() == '复制':
pyperclip.copy(self.selectedText())
elif act.text() == '全选':
len1 = len(self.text())
self.setSelection(0,len1)
self.selectedText = self.text
class Demo(QWidget):
def __init__(self):
super(Demo, self).__init__()
self.moreinfo = moreInfoLabel("YOUJIAN")
self.layout = QHBoxLayout()
self.layout.addWidget(self.moreinfo)
self.setLayout(self.layout)
if __name__ == "__main__":
app = QApplication()
demo = Demo()
demo.show()
sys.exit(app.exec_())
Is there any way to solve this problem

When the menu is shown, the widget uses the Inactive color group of the palette, which is the one normally used when the widget is in a window that is not active.
The simple solution is to temporarily replace the Highlight and HighlightedText color role for that group and restore the original palette afterwards. This step is necessary for consistency, as the default Inactive colors should be kept in case the window is actually unfocused.
Note that in the following example I did some changes:
the custom context menu signal is normally used when managing the menu from another object, like its parent, but when it's actions have results in the same class it's better to use the contextMenuEvent() handler;
it's better to check the menu result against the triggered QAction, not its text;
the pyperclip module is unnecessary as Qt already provides QClipboard;
do not overwrite self.selectedText with self.text, otherwise self.selectedText() will always return the full text of the label, even if there is no selection;
class MoreInfoLabel(QLabel):
_defaultPalette = None
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.setTextInteractionFlags(Qt.TextSelectableByMouse|Qt.TextEditable)
self.setStyleSheet('''
QMenu {
border: Opx;
font-size: 9pt;
width:100px;
background-color:white
}
QMenu::item {
width:160px;
font-family: "Microsoft YaHei";
border: 0px;
min-height: 15px;
max-height: 26px;
padding:10px 15px 10px 15px;
font-size: 9pt;
}
QMenu::item:selected {
background-color: #f9f9f9;
}
QLabel{
font-size:13px;
font-family:微软雅黑;
}
''')
def contextMenuEvent(self, event):
oldPalette = self.palette()
tempPalette = self.palette()
tempPalette.setBrush(tempPalette.Inactive, tempPalette.Highlight,
oldPalette.highlight())
tempPalette.setBrush(tempPalette.Inactive, tempPalette.HighlightedText,
oldPalette.highlightedText())
self.setPalette(tempPalette)
menu = QMenu(self)
copyAction = menu.addAction('复制')
selectAction = menu.addAction('全选')
res = menu.exec_(event.globalPos())
self.setPalette(oldPalette)
if res == copyAction:
QApplication.clipboard().setText(self.selectedText())
elif res == selectAction:
self.setSelection(0, len(self.text()))
That said, QLabel already provides the menu entries you're trying to replace. If you did that for localization purposes, then overriding the default menu behavior is just wrong, as the problem is elsewhere.

I am sure it is possible to achieve what you are asking, however I would suggest a simpler alternative.
Instead of using a QLabel, It would be much simpler to achieve similar or identical behavior using a QLineEdit. You can set the line edit to read only and setFrame(False) to make it appear identical to a QLabel, with the added bonus that maintaining the current selection when opening a context menu is the default behavior for a QLine edit.
For example:
In the image below, the one on the right is the QLineEdit...
import pyperclip
import sys
from PySide2.QtCore import Qt
from PySide2.QtGui import QCursor
from PySide2.QtWidgets import QLabel,QMenu,QAction,QHBoxLayout,QApplication,QWidget, QLineEdit
QSS = ("""QMenu {
border: Opx;
font-size: 9pt;
width:100px;
background-color:white
}
QMenu::item:selected {
background-color: #f9f9f9;
}
QMenu::item {
width:160px;
font-family: "Microsoft YaHei";
border: 0px;
min-height: 15px;
max-height: 26px;
padding:10px 15px 10px 15px;
font-size: 9pt;
}
QLabel{
font-size:13px;
font-family:微软雅黑;
color: black;
background-color: #f9f9f9;
}""" # Added styles below to make it look identical to label
"""QLineEdit{
font-size:13px;
font-family:微软雅黑;
color: black;
background-color:#f9f9f9;
}""")
class Demo(QWidget):
def __init__(self):
super(Demo, self).__init__()
self.moreinfo = QLabel("YOUJIAN")
self.layout = QHBoxLayout()
self.layout.addWidget(self.moreinfo)
self.setLayout(self.layout)
self.moreinfo.setTextInteractionFlags(Qt.TextSelectableByMouse)
########################################
self.lineedit = QLineEdit(self) # <--- added these lines
self.layout.addWidget(self.lineedit)
self.lineedit.setText("YOUJAIN")
self.lineedit.setFrame(False)
self.lineedit.setReadOnly(True)
self.setStyleSheet(QSS)
if __name__ == "__main__":
app = QApplication()
demo = Demo()
demo.show()
sys.exit(app.exec_())

Related

pyqt window not responding while running program

I am trying to download image through web scrapping through gui, whenever i run script images are downloaded but gui window doesnt respond and keep loading and after all images are downloaded it gets its control back plus my search button completely get frozen once i click it and it start to download images
index.py
from PyQt6.QtWidgets import (
QApplication,
QWidget,
QMainWindow,
QLineEdit,
QVBoxLayout,
QHBoxLayout,
QPushButton,
QGridLayout,
QLabel
)
from PyQt6.QtCore import Qt
from PyQt6.QtGui import QCursor
import sys
from IMD import Parser
from pathlib import Path
import os
os.chdir("./images")
class ImageDownloaderWindow(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("Layout")
self.window = QWidget()
self.layout = QVBoxLayout()
self.layout.setAlignment(Qt.AlignmentFlag.AlignTop)
self.window.setLayout(self.layout)
self.setFixedSize(550, 500)
self.setCentralWidget(self.window)
self.createText("Image Downloader", self.layout, """
margin: 80px 20px 10px 20px;
font-size: 40px;
font-family: monospace;
font-weight: bold;
""")
self.createText("Download Images of your choice", self.layout, """
margin-bottom: 80px;
font-size: 20px;
font-family: 'Eras Bold ITC';
""")
self.name = ""
self.createSearchBar()
self.createSearchButton()
self.searchClickEvent()
def createText(self, text, layout, stylesheet=None):
self.display = QLabel(text)
self.display.setStyleSheet(stylesheet)
self.display.setAlignment(Qt.AlignmentFlag.AlignHCenter)
layout.addWidget(self.display)
def createSearchBar(self):
self.searchBar = QLineEdit()
# self.searchBar.setStyleSheet("margin: 0px 50px; color: #fff;")
self.searchBar.setAlignment(Qt.AlignmentFlag.AlignCenter)
self.layout.addWidget(self.searchBar)
def createSearchButton(self):
self.searchButton = QPushButton("Search")
self.searchButton.setFixedSize(140, 60)
self.searchButton.setCursor(QCursor(Qt.CursorShape.PointingHandCursor))
self.layout.addWidget(self.searchButton, alignment=Qt.AlignmentFlag.AlignCenter)
def displayImageName(self):
return self.searchBar.text()
def searchClickEvent(self):
self.searchButton.clicked.connect(self.parsedImages)
def parsedImages(self):
self.name = self.displayImageName()
parser = Parser("https://unsplash.com/s/photos/"+self.name)
Path(self.name).mkdir(exist_ok=True)
parser.getSources()
os.chdir(self.name)
imgsLen = len(os.listdir())
images = parser.srcs
for index, img in enumerate(images):
with open(self.name+str(index)+'.jpg', "wb") as f:
f.write(parser.getContent(img))
def main():
app = QApplication([])
app.setStyleSheet(
"""
QWidget {
color: #fff;
background-color: #123;
}
QLineEdit {
color: #000;
padding: 10px;
border: 1px solid #000;
border-radius: 10px;
background-color: #fff;
margin: 0px 50px;
font-size: 15pt;
}
QPushButton {
background-color: #00a656;
margin-top: 10px;
padding: 250px;
border: 1px solid #00a656;
border-radius: 10px;
font-size: 23px;
font-weight: bold;
letter-spacing: 3px;
}
QPushButton:hover {
cursor: pointer;
background-color: #000;
color: #fff;
}
"""
)
ui = ImageDownloaderWindow()
ui.show()
sys.exit(app.exec())
if __name__ == "__main__":
main()
also i have made my own parser class to get image of content
#parser.py
import requests
from bs4 import BeautifulSoup
from pathlib import Path
import os
class Parser:
def __init__(self, site):
self.site = site
self.srcs = []
def parse_content(self):
soup = None
try:
response = requests.get(self.site)
soup = BeautifulSoup(response.content, "html.parser")
except Exception as error:
soup = None
print(error)
finally:
return soup
def getSources(self):
siteContent = self.parse_content()
if siteContent:
imgElements = siteContent.find_all("img", class_="YVj9w")
for img in imgElements:
self.srcs.append(img.get("src"))
return True
return False
def getContent(self, img):
response = requests.get(img)
return response.content
how should i make my gui window and betton working when it is downloading image. I quit tkinter because i faced same issue there and i thought there was problem with tkinter but now i knew gui behaves in such way and it may have some solution.

How to stop Flickering a moving image in Nextjs

I'm new to next and I have been trying to make the game flappy bird. I used useEffect and styled components to animate the player(or bird) and pipes too. Basically when I run my app on chrome, it works fine but it flickers in safari. And after I play it a few times in safari it starts to work almost fine. For state management, I'm using redux.
Can someone help me to solve the problem and explain what is actually going on?
From what I think it is because of the re-rendering of the images but why is it working properly in chrome? And is there a better way to animate this?
This is my main code and I used the useEffect inside Bird and Pipes file to move them across the GameBox
import styled from 'styled-components'
import Pipes from './Pipes'
import { startGame, setBirdPosition, resetGame } from './features/app-slice'
import { store, constants } from './store'
import { useSelector } from 'react-redux'
import Bird from './Bird'
import { useEffect, useState } from 'react'
export default function GameBox() {
const [jumpAudio, setAudio] = useState(null)
useEffect(() => {
setAudio(new Audio('/sound-effects/jump.wav'))
// only run once on the first render on the client
}, [])
const birdPosition = useSelector((state) => state.birdPosition)
const score = useSelector((state) => state.score)
const gameStarted = useSelector(state => state.gameStarted)
const isGameOver = useSelector(state => state.isGameOver)
function jump() {
const JUMP = constants.JUMP
if (isGameOver) {
store.dispatch(resetGame())
return
}
else if (!gameStarted) {
// store.dispatch(resetGame())
store.dispatch(startGame())
}
else if (birdPosition - JUMP >= 0)
store.dispatch(setBirdPosition(-JUMP))
else store.dispatch(setBirdPosition(0))
jumpAudio.pause();
jumpAudio.currentTime = 0;
jumpAudio.play()
}
return (
<Box onClick={jump}>
{isGameOver ? <GameOver /> : null}
{gameStarted || isGameOver ? <Score>{score}</Score> : null}
{true ? <Bird /> : null}
<Pipes height={200} />
{!gameStarted && !isGameOver ? <GameStart /> : null}
{/* <Pipes height={200} position={props.width + 300} wh={props.height} /> */}
</Box>
)
}
const Box = styled.div`
user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none;
background: no-repeat center/100% url('/img/background-day.png');
overflow: hidden;
position: relative;
width: ${constants.WINDOW_WIDTH}px;
height: ${constants.WINDOW_HEIGHT}px
`
const GameStart = styled.div`
background: no-repeat center/70% url('/img/gamestart.png');
text-align: center;
width: 100%;
height: 100%;
`
const GameOver = styled.div`
position: relative;
z-index: 10;
background: no-repeat center/70% url('/img/gameover.png');
text-align: center;
width: 100%;
height: 100%;
`
const Score = styled.div`
font-family: 'Gamja Flower', cursive;
color: white;
text-shadow: black 2px 2px;
position: absolute;
font-size: 3rem;
z-index:1;
right: 10%;
top: 0;
`

How to modify angular-material2 mat-checkbox left icon size and color?

angular material2 mat-checkbox
How do I modify the left icon size, and the left icon state color?
<mat-checkbox>Like Me.</mat-checkbox>
You can use this ( .mat-checkbox-inner-container ) CSS class to modify the mat-checkbox
.mat-checkbox-inner-container {
height: 50px!important;
width: 50px!important;
}
Note that you need to put the style modification in styles.css root folder (
/src/styles.css ) and not in the components css.
Also put !important ( width: 50px!important; ) to override the
default style.
Below is the default style for the mat-checkbox
.mat-checkbox-inner-container {
display: inline-block;
height: 20px;
line-height: 0;
margin: auto;
margin-right: 8px;
order: 0;
position: relative;
vertical-align: middle;
white-space: nowrap;
width: 20px;
flex-shrink: 0;
}
Hope this helps.
If you want to change color then use these in your CSS file
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: black;
}
::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background-color: black !important;
}
::ng-deep .mat-checkbox-checkmark-path {
stroke: #000 !important;
}
Hope this css will resolve your issue
to change styles use classes and define them in your scss component file.
When you see that this not work's, use the selectors :host /deep/ before the class name in each of the scss defined classes.
The size of the icons is defined by the font-size not width / height
Hope I helped you
In my project, we overrode sizes of checkboxes and radio buttons to 16px in this way:
body .mat-checkbox-inner-container, body .mat-radio-container, body .mat-radio-outer-circle, body .mat-radio-inner-circle {
height: 16px;
width: 16px;
}
body .mat-checkbox-ripple, body .mat-radio-ripple {
left: calc(50% - 20px);
top: calc(50% - 20px);
height: 40px;
width: 40px;
border-radius: 50%;
}

jqPlot Pie Renderer mixed data labels

I am creating a custom pie chart using jqPlot's PieRenderer. My only problem is that I can either show the label or the percentage on the dataLabels. I want to do a mix and show both like <label>\n<percentage>. Explanation:
By setting this.dataLabels = 'percent', I can do this:
By setting this.dataLabels = 'label', I can do this:
I want to do this:
Do you have any ideas?
According to the source code, dataLabels doesn't support rendering label together with percent at the same time.
I think you can easily create a list of labels using JavaScript and make sure you use <br/> instead of \n if you want to render 2 lines for each part.
#sza's solution is tidier, so I will have to accept it. I wanted to post my own though, because it is easier and it may help someone.
What I did is, put two pieCharts on each other, where the first one is visible and has the percentage values and the second one has no fill and is invisible except for the labels.
My XHTML code:
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="true" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="percent" shadow="false" extender="pieChartExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="mainPieChart" />
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="false" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="label" shadow="false" extender="pieChartLabelExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="pieLabels" />
extender.js:
function pieChartExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelFormatString = '%#.2f%%';
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
function pieChartLabelExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
CSS file:
.chartContainer {
position:relative;
margin: 0 auto;
top: 10px;
width: 350px;
height: 350px;
}
.chartLegend {
border: 1px solid #d7d7d8;
margin: 40px 40px;
width: 80%;
}
.pieExtra {
position:absolute;
left: 17px;
top: 13.5px;
}
.pieLabels { position:absolute !important; }
.mainPieChart { position:absolute !important; }
.jqplot-title { display:none !important; }
.jqplot-grid-canvas { display:none !important; }
.jqplot-series-shadowCanvas { display:none !important; }
.mainPieChart .jqplot-event-canvas { z-index: 10 !important; }
.jqplot-data-label { color: #fff; font-weight: bold; font-size: 14px; }
.pieLabels .jqplot-data-label { margin-top: -9px !important; }
.mainPieChart .jqplot-data-label { margin-top: 8px !important; }
.pieLabels .jqplot-series-canvas { display:none !important; }
Notice that:
both pieCharts (called pieLabels and mainPieChart) are absolutely positioned, in order to be placed on each other
jqplot-data-label of pieLabels is placed 9px above and jqplot-data-label of mainPieChart is placed 8px below to create the label-percentage label
jqplot-series-canvas for pieLabels is not displayed, in order to make it invisible.

coderay solarized

How I can add solarized-dark colors to coderay ?
I'm thinking about tweaking the alpha.rb file, but not sure which css class definitions substitute with which color code.
Any better ideas ?
Maybe there exist some out of the box solution ?
Found also this but not sure how to make usage of it.
The results of what follows are very close to the look of solarized but not perfect. Basically, I used this this stylesheet for solarize and went through selector by selector and did my best to translate it into the styles used by Coderay.
Here is the original solarized example for ruby:
Here is the results I am able to produce with coderay:
SO: it's not perfect, but will get anyone that wants to use a Solarized-like 'theme' for Coderay on their way.
Here is what you need to do (for a Rails 3 app):
First you will need to override the module within the coderay gem that it uses to generate inline styles. Create a file called coderay.rb within config/initializers.
Next paste in the following into the config/intializers/coderay.rb file you've just created:
module CodeRay
module Styles
# A colorful theme using CSS 3 colors (with alpha channel).
class Alpha < Style
register_for :alpha
code_background = '#073642'
numbers_background = 'hsl(180,65%,90%)'
border_color = '#c0c0c0'
normal_color = '#d5f6f6'
CSS_MAIN_STYLES = <<-MAIN # :nodoc:
.CodeRay {
background-color:##073642;
border:1px solid #c0c0c0;
background: #002B36;
color:#eee8d5;
}
.CodeRay pre {
margin: 0px;
}
span.CodeRay { white-space: pre; border: 0px; padding: 2px; }
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px; }
table.CodeRay td { padding: 2px 4px; vertical-align: top; }
.CodeRay .line-numbers {
background-color:#d5f6f6;
color:#808080;
text-align:right;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
.CodeRay .line-numbers a {
background-color:#d5f6f6;
color:#808080;
text-decoration:none
}
.CodeRay .line-numbers a:target { color:#00f !important; }
.CodeRay .line-numbers .highlighted { color: red !important; }
.CodeRay .line-numbers .highlighted a { color: red !important; }
.CodeRay span.line-numbers { padding: 0px 4px; }
.CodeRay .line { display: block; float: left; width: 100%; }
.CodeRay .code { width: 100%; }
MAIN
TOKEN_COLORS = <<-'TOKENS'
.debug{color:#fff;background:#00f}
.annotation{color:#586E75}
.attribute-name{color:#93A1A1}
.attribute-value{color:#93A1A1}
.binary{color:#509}
.char .content{color:#d20}
.char .delimiter{color:#710}
.char{color:#2AA198}
.class{color:#268BD2;font-weight:bold}
.class-variable{color:#268BD2}
.color{color:#eee8d5}
.comment{color:#586E75}
.comment .char{color:#859900}
.comment .delimiter{color:#859900}
.complex{color:#a08}
.constant{color:#B58900;font-weight:bold}
.decorator{color:#268BD2}
.definition{color:#099;font-weight:bold}
.delimiter{color:#000}
.directive{color:#088;font-weight:bold}
.doc{color:#93A1A1}
.doc-string{color:#93A1A1;font-weight:bold}
.doctype{color:#DC322F}
.entity{color:#CB4B16;font-weight:bold}
.error{color:#93A1A1;background-color:#faa}
.escape{color:#CB4B16}
.exception{color:#CB4B16;font-weight:bold}
.float{color:#2AA198}
.function{color:#268BD2;font-weight:bold}
.global-variable{color:#268BD2}
.hex{color:#2AA198}
.imaginary{color:#f00}
.include{color:#b44;font-weight:bold}
.inline{background-color:transparent;color:#93A1A1!important}
.inline-delimiter{font-weight:bold;color:#DC322F}
.instance-variable{color:#268BD2}
.integer{color:#2AA198}
.key .char{color:#DC322F}
.key .delimiter{color:#268BD2}
.key{color:#859900}
.keyword{color:#859900;font-weight:bold}
.label{color:#93A1A1;font-weight:bold}
.local-variable{color:#268BD2}
.namespace{color:#859900;font-weight:bold}
.octal{color:#2AA198}
.operator, .predefined{color:#859900;font-weight:bold}
.predefined-constant{color:#2AA198}
.predefined-type{color:#DC322F;font-weight:bold}
.preprocessor{color:#859900}
.pseudo-class{color:#859900;font-weight:bold}
.regexp .content{color:#2AA198}
.regexp .delimiter{color:#DC322F}
.regexp .modifier{color:#CB4B16}
.regexp{background-color:transparent}
.reserved{color:#268BD2;font-weight:bold}
.shell .content{color:#2b2}
.shell .delimiter{color:#161}
.shell{background-color:transparent}
.string .char{color:#2AA198}
.string .content{color:#2AA198}
.string .delimiter{color:#DC322F}
.string .modifier{color:#2AA198}
.string{background-color:transparent}
.symbol .content{color:#2AA198}
.symbol .delimiter{color:#2AA198}
.symbol{color:#2AA198}
.tag{color: #268BD2}
.type{color:#DC322F;font-weight:bold}
.value{color:#268BD2}
.variable{color:#268BD2}
.insert{background:transparent}
.delete{background:transparent}
.change{color:#CB4B16;background:transparent}
.head{color:#CB4B16;background:transparent}
.head .filename{color:#CB4B16}
.delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}
.insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
.insert .insert{color:#CB4B16;background:transparent;font-weight:bold}
.delete .delete{color:##2AA198;background:transparent;font-weight:bold}
.change .change{color:#CB4B16}
.head .head{color:#CB4B16}
TOKENS
end
end
end
You'll also add the following CSS to your application (or, if you want, make a file in assets/stylesheets called coderay.css for it):
pre {
background: #002A35!important;
color: #93A1A1!important;
}
The above will set your code background to the dark background used by solarize and any code not annotated by codeway to the fallback color used in solarize.
Now just restart your app.
** Again, this isn't perfect and youll probably want to crack open that coderay.rb file again at some point and refine things. You can use this to help with that: http://jsfiddle.net/bradleygriffith/CNTw4/ **

Resources